[React-Native][Jest]SyntaxError: Unexpected token import

Question

It seems babel transform works in my testcase code, but es6 syntax in node_modules does not.

Error

environment

npm 4.5

MacOS Sierra

jest config

{
  "preset": "react-native",
  "globals": {
    "__DEV__": true
  },
  "transform": {
    "^.+\\.js$": "babel-jest"
  }
}

babelrc

{
  "env": {
    "test": {
      "presets": ["react-native"],
      "plugins": [["import", { "libraryName": "antd-mobile" }]]
    },
    "development": {
      "presets": ["react-native"],
      "plugins": [["import", { "libraryName": "antd-mobile" }]]
    },
    "production": {
    }
  }
}

testcase

import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import Index from '../index.ios.js';

it('renders correctly', () => {
  const tree = renderer.create(
    <Index />
  );
});

package.json

{
  "private": true,
  "scripts": {
    "web": "roadhog server",
    "build-web": "cross-env NODE_ENV=production roadhog build",
    "start": "react-native start",
    "ios": "cross-env NODE_ENV=development node themes/theme.rn.config.js && react-native run-ios",
    "android": "cross-env NODE_ENV=development node theme/theme.rn.config.js && react-native run-android",
    "lint": "eslint --ext .js src test",
    "precommit": "npm run lint",
    "test": "cross-env NODE_ENV=test jest --config .jest.config.json --no-cache"
  },
  "engines": {
    "install-node": "6.9.2"
  },
  "theme": "./themes/theme.web.config.js",
  "dependencies": {
    "antd-mobile": "^1.0.8",
    "babel-runtime": "^6.9.2",
    "dva": "^1.2.1",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "rc-form": "^1.3.0",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-native": "0.42.3",
    "react-native-chart": "^1.0.8-beta",
    "react-native-gesture-password": "^0.2.0",
    "react-native-scrollable-tab-view": "^0.7.4",
    "react-native-smart-gesture-password": "^2.1.0",
    "react-navigation": "^1.0.0-beta.7",
    "recharts": "^0.21.2",
    "socket.io-client": "^1.7.3"
  },
  "devDependencies": {
    "babel-eslint": "^7.1.1",
    "babel-jest": "^19.0.0",
    "babel-plugin-dva-hmr": "^0.3.2",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-react-native": "^1.9.1",
    "cross-env": "^4.0.0",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "expect": "^1.20.2",
    "husky": "^0.13.3",
    "jest": "^19.0.2",
    "less-vars-to-js": "^1.1.2",
    "postcss-pxtorem": "^4.0.0",
    "react-test-renderer": "15.4.2",
    "redbox-react": "^1.3.2",
    "roadhog": "^0.6.0-beta1"
  }
}

debug message

jest version = 19.0.2
test framework = jasmine2
config = {
  "automock": false,
  "bail": false,
  "browser": false,
  "cacheDirectory": "/var/folders/h3/bfmnzb_j3zg3pdffgps1w3vh0000gn/T/jest",
  "clearMocks": false,
  "coveragePathIgnorePatterns": [
    "/node_modules/"
  ],
  "coverageReporters": [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  "expand": false,
  "globals": {
    "__DEV__": true
  },
  "haste": {
    "defaultPlatform": "ios",
    "platforms": [
      "android",
      "ios",
      "native"
    ],
    "providesModuleNodeModules": [
      "react-native"
    ]
  },
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleFileExtensions": [
    "js",
    "json",
    "jsx",
    "node"
  ],
  "moduleNameMapper": [
    [
      "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$",
      "RelativeImageStub"
    ],
    [
      "^React$",
      "/Users/erickim/Documents/Develop/react/glfm/node_modules/react"
    ]
  ],
  "modulePathIgnorePatterns": [
    "/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/Libraries/react-native/",
    "/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/packager/"
  ],
  "noStackTrace": false,
  "notify": false,
  "preset": "react-native",
  "resetMocks": false,
  "resetModules": false,
  "roots": [
    "/Users/erickim/Documents/Develop/react/glfm"
  ],
  "snapshotSerializers": [],
  "testEnvironment": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-environment-node/build/index.js",
  "testMatch": [
    "**/__tests__/**/*.js?(x)",
    "**/?(*.)(spec|test).js?(x)"
  ],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "testRegex": "",
  "testResultsProcessor": null,
  "testURL": "about:blank",
  "timers": "real",
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
  ],
  "useStderr": false,
  "verbose": null,
  "watch": false,
  "setupFiles": [
    "/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-polyfill/lib/index.js",
    "/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/jest/setup.js"
  ],
  "transform": [
    [
      "^.+\\.js$",
      "/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-jest/build/index.js"
    ]
  ],
  "rootDir": "/Users/erickim/Documents/Develop/react/glfm",
  "name": "005c8bf9b4d78dfa0bb0e32c0c55b0fb",
  "testRunner": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-jasmine2/build/index.js",
  "cache": false,
  "watchman": true
}

Answer 1

I figured it out. By default jest doesn't transform ES6 js code from node_modules . In my case, the package react-navigation module need to be translated. So I added transformIgnorePatterns to my jest configuration and everything worked:

{
  "preset": "react-native",
  "setupFiles": ["./test/setup.js"],
  "globals": {
    "__DEV__": true
  },
  "transform": {
    "^.+\\.js$": "babel-jest"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!react-native|react-navigation)/"
  ]
}

https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

Answer 2

The problem is that node doesn't understand ES6 modules and JEST is node process, so using import inside your test throw this error. Instead of babel we specifically tell Webpack to transcompile ES6 modules.So, we can fix this error by telling babel that when we are in testing scenario please combile ES6 modules by using below babel configuration settings

 "env": {
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}

you can download this babel plugin by npm

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

Hopefully this will fix your problem.