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

Question

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

Answer 1

Try using this mock

import .....

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

describe( ... )