react / react/react-native

`TypeError: _ref2.getBoundingClientRect is not a function` when unit testing code

Offen
#54,916 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Needs: Triage :mag:
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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
  1. Run yarn test in reproducer
  2. 💥
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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Führe yarn test im vorgeschriebenen Reproducer aus und inspiziere anschließend App.tsx in Zeile 26 sowie __tests__/App.test.tsx in Zeile 10. Verfolge die Ref-Anbindung durch react-test-renderer und bestimme das erwartete Testverhalten für getBoundingClientRect; der Abschluss erfordert, den Fehler zu reproduzieren und eine verifizierte Lösung oder einen klareren Umfang festzulegen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native, typescript
Bereich
mobile, testing
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Ruhig
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.