60

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

"jest": {
    "automock": false,
    "browser": true,
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.jsx?$": "./node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileTransformer.js"
    },
    "testEnvironment": "jsdom",
    "testPathDirs": [
      "./app/tests"
    ],
    "testRegex": ".*.test.js",
    "verbose": true
  }

And the .babelrc file located in my root folder:

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

According to the documentation found at the jest getting started page this is everything I need for babel to work it's magic.

Regardless, this test:

import React from 'react';
import {shallow} from 'enzyme';
import Landing from '../components/Landing.component';

describe('<Landing/>', () => {
  it('should render a header to the page', () => {
    const landing = shallow(<Landing/>);
    expect(landing.find('h1').text()).toBe('This is the Landing component');
  });
});

returns:

FAIL  app/tests/Landing.component.test.js   
 ● Test suite failed to run

   /Users/shooshte/PersonalProjects/surviveJS/app/tests/Landing.component.test.js:1
   ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                            ^^^^^^
   SyntaxError: Unexpected token import

     at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)

What am I doing wrong?

urig
  • 16,016
  • 26
  • 115
  • 184
Miha Šušteršič
  • 9,742
  • 25
  • 92
  • 163

6 Answers6

42

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"]
    }
  }
}
Miha Šušteršič
  • 9,742
  • 25
  • 92
  • 163
7

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.

Car4p17
  • 45
  • 1
  • 6
Fernando Cea
  • 267
  • 5
  • 5
5

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.

Car4p17
  • 45
  • 1
  • 6
Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
  • As said in the Jest doc, you need to have it turned on for Jest. You can turn it on in test env only. Check Jest "getting started" (can't paste code here). – adriendenat Apr 09 '18 at 23:16
5

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

sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50
3

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

Go to your app directory, yarn add babel-jest

Good luck!

Pengfei Chen
  • 31
  • 1
0

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",
 ...
Roman
  • 19,236
  • 15
  • 93
  • 97