CODEWITHSUNDEEP
react-nativejestjsreact-native-elements
Bilal Abdeen
Bilal Abdeen

Reputation: 1945

Using JEST with react-native-elements - mockModal is not a function

Is it possible to use jest in react-native projects, which use components from react-native-elements?

The example jest file https://github.com/vanGalilea/react-native-testing/blob/master/tests/Login.test.tsx works fine as it is. As soon as I change the <Text> component from the react-native version to the react-native-elements version, I get the following error message.

  ● Test suite failed to run

    Jest encountered an unexpected token
    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
    By default "node_modules" folder is ignored by transformers.
    Here's what you can do:
....
....
    Details:
    C:\react\testingLibrary\node_modules\react-native-elements\dist\index.js:6
    import Button from './buttons/Button';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

I added the following line to the jest.config.js file.

transformIgnorePatterns: ['node_modules/(?!(jest-)?@react-native|react-native|react-native-elements/*)',],

This got rid of the error above. However, now, I am getting the following error message.

  ● Test suite failed to run

    TypeError: mockModal is not a function

      at node_modules/react-native/jest/setup.js:116:12
      at Object.<anonymous> (node_modules/react-native/jest/mockModal.js:16:15)
      at node_modules/react-native/jest/setup.js:115:28

Environment:

  1. react-native: 0.67.0
  2. react-native-elements: 3.4.2
  3. @testing-library/jest-native: 4.0.4
  4. @testing-library/react-native: 9.0.0
  5. jest: 27.4.7
  6. metro-react-native-babel-preset: 0.66.2
  7. react-test-renderer: 17.0.2
  8. @babel/core: 7.16.7
  9. @babel/runtime: 7.16.7
  10. babel-jest: 27.4.6

Upvotes: 4

Views: 2366

Answers (3)

Mauro Elias
Mauro Elias

Reputation: 119

Try using this mock

import .....

jest.mock('@rneui/themed', ()=>({
  Button: jest.fn()
}));

describe( ... )

Upvotes: 3

Kumar Parth
Kumar Parth

Reputation: 569

● Test suite failed to run

    TypeError: mockModal is not a function

      at node_modules/react-native/jest/setup.js:116:12

Update to react-native version 0.67.2 to fix mockModal issue. Here is the update from react-native: https://github.com/facebook/react-native/blob/main/CHANGELOG.md#fixed

Issue: https://github.com/facebook/react-native/issues/32939

Upvotes: 1

Bilal Abdeen
Bilal Abdeen

Reputation: 1945

A temporary workaround is to downgrade react-native to 0.66.4. This seems to fix the problem.

Update 2022-01-21:

The react-native-elements development team acknowledged the problem. Moreover, they have already fixed it in the beta version 4.0.0-beta.0. Check the following issue for the latest updates on this bug. https://github.com/react-native-elements/react-native-elements/issues/3304

Upvotes: 0

Related Questions