"TypeError" when trying to render react-native-reanimated node in Jest test

Question

When trying to render my application in Jest to do some integration testing, I get the following error:

    TypeError: Cannot read property 'createNode' of undefined

      at AnimatedParam.createNode [as __nativeInitialize] (node_modules/react-native-reanimated/src/core/AnimatedNode.js:126:24)
      at AnimatedParam.__nativeInitialize [as __attach] (node_modules/react-native-reanimated/src/core/AnimatedNode.js:71:10)
      at new __attach (node_modules/react-native-reanimated/src/core/AnimatedParam.js:11:10)
      at createAnimatedParam (node_modules/react-native-reanimated/src/core/AnimatedParam.js:71:10)
      at createAnimatedFunction (node_modules/react-native-reanimated/src/core/AnimatedFunction.js:38:17)
      at Object.<anonymous> (node_modules/react-native-reanimated/src/derived/interpolate.js:17:39)

The code it is complaining about in react-native-reanimated looks like this:

  __nativeInitialize() {
    if (!this.__initialized) {
      ReanimatedModule.createNode(this.__nodeID, { ...this.__nodeConfig });
      this.__initialized = true;
    }
  }

And ReanimatedModule is a type alias for NativeModule from the react-native library. Beyond that, I have not found any useful information that helps solve this issue.

What is particularly strange here is that I am not directly using react-native-reanimated in my code base, and the only library components I can find that are using it are not being rendered in the components being tested, as far as I can tell.

I have not been able to slim down my code in any reasonable manner to reproduce this issue, and the code in question is protected by corporate copyrights, so I cannot share the repository. I will keep trying to reproduce the error in a small example, but I wanted to get this question out there in case anyone has any experience with this issue.

Christmastide

Answer 1

If you need to mock react-native-reanimated you don't have to do it manually as they are now providing a mock in the module itself.

Simple add this line to your jest.setup.js file :

jest.mock('react-native-reanimated', () =>
  require('react-native-reanimated/mock')
);

This has been introduced by this PR: https://github.com/software-mansion/react-native-reanimated/pull/276/files#diff-1377ba307a14fcbe31e128f4753b73301a43967a417c744f144f9ae5d77f67d5R7

Kemper

still getting this. how solve for this? /node_modules/react-native-reanimated/src/reanimated2/mock.ts:6 import { ReduceMotion, SensorType } from './commonTypes'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14) at Object.<anonymous> (node_modules/react-native-reanimated/mock.js:12:22) – Alcoholize

Answer 2

I just ran into this as well.

I wound up needing to mock out the whole reanimated module with code like this:

jest.mock('react-native-reanimated', () => {
  const View = require('react-native').View;

  return {
    Value: jest.fn(),
    event: jest.fn(),
    add: jest.fn(),
    eq: jest.fn(),
    set: jest.fn(),
    cond: jest.fn(),
    interpolate: jest.fn(),
    View: View,
    Extrapolate: { CLAMP: jest.fn() },
    Transition: {
      Together: 'Together',
      Out: 'Out',
      In: 'In',
    },
  };
});

I have this in a /spec_config/jest.js file, that is loaded (along with a few other global mocks) with the following line in my jest.config.js file: setupFilesAfterEnv: ['./spec_config/jest.js'],

Seems like a hot mess to me, but that's the way it just is in this world, I guess. (h/t this GitHub issue: https://github.com/software-mansion/react-native-reanimated/issues/205)

Wie

Answer 3

The problem is with with react-native-reanimated. Follow the procedure as in react-native-reanimated documentation. It should work fine now. If it doesn't, try fixing react-native-gesture-handler as in react-native-gesture-handler documentation.

Interspace