jest: Test suite failed to run, SyntaxError: Unexpected token import

Question

This is my jest configuration from the package.json file:

\"jest\": {
    \"automock\": false,
    \"browser\": true,
    \"moduleNameMapper\": {
      \"\\\         


        

Answer 1

Jest sets the env variable to test, so I had to add my presets to the env setting in .babelrc:

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "presets": ["es2015", "react", "stage-0"]
    }
  }
}

Answer 2

Jest doesn't handle imports so it needs a transform plugin, and this is why I had to add the plugin:

babel-plugin-dynamic-import-node

and update my babel settings to tell jest to use this plugin to transform the code properly:

"env": {
    "test": {
      "plugins" : ["dynamic-import-node"]
    }
  }

GitHub thread

Answer 3

Each yearly preset only compiles what was ratified in that year. babel-preset-env replaces es2015, es2016, es2017, latest

Based on this, on latest configurations you must use/replace your Plugins/Preset of es2015 and any esX to the new one: env.

1. You must install babel-preset-env with npm install.
2. In your .babelrc you should update accordingly:

{
  "presets": [
    "env", 
    "stage-0", 
    "react-native"
  ],
  "plugins": ...
}

More information on Babel plugins official Documentation.

☝️ Remember the order of the plugins/preset in the array is important.

Answer 4

In my case, I had the following .babelrc config:

{
  "presets": [
    ["env", { "modules": false }],
    "react",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    "transform-class-properties",
    "react-hot-loader/babel"
  ]
}

Even though babel-env was specified I still got the error. To fix it I had to remove the "modules": false flag.

Answer 5

You need to install babel-jest. I had the same problem.

Go to your app directory, yarn add babel-jest

Good luck!

Answer 6

The following .babelrc works for me (without additions):

{
  "presets": [["env", {
    "debug": false,
    "modules": false
  }],  "es2015", "stage-0", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "syntax-dynamic-import",
    "dynamic-import-node",
    "transform-class-properties",
    "transform-decorators-legacy"
  ]
}

"devDependencies" section of package.json looks like this:

...
"devDependencies": {
  "babel-cli": "latest",
  "babel-core": "^6.26.3",
  "babel-eslint": "^8.2.3",
  "babel-jest": "^22.4.4",
  "babel-loader": "latest",
  "babel-plugin-dynamic-import-node": "^1.2.0",
  "babel-plugin-lodash": "latest",
  "babel-plugin-syntax-dynamic-import": "^6.18.0",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-decorators-legacy": "latest",
  "babel-plugin-transform-dynamic-import": "^2.0.0",
  "babel-plugin-transform-flow-strip-types": "^6.22.0",
  "babel-plugin-transform-object-rest-spread": "latest",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.7.0",
  "babel-preset-flow": "^6.23.0",
  "babel-preset-react": "^6.24.1",
  "babel-preset-react-app-babel-7": "^4.0.1",
  "babel-preset-stage-0": "^6.24.1",
 ...