`TypeError: _ref2.getBoundingClientRect is not a function` when unit testing code
オープン
まだ誰も着手していません。
Needs: Triage :mag:
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
Despite .getBoundingClientRect() working just fine in an actual runtime, it appears to be undefined (and thus, crashing unexpectedly when called) in Jest tests:
TypeError: _ref.getBoundingClientRect is not a function
at getBoundingClientRect (App.tsx:26:26)
This error might also appear as:
AggregateError:
at aggregateErrors (node_modules/react/cjs/react.development.js:552:11)
at node_modules/react/cjs/react.development.js:860:40
because of poor aggregateErrors implementation that, as pictured, does not provide actual error messages.
Steps to reproduce
- Run
yarn testin reproducer - 💥
React Native Version
0.83.0
Affected Platforms
Other (please specify)
Output of npx @react-native-community/cli info
info Fetching system and libraries information...
System:
OS: macOS 26.1
CPU: (10) arm64 Apple M1 Max
Memory: 1.09 GB / 64.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 24.11.1
path: /usr/local/bin/node
Yarn:
version: 4.12.0
path: /usr/local/bin/yarn
npm:
version: 11.6.2
path: /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.2
- iOS 26.2
- macOS 26.2
- tvOS 26.2
- visionOS 26.2
- watchOS 26.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 26.2/17C52
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 20.0.0
wanted: 20.0.0
react:
installed: 19.2.0
wanted: 19.2.0
react-native:
installed: 0.83.0
wanted: 0.83.0
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: false
Stacktrace or Logs
TypeError: _ref.getBoundingClientRect is not a function
24 | }
25 |
> 26 | const rect = ref.getBoundingClientRect();
| ^
27 |
28 | console.log(rect);
29 | }}
at getBoundingClientRect (App.tsx:26:26)
at commitAttachRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9763:44)
at runWithFiberInDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2315:13)
at safelyAttachRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9781:9)
at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10083:26)
at recursivelyTraverseLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10892:11)
at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10005:11)
at recursivelyTraverseLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10892:11)
at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10005:11)
at recursivelyTraverseLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10892:11)
at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10087:11)
at flushLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13774:15)
at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13697:9)
at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12336:15)
at performWorkOnRootViaSchedulerTask (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2908:7)
at flushActQueue (node_modules/react/cjs/react.development.js:590:34)
at Object.<anonymous>.process.env.NODE_ENV.exports.act (node_modules/react/cjs/react.development.js:884:10)
at Object.act (__tests__/App.test.tsx:10:27)
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
at node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
at Object.<anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)
MANDATORY Reproducer
https://github.com/wojtekmaj/react-native-undefined-get-bounding-client-rect
Screenshots and Videos
No response
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
必須の再現用ケースで yarn test を実行し、その後 App.tsx の26行目と __tests__/App.test.tsx の10行目を調査します。react-test-renderer を通じた ref のアタッチを追跡し、getBoundingClientRect に対する期待されるテスト動作を判断します。完了には、失敗を再現し、検証済みの解決策またはより明確なスコープを確立することが必要です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile, testing
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 45/100