jest fails with @react-native/polyfills/error-guard.js after upgrade to RN 0.64.0 and react 17.0.1

[sammysium]

Environment

System:
OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 1.29 GB / 15.52 GB
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.9 - ~/.nvm/versions/node/v14.5.0/bin/npm
Watchman: 20200920.192359.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 19, 24, 25, 27, 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0
System Images: android-22 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 11.0.10 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.0 => 0.64.0
npmGlobalPackages:
react-native: Not Found

Things I’ve done to figure out my issue

did react-native upgrade which upgraded the appplication

Upgrading version

react-native 0.64.0
react 17.0.1

Description

After the upgrade, I did yarn test but all tests fail with error:

/node_modules/@react-native/polyfills/error-guard.js:14
    type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         ^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

[kumarparth380]

Add @react-native to your transformIgnorePatterns like this to your jest.config.js :

transformIgnorePatterns: [
    "/node_modules/(?!(@react-native|react-native)/).*/"
  ]

Also add the preset something like this in jest.config.js:

preset: "react-native",
setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"]

Check out for the libraries and update them accordingly to meet latest react version.

[tbeech]

Same issue here, but I get this failure when using typescript.

[devfsmalik]

/app/node_modules/@react-native/polyfills/error-guard.js:14
    type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         ^^^^^^^^^^^^
facing same issue: 

    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)

[cinemanja]

Any updates on this? Still facing the same issue.

[nadav2051]

Same here, with RN 0.63.3

[wwwmaster]

Try to create babel.config.js with next content

module.exports = { presets: ['module:metro-react-native-babel-preset'], };

[kopax-polyconseil]

Same here after upgrading ts-jest, jest, and react-native to latest.

[rholliger]

Adding the @react-native to the transformIgnorePatterns in the jest config solved it for me

transformIgnorePatterns: [
    "/node_modules/(?!(@react-native|react-native)/).*/"
]

[dorthwein]

@rholliger adding that ignore causes a Cannot find module './Libraries/Utilities/warnOnce' error :(

[pastean]

doesn't work for me either, tried different patterns similar to the one posted by @rholliger . Still debugging, will keep you updated if I find something

[rholliger]

@rholliger adding that ignore causes a Cannot find module './Libraries/Utilities/warnOnce' error :(

Have you tried this already: facebook/react-native#23943 (comment)

[interhub]

I found out the solve ✅
You should remove react-native from transformIgnorePatterns regexp array !

transformIgnorePatterns: [
    '<rootDir>/node_modules/(react-clone-referenced-element|@react-native-community|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|react-native-code-push)',
  ],

as Problem was in type define into js file which dont transforming because we was disable it. React native 64 developers add type ErrorHandler and we need it transform with ts-loader

my self jest.config.js file in root (example)

const {defaults: tsjPreset} = require('ts-jest/presets');

module.exports = {
  ...tsjPreset,
  preset: 'react-native',
  globals: {
    'ts-jest': {
      babelConfig: true,
    },
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '\\.svg': '<rootDir>/__mocks__/svgMock.js',
    'react-native-code-push': '<rootDir>/__mocks__/react-native-code-push.js',
    '@react-navigation': '<rootDir>/__mocks__/@react-navigation.js',
  },
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(react-clone-referenced-element|@react-native-community|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|react-native-code-push)',
  ],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '\\.snap$'],
  cacheDirectory: '.jest/cache',
  testEnvironment: 'jsdom',
  setupFiles: ['<rootDir>/__mocks__/mock-setup.js'],
};

[nikhilk1993]

any update on this? still test cases breaking on RN version 0.64.2

[johnhaup]

Try renaming your Babel config from .babelrc to babel.config.js