How can I stop my React Native tests bombing out on Flow types in Node Modules?

Question

I am trying to set up testing on an existing React Native project. When I run a test with Jest, the test bombs out with the following error:

Test suite failed to run

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

    SyntaxError: Unexpected identifier
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (node_modules/react-native/jest/setup.js:16:6)

The unexpected identifier is the following:

 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow strict
 * @polyfill
 */

let _inGuard = 0;

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

I surmised the issue is related to the separation of the React and Flow presets.

The code in node_modules, has Flowtype syntax in it. My Babel configuration applies to my own code, but not to files in node_modules.

My babel.config.js:

  presets: ['module:metro-react-native-babel-preset', "@babel/preset-flow", "@babel/plugin-transform-flow-strip-types"],
};

My Jest package.json:

"jest": {
    "verbose": true,
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|@tableflip/react-native-navbar)",
      "/node_modules/(?!@babel/runtime)",
      "node_modules/(?!(react-native|__app__|react-native-button)/)",
      "/node_modules/(?!react-native)/.+"

    ],
    "setupFilesAfterEnv": [
      "<rootDir>/node_modules/riteway-jest/src/riteway-jest.js"
    ]
  },

How can I stop my tests bombing out on Flow types in Node Modules?

EDIT: Full package.JSON

{
  "name": "ReactNativeTest",

  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "start:ios": "react-native run-ios && react-native log-ios",
    "start:android": "react-native run-android && react-native log-android",
    "start:ios:debug": "react-native run-ios --simulator=\"iPhone X\" & open \"rndebugger://set-debugger-loc?host=localhost&port=8081\"",
    "start:android:debug": "react-native run-android & open \"rndebugger://set-debugger-loc?host=localhost&port=8081\"",
    "start:debug": "open \"rndebugger://set-debugger-loc?host=localhost&port=8081\"",
    "lint": "standard",
    "test": "jest"
  },
  "dependencies": {
    "@babel/preset-env": "^7.8.4",
    "@babel/runtime": "7.0.0-beta.55",
    "@expo/react-native-action-sheet": "3.4.0",
    "@react-native-community/async-storage": "1.6.3",
    "@react-native-community/netinfo": "4.6.1",
    "@react-native-community/viewpager": "3.3.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-preset-react-app": "^7.0.0",
    "ejson": "2.2.0",
    "lodash-es": "4.17.15",
    "lodash.isstring": "4.0.1",
    "markdown-it": "10.0.0",
    "meteor-standalone-random": "1.0.67",
    "moment": "2.24.0",
    "prop-types": "15.7.2",
    "react": "16.12.0",
    "react-native": "0.61.5",
    "react-native-calendar-events": "1.7.3",
    "react-native-config": "0.11.7",
    "react-native-dismiss-keyboard": "1.0.0",
    "react-native-firebase": "5.6.0",
    "react-native-hyperlink": "0.0.16",
    "react-native-image-picker": "1.1.0",
    "react-native-iphone-x-helper": "1.2.1",
    "react-native-joi": "0.0.5",
    "react-native-keyboard-aware-scroll-view": "0.9.1",
    "react-native-keyboard-spacer": "0.4.1",
    "react-native-maps": "0.26.1",
    "react-native-onesignal": "3.5.0",
    "react-native-scrollable-tab-view": "1.0.0",
    "react-native-select-multiple": "2.1.0",
    "react-native-side-menu": "1.1.3",
    "react-native-swiper": "1.5.14",
    "react-native-thumbnail-video": "0.1.2",
    "react-native-touch-id": "4.4.1",
    "react-native-uploadcare-image": "2.0.0",
    "react-native-video": "5.0.2",
    "react-native-webview": "7.5.2",
    "react-redux": "7.1.3",
    "reduce-reducers": "1.0.4",
    "redux": "4.0.4",
    "redux-devtools-extension": "2.13.8",
    "redux-localstorage": "github:tableflip/redux-localstorage#fix-buffer-main-src",
    "redux-localstorage-filter": "0.1.1",
    "redux-thunk": "2.3.0",
    "url": "0.11.0",
    "uuid": "3.3.3"
  },
  "jest": {
    "verbose": true,
    "preset": "react-native",
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!@babel/runtime)",
      "<rootDir>node_modules/(?!(react-native|__app__|react-native-button)/)",
      "/node_modules/(?!react-native)/.+",
      "/node_modules/"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/riteway-jest.js"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/plugin-transform-flow-strip-types": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-flow": "^7.8.3",
    "babel-eslint": "10.0.3",
    "babel-jest": "^24.9.0",
    "babel-plugin-import-rename": "1.0.1",
    "jest": "24.9.0",
    "jetifier": "1.6.4",
    "metro-react-native-babel-preset": "0.57.0",
    "react-native-config-node": "0.0.2",
    "react-test-renderer": "16.12.0",
    "redux-mock-store": "1.5.3",
    "riteway-jest": "^2.0.2",
    "standard": "14.3.1"
  },
  "standard": {
    "parser": "babel-eslint",
    "globals": [
      "fetch",
      "FormData",
      "it",
      "expect"
    ]
  },
  "transform": {
    "^.+\\.[t|j]sx?$": "babel-jest"
  }
}

