Jest encountered an unexpected token when testing react-native with jest

Question

I want to use jest on my react-native project. I'm new to jest and react-native. currently getting below error

Details:

/Users/sachigrannan/SKO/Alpha4-1/node_modules/react-native-iphone-x-helper/index.js:1
import { Dimensions, Platform, StatusBar } from 'react-native';
       ^

SyntaxError: Unexpected token {

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
  at Object.<anonymous> (node_modules/react-navigation-stack/lib/commonjs/vendor/TransitionConfigs/CardStyleInterpolators.tsx:2:1)

I have set this in package.json. Please help!

"jest": {
    "verbose": true,
    "preset": "react-native",
    "cacheDirectory": "./cache",
    "coveragePathIgnorePatterns": [
      "./app/utils/vendor"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 80
      }
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|my-project|react-native-button|nodejs-mobile-react-native|react-navigation)/)"
    ]
  }

Answer 1

Given that your transformIgnorePatterns worked before introducing the lib, the trick is simply to add "react-native-iphone-x-helper" to the "transformIgnorePatterns" attribute.

"node_modules/(?!(react-native|my-project|react-native-button|nodejs-mobile-react-native|react-navigation|react-native-iphone-x-helper)/)"

That said, you may be better off just deleting "transformIgnorePatterns" and letting the "preset": "react-native" config do its job.

The only problem I've had with the preset has been when I've had an untranspiled dependency in a nested node_module directory, eg.

/path/to/myproject/node_modules/@react-navigation/bottom-tabs/node_modules/react-native-iphone-x-helper/index.js:1
    import { Dimensions, Platform, StatusBar } from 'react-native';
           ^

In this case the problem was that another module used a different version of react-native-iphone-x-helper so I had to update that dependency so they aligned. If that's not feasible you have yarn's resolutions field