Reanimated 2.5.0 break Jest test

[wbinarytree]

Description

Run jest test with Reanimated 2.5.0. Test break with following error:

  ● Test suite failed to run

    TypeError: ReanimatedModule.installTurboModule is not a function

      at new NativeReanimated (node_modules/react-native-reanimated/lib/reanimated2/NativeReanimated/NativeReanimated.js:6:98)
      at JSReanimated._createSuperInternal (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/JSReanimated.js:32:311)
      at new JSReanimated (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/JSReanimated.js:8:9)
      at Object.<anonymous> (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/index.js:3:22)
      at Object.<anonymous> (node_modules/react-native-reanimated/lib/reanimated2/NativeReanimated/index.js:1:1)

Expected behavior

Test pass as before

Actual behavior & steps to reproduce

• Create a new RN app with 0.67.4 and Reanimated 2.5.0 and Jest.
• Write an example test.
• run yarn test then example test will fall

Snack or minimal code example

As mentioned above, an example project with jest will work

Package versions

name	version
react-native	0.67.4
react-native-reanimated	2.5.0
NodeJS
Xcode
Java
Gradle
expo

Affected platforms

• [x] Android
• [x] iOS
• [ ] Web

[wbinarytree]

I added this code to fix the error above. But seems there is another issue occurs: code :

diff --git a/node_modules/react-native-reanimated/lib/reanimated2/NativeReanimated/NativeReanimated.js b/node_modules/react-native-reanimated/lib/reanimated2/NativeReanimated/NativeReanimated.js
index 92d53ef..6b4bf86 100644
--- a/node_modules/react-native-reanimated/lib/reanimated2/NativeReanimated/NativeReanimated.js
+++ b/node_modules/react-native-reanimated/lib/reanimated2/NativeReanimated/NativeReanimated.js
@@ -1,8 +1,11 @@
 import { NativeModules } from 'react-native';
+import { isJest } from '../PlatformChecker';
+
 export class NativeReanimated {
     constructor(native = true) {
-        if (global.__reanimatedModuleProxy === undefined) {
+        if (global.__reanimatedModuleProxy === undefined && !isJest()) {
             const { ReanimatedModule } = NativeModules;
+            console.log("native module:" , ReanimatedModule)
             ReanimatedModule === null || ReanimatedModule === void 0 ? void 0 : ReanimatedModule.installTurboModule();
         }
         this.InnerNativeModule = global.__reanimatedModuleProxy;

    TypeError: Cannot read properties of undefined (reading 'now')

      at Object.now (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/JSReanimated.js:14:72)
      at JSReanimated.getTimestamp (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/JSReanimated.js:25:34)
      at Timeout._onTimeout (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/JSReanimated.js:32:37)

The reading 'now' issue resolved by this fix:

// add into jest.config
global.ReanimatedDataMock = {
  now: () => 0,
};

after comparing code 2.4.1 and 2.5.0. I think those 2 are bugs introduced by 2.5.0. Do we plan to have a fix?

[AlexanderEggers]

I fixed the issue by updating my project's jest-setup.js:

global.__reanimatedWorkletInit = () => {}
jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'))

[kylebake]

The timer for the tests was changed in 2.5.0: https://github.com/software-mansion/react-native-reanimated/compare/2.4.1...2.6.0#diff-6583c45c1e282c5126f2b737bc6176aeccc5a989c8b1875ac65f0f6fcd9229acR150 + https://github.com/software-mansion/react-native-reanimated/compare/2.4.1...2.6.0#diff-211e5f3c2ab791935d37a15a5c392e46f3958ae46fdc2d642935be9ffbdba1d7R19

Manipulating global all over the place is leading to a lot of weirdness. I had to revert the change back to use Date.now() to get my tests passing, but this breaks the timer functionality in the tests.

[enesozturk]

Having similar issues. I was using similar approach to solve "TypeError: global.__reanimatedWorkletInit is not a function" by overriding in Jest setup like this;

global.window = {};
global.window = global;

// eslint-disable-next-line no-undef
beforeAll(() => {
  // eslint-disable-next-line no-undef
  global.__reanimatedWorkletInit = jest.fn();
});

require("react-native-reanimated/lib/reanimated2/jestUtils").setUpTests();

But this time it causes following errors;

TypeError: (0 , _reactNativeReanimated.interpolate) is not a function
...
TypeError: (0 , _reactNativeReanimated.scrollTo) is not a function
..

Any idea to fix?

Versions:

{
 "react-native": "0.64.3",
 "react-native-reanimated": "2.3.3",
 "@testing-library/jest-native": "4.0.1",
 "@testing-library/react-native": "7.2.0",
 "jest": "^26.6.3",
 "jest-expo": "^44.0.1",
}

Jest preset is jest-expo.

[arvinio]

In my case I noticed that the error TypeError: global.__reanimatedWorkletInit is not a function was coming from react-native-redash. So I mocked that as well. This was all I needed:

jest.mock('react-native-redash', () => jest.fn());
// eslint-disable-next-line global-require
jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));

[Andarius]

Using jest 28 with "enableGlobally": true , the solution that @kylebake mentioned worked for me:

 global.ReanimatedDataMock = {
        now: () => Date.now()
    }

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[G9000]

Having similar issues. I was using similar approach to solve "TypeError: global.__reanimatedWorkletInit is not a function" by overriding in Jest setup like this;

global.window = {};
global.window = global;

// eslint-disable-next-line no-undef
beforeAll(() => {
  // eslint-disable-next-line no-undef
  global.__reanimatedWorkletInit = jest.fn();
});

require("react-native-reanimated/lib/reanimated2/jestUtils").setUpTests();

But this time it causes following errors;

TypeError: (0 , _reactNativeReanimated.interpolate) is not a function
...
TypeError: (0 , _reactNativeReanimated.scrollTo) is not a function
..

Any idea to fix?

Versions:

{
 "react-native": "0.64.3",
 "react-native-reanimated": "2.3.3",
 "@testing-library/jest-native": "4.0.1",
 "@testing-library/react-native": "7.2.0",
 "jest": "^26.6.3",
 "jest-expo": "^44.0.1",
}

Jest preset is jest-expo.

It's been 6 months. did you manage to solve it? If yes, let me know how. Been stuck here.

[Youssef-Durgham]

same error here

[Youssef-Durgham]

fixed by doing that expo start -c
will fix your error

[marcocaldera]

I'm facing the same issue. Anyone that managed to fix the:

TypeError: (0 , _reactNativeReanimated.interpolate) is not a function

I'm trying to test an animation and therefore use jest.unmock('react-native-reanimated'); inside my jest file

  const animatedStyles = useAnimatedStyle(() => {
    const top = interpolate(focusProgress.value, [0, 1], [10,20]);
    [...]
    return {
      top
    };
  }, [focusProgress.value]);

I see the problem appearing for the first time in [email protected] I'm investigating

[hesamr76]

I fixed the issue by updating jest-setup.js:

global.requestAnimationFrame = function (callback) {
  return setTimeout(() => callback(Date.now()), 0);
};

[Latropos]

Closing, since we no longer support this version of reanimated, please update