Incommodity

check if babel-jest is installed. up to package.json looks like it is not. – Outleap

babel-jest is installed, I have added dev dependencies – Incommodity

also try adding it into transform section in package.json – Outleap

I have also added it to transform section and I am still getting the same error. – Incommodity

sorry, I've run out of ideas :( – Outleap

Did u find the solution for this – Stoddart

i also have the same issue – Sucker

@NabeelK No not yet - what have you tried? – Incommodity

What have you tried @zia? – Incommodity

this is my error : node_modules\react-native\Libraries\polyfills\error-guard.js:14 type ErrorHandler = (error: mixed, isFatal: boolean) => void; ^^^^^^^^^^^^ when i am trying to call npm test my ignore config is : "transformIgnorePatterns": [ "node_modules" ] and my test is default react-native test inside App-test.js file @Sandbagger – Sucker

I am also facing the same issue. If anyone has a solution please do let me know. – Centum

Anyone managed to solve this? – Coign

Doesn't work for me with the following ignores (some duplicates): "node_modules/(?!(@react-native|react-native)/)", "node_modules/(?!(@|jest-)?react-native|@?react-navigation)", "node_modules/(?!(@react-native)/)", "node_modules/(?!(@react-navigation)/)" I have the exact same issue, however – Rooney

Answer 1

In my case, I needed to add @react-native with '@' into transformIgnorePatterns as shown bellow:

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

Liquidation

I needed an extra ? in the regex to allow for modules with/without the @. Specifically I used: node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation) – Agrestic

This is what I did. Correct me if i did wrong. I added @react-native| before jest in parentheses. "node_modules/(?!(@react-native|jest-)?@react-native|react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)" – Khartoum

Answer 2

First, we need to understand what is the root cause.

SyntaxError: Unexpected identifier

Basically, these types of errors occurred due to your jest configuration. If you are instructed to transform all the libraries inside the node_modules it will raise these types of erros. So please go ahead and check for the below statement in your package.json jest configuration.

transformIgnorePatterns

Above is using to add some transformation ignore patterns and it will have the this default regex pattern => ["/node_modules/", "\\.pnp\\.[^\\\/]+$"]

Below is from the official jest documentation:

Sometimes it happens (especially in React Native or TypeScript projects) that 3rd party modules are published as untranspiled. Since all files inside node_modules are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors. To overcome this, you may use transformIgnorePatterns to allow transpiling such modules. You'll find a good example of this use case in React Native Guide.

So try adding below as instructed by @Pavot in one of the answers will help fix. But if it's a similar issue that occurred by a different library, you can try adding it to the transform ignore list and see whether it works or not.

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

Knorr

Answer 3

There is issue with transformIgnorePatterns in package.json. Instead of adding number of items in this, just follow this pattern to add modules to blacklist.

"transformIgnorePatterns": [
      "node_modules/(?!MODULE_NAME_1|MODULE_NAME_2)/"
    ], 

As from your error, we need to add react-native to transformIgnorePatterns. Actually, we need to add all those modules in blacklist that throws error because mostly modules are not written completely in JS.

Finally in my case the jest in package.json is

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native-payfort-sdk|react-native)/"
    ],
    "globals": {
      "__DEV__": true
    },
    "testEnvironment": "node"
  }

This worked for me and hopefully this will help you as well.

Deserving

This does not fix the error with React Native 0.63, and the jest "react-native" preset already includes react-native. – Eventful

Answer 4

Babel might need an according preset. If you are outside Expo, npm install --save-dev metro-react-native-babel-preset and insert this to your babel.config.js:

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

Josphinejoss

Just tested this add unit test for my react-native-web module for native and I was not able to run jest with the same error – Cheka