Cannot find module 'NativeAnimatedHelper' when using Jest mock

user_3533365 0
Viewed 8770

I have been trying to setup react-navigation in my new React Native app. While I have the code/screens working, Jest is causing me issues after adding in the library by following the v4 docs.

I installed react-navigation, react-native-reanimated, react-native-gesture-handler, and react-native-screens@^1.0.0-alpha.23. I then went into the ios folder and ran pod install. Because I am on v0.61 of React Native, they should have been autolinked.

When I run the default Jest test, I get an error like:

  ✓ renders correctly (106ms)

  console.warn node_modules/react-native/Libraries/Animated/src/NativeAnimatedHelper.js:270
    Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

I searched for this error, and most of the suggested answers were to put this in my test file:

jest.mock('NativeAnimatedHelper');

However, when I tried doing so, Jest complaing with an error like so:

 FAIL  __tests__/App-test.tsx
  ● Test suite failed to run

    Cannot find module 'NativeAnimatedHelper' from 'App-test.tsx'

       6 | import renderer from 'react-test-renderer'
       7 |
    >  8 | jest.mock('NativeAnimatedHelper')
         | ^
       9 |
      10 | it('renders correctly', () => {
      11 |   renderer.create(<App />)

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (__tests__/App-test.tsx:8:1)

I've been trying various things for awhile now, any help/suggestions would be appreciated!

Versions:

Node: 10.16.1
npm: 6.11.3
"react": "^16.9.0",
"react-native": "0.61.1",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.3.0",
"react-native-screens": "^1.0.0-alpha.23",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.3",

"babel-jest": "^24.1.0"
"jest": "^24.1.0"
"react-test-renderer": "^16.9.0"

Jest config:

{
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-navigation|@react-navigation/.*))"
    ]
  }
}
react-navigation react-native jestjs
5 Answers

Current way of fixing this issue

Updated May 18, 2021

It looks like the location of NativeAnimatedHelper has moved in a more recent version of React Native.

Change

jest.mock('NativeAnimatedHelper');

To

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

Previous way of fixing this issue

Change

jest.mock('NativeAnimatedHelper');

To

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

user_21901880

With RN 64, it should be jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

user_26907740

React Native v0.64.0

The src folder was removed from Animated

You need to remove src from the mock path:

Before:
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

After:
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
user_71015950

Though the accepted answer seems to be working for people and is one of the recommended approaches, it didn't work for me. Plus it is not ideal, as the path could change in the next version.

I was able to properly mock all individual react-native modules following the implementation mentioned in this blog post.

Practically, I had to mock the react-native interface by adding a react-native.js file inside test/__mocks and export the mocked module as:

import * as ReactNative from "react-native";

export const Image = "NativeAnimatedHelper";


export default Object.setPrototypeOf(
  {
    NativeAnimatedHelper
  },
  ReactNative
);

You can add as many exports as needed in your tests.

user_20759020

I didn't want to do it every time I used NativeAnimatedHelper so instead I have added the mock to jestSetup.js file. 

// test/jestSetup.js
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

and this file should be included from jest.config.js file

module.exports = {
  setupFiles: [
    '<rootDir>/tests/jestSetup.js',
  ],
};
user_19970880
Related