Jest : Cannot read properties of undefined (reading 'SelectableBackground')

[rvasseur31]

Hello !

Since the update to 4.0.1 (I was on ^3.13.0), I have the following error when I ran my component test with jest :

  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'SelectableBackground')

      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/lib/commonjs/ActionSheet/TouchableNativeFeedbackSafe.tsx:33:43)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/lib/commonjs/ActionSheet/ActionGroup.js:1:954)

I haven't change anything except the version.

I tried several things :

• Add @expo to transformIgnorePatterns in jest config
• Add the ActionSheetProvider around my compoment

React Native Info :

Click me

``` System: OS: macOS 13.0 CPU: (8) arm64 Apple M1 Memory: 1.42 GB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 19.0.1 - /var/folders/z6/f9ls1kwd3lq20kc9v3ng1s2h0000gn/T/yarn--1669032634559-0.11580508815282453/node Yarn: 1.22.19 - /var/folders/z6/f9ls1kwd3lq20kc9v3ng1s2h0000gn/T/yarn--1669032634559-0.11580508815282453/yarn npm: 8.10.0 - ~/Desktop/DmbookProNext/node_modules/.bin/npm Watchman: 2022.11.07.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1 Android SDK: API Levels: 30, 31, 32 Build Tools: 30.0.3, 31.0.0, 32.0.0 System Images: android-31 | Google APIs ARM 64 v8a, android-33 | Google APIs ARM 64 v8a, android-33 | Google Play ARM 64 v8a Android NDK: 21.4.7075529 IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: 14.1/14B47b - /usr/bin/xcodebuild Languages: Java: 11.0.12 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.5 => 0.70.5 react-native-macos: Not Found jest: "^27.5.1" npmGlobalPackages: *react-native*: Not Found ```

[bradbyte]

@rvasseur31 is it possible you can include an example of your test? I'm trying to see if it's react/jest or code issue. Thanks!

[rvasseur31]

Hi ! Thank you for your quick response, I finally found how to reproduce it on a blank project.

The bug seems to be related to a 'react-native' mock, here is the exemple repo : https://github.com/rvasseur31/action-sheet.

You can find it in __mocks__/react-native-firebase.

[rvasseur31]

Hi ! I wanted to close this, this morning and I manage to avoid this error by changing my react native mock to a react native crashlytics mock

Old

``` import * as ReactNative from 'react-native'; jest.doMock('react-native', () => { return Object.setPrototypeOf( { Platform: { OS: 'android', select: () => {}, }, }, ReactNative, ); }); // The file in my project : // import * as ReactNative from 'react-native'; // jest.doMock('react-native', () => { // return Object.setPrototypeOf( // { // Platform: { // OS: 'android', // select: () => {}, // }, // NativeModules: { // ...ReactNative.NativeModules, // RNFBAnalyticsModule: { // logEvent: jest.fn(), // }, // RNFBAppModule: { // NATIVE_FIREBASE_APPS: [ // { // appConfig: { // name: '[DEFAULT]', // }, // options: {}, // }, // { // appConfig: { // name: 'secondaryFromNative', // }, // options: {}, // }, // ], // FIREBASE_RAW_JSON: '{}', // addListener: jest.fn(), // eventsAddListener: jest.fn(), // eventsNotifyReady: jest.fn(), // removeListeners: jest.fn(), // }, // RNFBCrashlyticsModule: {}, // RNFBMessagingModule: { // onMessage: jest.fn(), // }, // }, // }, // ReactNative, // ); // }); ```

New

``` jest.mock('@react-native-firebase/crashlytics', () => jest.fn().mockImplementation(() => ({ log: jest.fn(), recordError: jest.fn(), })), ); ```