facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
116.94k stars 24.06k forks source link

TypeError: pressability.getEventHandlers is not a function #43935

Open khushal87 opened 2 months ago

khushal87 commented 2 months ago

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

  1. 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_
github-actions[bot] commented 2 months ago
:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.
khushal87 commented 2 months ago

The branch has everything needed to be tested - https://github.com/GetStream/stream-chat-react-native/pull/2475

VimalPalanisamy0904 commented 1 month ago

Facing same issue in react-native 0.73.8 , @testing-library/react-native 12.5.1 and jest 29.7.0 for Pressable. If we use ThouchableOpacity then it returns TypeError: cleanupRef.current is not a function