jest will fail with react-native-reanimated

Description

I created a react-native-library with react-native-reanimated. Now I’m trying to add tests to my project, but all the tests fail. It complains that Jest encountered an unexpected token. the full error report is below:

    ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/damon/Documents/thundersdata/frontend/rn-template/node_modules/react-native-reanimated/mock.js:71
          return <Component {...this.props} />;
                 ^

    SyntaxError: Unexpected token '<'

      2 | jest.mock('react-native-reanimated', () => {
      3 |   // eslint-disable-next-line @typescript-eslint/no-var-requires
    > 4 |   const Reanimated = require('react-native-reanimated/mock');
        |                      ^
      5 | 
      6 |   // The mock for `call` immediately calls the callback which is incorrect
      7 |   // So we override it with a no-op

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at jest/setup.js:4:22
      at Object.<anonymous> (node_modules/@td-design/react-native/src/accordion/Panel.tsx:3:1)

Screenshots

steps to reproduce

Expected behavior

I should run all the tests successfully.

Actual behavior

it fails.

Snack or minimal code example

you can clone my project here: https://github.com/thundersdata-frontend/rn-template

Package versions

• React: v17.0.1
• React Native: v0.63.4
• React Native Reanimated: 1.13.2

[jakub-gonet]

This is a problem with your jest config, I managed to get your repository to work with that patch:

diff --git a/jest.config.js b/jest.config.js
index b51697d..70c5f50 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,18 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { defaults: tsjPreset } = require('ts-jest/presets');

-const jestModules = ['react-native', '@td-design/react-native'].join('|');
-
 module.exports = {
-  ...tsjPreset,
   preset: 'react-native',
-  setupFiles: ['<rootDir>/jest/setup.js'],
-  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
-  transform: {
-    ...tsjPreset.transform,
-    '\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
-  },
-  transformIgnorePatterns: [`node_modules/(?!(${jestModules})/)`],
   moduleNameMapper: {
     'test-utils': '<rootDir>/jest/test-utils.js',
     '@td-design/react-native': '<rootDir>/node_modules/@td-design/react-native/src/index.ts',
@@ -22,5 +12,6 @@ module.exports = {
       babelConfig: true,
     },
   },
-  cacheDirectory: '.jest/cache',
+  transformIgnorePatterns: [],
+  setupFiles: ['./jest/setup.js'],
 };
diff --git a/src/screens/homepage/index.tsx b/src/screens/homepage/index.tsx
index 4ac43f4..7b0152b 100644
--- a/src/screens/homepage/index.tsx
+++ b/src/screens/homepage/index.tsx
@@ -10,7 +10,6 @@ export default function Homepage() {
       <Box>
         <Text>hello, td-design</Text>
         <WhiteSpace />
-        <Text>hello, react-native</Text>
       </Box>
     </Container>
   );

This is related to Jest not transforming node_modules/.

[chj-damon]

@jakub-gonet Thank you so much! You saved my day!