Jest failed after upgrade to react-native 0.64

[McSam94]

Describe the bug

Recently I upgraded my project to 0.64 version and faced this issue when I run jest. The same error happened even after I tried with a fresh react-native project with package react-navigation.

type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         ^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (node_modules/react-native/jest/setup.js:439:6)

Expected behavior

Jest should be completed without error.

Steps to Reproduce

1. react-native init
2. install all the react-navigation packages
3. set up the testing environment as documented. (https://callstack.github.io/react-native-testing-library/docs/react-navigation#setting-up-the-test-environment)
4. run jest

Screenshots

Versions

Please help. Thanks in advance 🙏🏿

[thymikee]

Check the path to the file that has unsupported syntax (type keyword), it's the most important one. It points to a file located inside node_modues/@react-native/. So, you'll need to add @react-native next to @react-navigation in the transformIgnorePatterns config.

Would you like to contribute a fix to the docs? :)

transformIgnorePatterns: [
-  'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
+  'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)',
]

[McSam94]

Hi, @thymikee thanks for the help. Unfortunately, I ran into another error mocking react-native/Libraries/Animated/src/NativeAnimatedHelper after I updated the patterns.

[thymikee]

Check if react-native/Libraries/Animated/src/NativeAnimatedHelper is actually there. It's an internal file, so it may have been moved somewhere else

[McSam94]

ahh okay, replaced with jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); works 👍🏿

[thymikee]

How about that PR you'd like to send to our docs? :)

[McSam94]

Sure bro. I'll create a PR shortly

[daviseares]

Check the path to the file that has unsupported syntax (type keyword), it's the most important one. It points to a file located inside node_modues/@react-native/. So, you'll need to add @react-native next to @react-navigation in the transformIgnorePatterns config.

Would you like to contribute a fix to the docs? :)

transformIgnorePatterns: [
-  'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
+  'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)',
]

This doesnt work for me. I change my transformIgnorePatterns' but i cant solution this issue

jest.config.js

module.exports = {
  preset: '@testing-library/react-native',
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)',
    'node_modules/(?!(@react-native|react-native)/)',
    // 'node_modules/(?!react-native|@react-native|@react-navigation/.*|@react-native-async-storage|react-native-gesture-handler/.*)',
    'node_modules/(?!(react-native-cookies|@sentry/react-native)/)',
  ],
  setupFiles: [
    './node_modules/react-native-gesture-handler/jestSetup.js',
    '<rootDir>/jest.setup.js',
  ],
  moduleNameMapper: {
    '\\.svg': '<rootDir>/__mocks__/svgMock.js',
  },
  collectCoverage: false,
  coverageDirectory: '__coverage__',
  coveragePathIgnorePatterns: ['/node_modules/', '.*.svg', '.*.png'],
}

[YaroslavRenhevych]

I have the same problem. Your fix does not work for me.

[Jaserto]

any solution?

[mdjastrzebski]

@Jaserto, @YaroslavRenhevych please refer out the recommended RNTL setup in our examples/basic. If the problem persists then please create a separate issue with repro repository, preferably based on the examples/basic.