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

[sammysium]

trafficstars

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: https://github.com/facebook/react-native/issues/23943#issuecomment-586554243

[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

[cs-manughian]

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'],
};

I can confirm this transform works for me!

[rickyalmeidadev]

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

Solved my problem. Thanks, @johnhaup!

[Eandalf]

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'],
};

This one solved my problem. Great thanks to @interhub.

For my case,

  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.spec.json', // as specified by ts-jest
      babelConfig: true,
    },
  },
  // ...
  transformIgnorePatterns: [],

does the trick.

Even if I put "/node_modules/(?!(@react-native|react-native)/).*/" in transformIgnorePatterns, I still got type ErrorHandler ... SyntaxError: Unexpected identifier. After digging in react-native's jest-preset.js (source code), the line ("/node_modules/(?!(@react-native|react-native)/).*/") was already there. There must be something else going wrong. Then, I saw @interhub 's line babelConfig: true. Suddenly, I remembered some stuff written by react-native contributors, they stated that they used Babel to transpile Typescript instead of compiling Typescript code using tsc. Then, if we could build the app, but the tests failed, how about letting Babel to take care of the mess? (No offense, I am more used to Typescript than Flow.) Then, it works. After using this approach, aside from solving the type in .js problem with jest, no need to repeat the path alias set in babel.config.js in jest.config.js - moduleNameMapper again, those non-relative path imports will be taken care by Babel (I am using babel-plugin-module-resolver).

I am using [email protected], jest@^26.6.3, ts-jest@^26.5.6. The following is my jest.config.js.

// jest.config.js
module.exports = {
  preset: 'react-native',
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.spec.json',
      babelConfig: true,
    },
  },
  moduleFileExtensions: [
    'ts',
    'tsx',
    'js',
    'jsx',
    'json',
    'node',
  ],
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  // This line should be kept even with nothing to be ignored, otherwise the transform will not take place.
  // Not quite sure about the reason.
  transformIgnorePatterns: [],
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  testPathIgnorePatterns: [
    '<rootDir>/node_modules/',
    '\\.snap$',
  ],
  cacheDirectory: '.jest/cache',
};

For tsconfig.spec.json, please refer to Using with React Native | ts-jest.

[nwalters512]

Other folks in this discussion have mentioned TypeScript as the culprit, but these are actually Flow types. It seems like react-native is now shipping untranspiled Flow code for some reason. To work around this, I installed @babel/plugin-transform-flow-strip-types and added it to my Babel config. Combined with the default transformIgnorePatterns value from the React Native Jest preset, my tests are now able to run again.

I would encourage the maintainers to ship code that does not use untranspiled Flow, as that breaks the assumptions a lot of JavaScript tooling makes.

[AlexJWayne]

I'm having a hell of time with this.

When I get what should be the right transformIgnorePatterns the error changes to this:

SyntaxError: /path/to/my-mono-repo/apps/mobile-v2/node_modules/react-native/Libraries/polyfills/error-guard.js: Unexpected token (45:12)

      43 |         _globalHandler && _globalHandler(error, true);
      44 |     }
    > 45 | } < mixed > , TOut;
         |             ^
      46 |  > (fun);
      47 | Fn < TArgs, TOut > ,
      48 |     context ?  :  ? mixed : ,

      at Parser._raise (../../node_modules/@babel/parser/lib/index.js:788:17)
      at Parser.raiseWithData (../../node_modules/@babel/parser/lib/index.js:781:17)
      at Parser.raise (../../node_modules/@babel/parser/lib/index.js:742:17)
      at Parser.unexpected (../../node_modules/@babel/parser/lib/index.js:9929:16)
      at Parser.parseExprAtom (../../node_modules/@babel/parser/lib/index.js:11349:20)
      at Parser.parseExprSubscripts (../../node_modules/@babel/parser/lib/index.js:10914:23)
      at Parser.parseUpdate (../../node_modules/@babel/parser/lib/index.js:10894:21)
      at Parser.parseMaybeUnary (../../node_modules/@babel/parser/lib/index.js:10872:23)
      at Parser.parseExprOpBaseRightExpr (../../node_modules/@babel/parser/lib/index.js:10819:34)
      at Parser.parseExprOpRightExpr (../../node_modules/@babel/parser/lib/index.js:10812:21)

I've added "plugins": ["@babel/plugin-transform-flow-strip-types"] to my babel.config.js also seems to have no effect.

