Jest import incorrect

[bitcrumb]

Description

The documentation mentions importing from react-native-reanimated/lib/reanimated2/jestUtils to be able to call setUpTests. However, this import can't be resolved:

Changing the import path to react-native-reanimated/src/reanimated2/jestUtils (so using src instead of lib) does seem to work, but not sure this is intended/best practice.

Steps to reproduce

1. Install react-native-reanimated 3.0.0
2. Setup jest
3. Follow instructions on https://docs.swmansion.com/react-native-reanimated/docs/guide/testing

Snack or a link to a repository

n/a

Reanimated version

3.0.0

React Native version

0.71.3

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[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?

[andreialecu]

Same issue, this worked:

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

[bitcrumb]

@andreialecu I'm doing that as well for importing the mock (and this still works).

It is my understanding however, that some extra setup needs to happen as well. That is why you need to call setUpTests as indicated in the docs.

Calling this method used to work in version 2, however since version 3 the path can't be resolved. That's what this issue is about.

[sanduluca]

Does anyone have a solution ?

Tried all of the setup below and still none of them worked

require('react-native-reanimated').setUpTests();

// ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import * as Animated from './Animated';
//                                                                                      ^^^^^^
//  SyntaxError: Cannot use import statement outside a module

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

// import { SensorType } from './commonTypes';
//    ^^^^^^
//    SyntaxError: Cannot use import statement outside a module

require('react-native-reanimated/src/reanimated2/jestUtils').setUpTests();

//    import { isJest } from './PlatformChecker';
//    ^^^^^^
//    SyntaxError: Cannot use import statement outside a module

import { setUpTests } from 'react-native-reanimated';
setUpTests();

// ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import * as Animated from './Animated';
//                                                                                      ^^^^^^
//    SyntaxError: Cannot use import statement outside a module
//    > 1 | import { setUpTests } from 'react-native-reanimated';

[fkapsahili]

I added react-native-reanimated into the transformIgnorePatterns array in my jest.config.js to resolve the Cannot use import statement outside a module error. Subsequently, I initialized the library in jest.setup.ts as follows:

require("react-native-reanimated").setUpTests();

But my tests were still not erroring, so I additionally had to add the mock in my jest setup as well and now my issues seems to be resolved:

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

[khethelogp]

Still facing this issue 😢

[eduardoborges]

Someone resolved this?

[diegoMontesinos]

@khethelogp @eduardoborges I solved it by adding react-native-reanimated to the transformIgnorePatterns:

module.exports = {
  preset: 'react-native',
  transformIgnorePatterns: [
    'node_modules/(?!(@react-native|react-native|react-native-reanimated)/)',
  ],
  setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'],
};

And create a file __mocks__/react-native-reanimated.js with:

const Reanimated = require('react-native-reanimated/src/mock');
const Animated = Reanimated.default;

module.exports = {
  ...Reanimated,

  default: {
    ...Animated,
  },
};

[ava-m-c]

Current documentation of Reanimated mentions

require('react-native-reanimated').setUpTests();

which seems to work.

https://docs.swmansion.com/react-native-reanimated/docs/guides/testing/

[MichalSmaliraITM]

Still occurs in 3.15.0

Edit: it works with EMPTY transformIgnorePatterns array.(?) As long as its present tests are passing with setup function called, without mocking the library