TypeError: pressability.getEventHandlers is not a function
オープン
まだ誰も着手していません。
Issue: Author Provided Repro
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
While using the Pressable component in my component and testing it using @testing-library/react-native version 12.4.5, I am getting this issue as per the attached stack trace.
Steps to reproduce
- Testing the component - https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Attachment/AudioAttachment.tsx with @testing-library/react-native version 12.4.5
React Native Version
0.73.6
Affected Platforms
Runtime - Android, Runtime - iOS
Output of npx react-native info
System:
OS: macOS 14.3.1
CPU: (12) arm64 Apple M2 Pro
Memory: 1.01 GB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.19.0
path: ~/.nvm/versions/node/v18.19.0/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 7.24.2
path: ~/Stream/stream-chat-react-native/node_modules/.bin/npm
Watchman:
version: 2024.01.22.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/khushalagarwal/.rvm/gems/ruby-3.1.2/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Android SDK:
API Levels:
- "31"
- "33"
- "34"
Build Tools:
- 30.0.3
- 31.0.0
- 33.0.0
- 33.0.1
- 34.0.0
System Images:
- android-33 | Google APIs ARM 64 v8a
- android-33 | Google Play ARM 64 v8a
- android-34 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 15.3/15E204a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.6
wanted: 0.73.6
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
TypeError: pressability.getEventHandlers is not a function
52 |
53 | const onPlayPauseMock = jest.fn();
> 54 | render(
| ^
55 | getComponent({
56 | fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
57 | item: { file: { name: 'audio.mp3' }, paused: true, progress: 1 } as unknown as FileUpload,
at getEventHandlers (node_modules/react-native/Libraries/Pressability/usePressability.js:49:53)
at Pressable (node_modules/react-native/Libraries/Components/Pressable/Pressable.js:336:40)
at Component (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6351:18)
at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9150:20)
at updateForwardRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11361:16)
at beginWork$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15811:12)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15745:5)
at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15717:7)
at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15422:20)
at callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
at callback (node_modules/react/cjs/react.development.js:2667:24)
at Object.flushActQueue [as act] (node_modules/react/cjs/react.development.js:2521:11)
at act (node_modules/@testing-library/react-native/src/render-act.ts:11:21)
at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:58:33)
at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:29:10)
console.error
The above error occurred in the <Pressable> component:
at accessible (/Users/khushalagarwal/Stream/stream-chat-react-native/package/node_modules/react-native/Libraries/Components/Pressable/Pressable.js:206:5)
at View
at Component (/Users/khushalagarwal/Stream/stream-chat-react-native/package/node_modules/react-native/jest/mockComponent.js:30:18)
at item (/Users/khushalagarwal/Stream/stream-chat-react-native/package/src/components/Attachment/AudioAttachment.tsx:84:11)
at AudioAttachment{messageInput{audioAttachment}}
at children (/Users/khushalagarwal/Stream/stream-chat-react-native/package/src/contexts/themeContext/ThemeContext.tsx:48:11)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
### Reproducer
https://github.com/GetStream/stream-chat-react-native/pull/2475
### Screenshots and Videos
_No response_
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず PR #2475 のテスト再現コードを実行し、package/src/components/Attachment/AudioAttachment.tsx を調査します。react-native/Libraries/Pressability/usePressability.js と Pressable.js を通じて失敗を追跡し、その後、関連するテストが TypeError なしで正常にレンダリングされることを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile-dev, testing-qa
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 32/100