Unexpected Import Token - React Native with Jest Testing

Question

I get a strange import error when I try to test my responsive application with a joke. I have babel-jest, babel-preset-react-native, jest, jest-react-native and response-test-render, all of them are installed, but get this error message when I run the npm test.

● Failed to start test case

/Users/maftalion/www/stars20/kiosk/node_modules/native-base/index.js:4 import Drawer from './Components/vendor/react-native-drawer'; ^^^^^^ **SyntaxError: Unexpected token import** at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10) at Object.<anonymous> (src/routes/Identification.js:3:17) at Object.<anonymous> (src/routes/router.js:4:21) 

Test Suites: 1 failed, 1 passed, total 2 Tests: 1 passed, total 1 Pictures: 1 passed, total 1 Time: 1.011s

Answer 1

It turned out, basically throw away any node modules that use es6 syntax in transformIgnorePatterns.

"transformIgnorePatterns": ["node_modules / (?! respond native | native base | react clone element-link)"],

Answer 2

Try adding transformIgnorePatterns to your package.json:

 { "name": "MyAwesomeApp", ... "jest": { "transformIgnorePatterns": ["/node_modules/"] } } 

For me, Jest works out of the box, however:

 $ react-native init MyAwesomeApp $ cd MyAwesomeApp $ npm test ... Tests: 2 passed 

I am using React Native v0.37.0.

Answer 3

I found the answers given earlier, did not resolve Unexpected token import errors in the tests themselves, if they are written in ES6 (for example, the template tests created by the Run CLI after ignite new MyProject ).

I managed to remove ES6 related errors by adding a task to package.json to test :

 "test": "NODE_ENV=test jest --no-cache" 

I use RN 0.45.1 , Node 7.10.1 (and 8.1.2 ), Yarn 0.24.6 and Jest 20.0.4

PS: You do not always see this in the console, but in VS Code v1.13.1 --no-cache setting makes a difference.

Answer 4

You have configured Babel in the configuration of your web package, and this will only apply to the web package. When other tools, such as Jest, use Babel, they will not see this configuration because they do not look at the webpack configuration. You can use the .babelrc file to configure Babel, and this will apply to everything that runs Babel (not just the web package).

Using. babelrc is usually preferable since you want to have a common babel configuration, and if you need to override the setting, you can still do it in a specific application, as in the webpack configuration.

Create the following .babelrc:

 { "presets": ["es2015", "react"] } 

With this, you can remove the presets option in the configuration of your web package because it will use .babelrc. Note that the [cacheDirectory] [3] option is specific to babel-loader and is not used to configure the underlying Babel.

You also have a typo in the test, toMatchSnapShot () should be toMatchSnapshot ().

 expect(rendered.toJSON()).toMatchSnapshot(); 

Answer 5

I needed to add .babelrc with:

 { "presets": ["@babel/env","@babel/react"] } 

I also needed to install this module. npm install add --dev react-test-renderer