Unexpected import token - testing React Native wit

问题:

I'm getting a weird import error when I try to test my react-native app with jest. I have babel-jest, babel-preset-react-native, jest, jest-react-native and react-test-render all installed but get this error message when I run npm test.

● Test suite failed to run

/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, 2 total Tests: 1 passed, 1 total Snapshots: 1 passed, 1 total Time: 1.011s

回答1:

Figured it out, basically throw any node modules that use es6 syntax in transformIgnorePatterns.

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

回答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'm using React Native v0.37.0.

回答3:

I found the answers given earlier didn't solve Unexpected token import errors in the tests itself, if they are written in ES6 (like the boilerplate tests created by the Ignite CLI after ignite new MyProject).

I finally managed to remove ES6-related errors by adding to the test task in package.json:

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

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

PS: Don't always see this in the console, but in VS Code v1.13.1 setting --no-cache makes the difference.

回答4:

You configured Babel in your webpack config and this will only apply to webpack. When other tools, like Jest, use Babel, they won't see that configuration because they don't look at the webpack config. You can use a .babelrc file to configure Babel and that will apply to anything that runs Babel (not just webpack).

Using a .babelrc is usually preferred as you want to have a general babel config, and if you need to override a setting, you can still do that in the specific application like in the webpack config.

Create the following .babelrc:

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

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

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

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

回答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