Testing with Jest & Enzyme: TypeError: Cannot read property 'hide' of undefined

💻 My environment

• react-native-bootsplash version: 2.2.5
• react-native version: 0.62.2
• Platform: Testing environment
• OS version: Testing environment
• Device: Testing environment
• Simulator: no
• Android Studio version: 3.6 AI-192.7142.36.36.6392135
• Android buildToolsVersion: 28.0.3, 29.0.2
• Xcode version: 11.3.1/11C504

    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.4",
    "jest": "^26.4.2",
    "jest-enzyme": "^7.1.2",

🕵️‍♂️ Reproducing the issue

The package works perfectly fine in a non-testing env. However, in a testing-environment , it gives this error:

$ jest __tests__/App1.test.tsx
 FAIL  __tests__/App1.test.tsx (7.879s)
  ✕ render without errors (75ms)

  ● render without errors

    TypeError: Cannot read property 'hide' of undefined

      36 |     this.addDebugMenuListener();
      37 |     PushNotificationSubscriber.registerForPushNotificationsAsync();
    > 38 |     RNBootSplash.hide();
         |                  ^
      39 |   }
      40 |
      41 |   componentWillUnmount() {

      at Object.hide (node_modules/react-native-bootsplash/index.js:5:16)
      at App.componentDidMount (src/App.tsx:38:18)
      at fn (node_modules/enzyme/src/ShallowWrapper.js:429:22)
      at Object.batchedUpdates (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:771:16)
      at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:428:26)
      at shallow (node_modules/enzyme/src/shallow.js:10:10)
      at setup (__tests__/App1.test.tsx:22:10)
      at Object.<anonymous> (__tests__/App1.test.tsx:26:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        8.053s, estimated 9s
Ran all test suites matching /__tests__\/App1.test.tsx/i.

I mocked the hide and show methods in __mocks__/react-native-bootsplash/react-native-bootsplash.js:

jest.mock('react-native-bootsplash', () => {
  return () => ({
    hide: jest.fn(),
    show: jest.fn(),
  });
});

But I still get the same error.

🤞Solution

Do you know what needs to be done to address this issue? Ideally, provide a pull request with a fix.

[MuhmdRaouf]

Hey guys, I prefer to put all of my mocks in JestSetupFile.js but my work college love the mocks style as he says it looks better and more organized so I came up with how to use the __mocks__ method in case of you still needed, I just wanted to share it with you guys, that’s the file path: __mocks__/react-native-bootsplash.js

/**
 * @format
 */

const reactNativeBootsplashMock = {
  hide: jest.fn().mockResolvedValueOnce(),
  show: jest.fn().mockResolvedValueOnce(),
  getVisibilityStatus: jest.fn().mockResolvedValue('hidden')
};

module.exports = reactNativeBootsplashMock;

I used the same way async-storage use and it works perfectly.

[zoontek]

I invite you to read Jest documentation about where using jest.mock