Related issue with a repository that I can't make work here: https://github.com/JacopoPatroclo/nx-react-native-expo/issues/21

[MrAdex77]

Same error by me and i just created new project with typescript and cant run even initial test...

    E:\Studia\ReactNative\ComparePrices\node_modules\react-native\Libraries\vendor\core\ErrorUtils.js:11
    import type {ErrorUtilsT} from '@react-native/polyfills/error-guard';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (node_modules/react-native/jest/setup.js:37:3)

My config: Babel.config.js

// eslint-disable-next-line no-undef
module.exports = {
  presets: ["module:metro-react-native-babel-preset", "@babel/preset-typescript"],
  plugins: [
    "module:react-native-dotenv",
    "@babel/plugin-proposal-export-namespace-from",
    [
      "module-resolver",
      {
        root: ["./"],
        alias: { "^~(.+)": "./src/\\1" },
        extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
      },
    ],
  ],
};

jest.config.ts

export default {
  clearMocks: true,

  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.spec.json", // as specified by ts-jest
      babelConfig: true,
    },
  },

  moduleFileExtensions: ["js", "jsx", "ts", "tsx", "json", "node"],

  moduleNameMapper: {
    "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
  },

  preset: "react-native",

  testEnvironment: "jsdom",

  transform: {
    "^.+\\.jsx$": "babel-jest",
    "^.+\\.tsx?$": "ts-jest",
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
  },

  transformIgnorePatterns: ["node_modules/(?!(@react-native)/)"],

  verbose: true,
};

[huanguolin]

Same error ` C:\SourceCode\leyserkids-kp-rn\node_modules\react-native-config\index.js:6 import { NativeModules } from 'react-native'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

  1 | // eslint-disable-next-line no-restricted-imports
> 2 | import Config from 'react-native-config';
    | ^
  3 |
  4 | export enum Env {
  5 |     dev = 'dev',

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
  at Object.<anonymous> (config/config.ts:2:1)

`

[huanguolin]

I fixed it by add this: "transformIgnorePatterns": [ "/node_modules/(?!(@react-native|react-native)).*/" ]

[MortezaHeydari97]

presets: ['module:metro-react-native-babel-preset'],

It's working for me. Because I was moved metro config (presets: ['module:metro-react-native-babel-preset']) to .babelrc and it was not working. Now I created an babel.config.js and put that into it and test working correctly.

[mavine4512]

what I have done to solve the issue, jest I was using .babelrc so I have changed it to babel.config.js and it worked for me ;

babel.config.js module.exports = { env: { production: { plugins: [ [ 'transform-remove-console', { exclude: [...], }, ], ], }, }, presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'module-resolver', { root: ['./'], extensions: [ '.ios.ts', '.android.ts', '.ts', '.ios.tsx', '.android.tsx', '.jsx', '.js', '.json', ],

  },
],

], };

[shaunsaker]

I ran into the original issue using react-native:0.64.1, jest:27.5.1 and ts-jest:27.1.4. Based on a combination of the answers above, I fixed the issue and trimmed my jest.config.js down to the minimum. This is what it looks like:

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/jest/setup.js'],
  globals: {
    'ts-jest': {
      babelConfig: true,
    },
  }, // this was important
  moduleNameMapper: {
    '.+\\.(png)$': 'jest-transform-stub',
    '\\.(svg)$': '<rootDir>/jest/svgMock.js',
  },
  transformIgnorePatterns: [], // so was this 
};

[abhayanand11]

I could finally solve it after hours. Thanks to above directions given as well. Please find the collated steps in the below thread: https://stackoverflow.com/a/72334176/5561358

[daviseares]

I have the same issue here. react-native v0.66.1

Anything of the solutions above work for me.

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

    SyntaxError: Unexpected identifier

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

[YaroslavRenhevych]

All of this solutions do not work for me

[rafaelmaeuer]

I could finally solve it after hours. Thanks to above directions given as well. Please find the collated steps in the below thread: https://stackoverflow.com/a/72334176/5561358

For me changing back .babelrc file to babel.config.js solved it for me https://stackoverflow.com/a/72431614#72431614

[eightyfive]

Thanks @Eandalf, babelConfig: true + empty transformIgnorePatterns does the trick.

  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.spec.json', // as specified by ts-jest
      babelConfig: true,
    },
  },
  // ...
  transformIgnorePatterns: [],