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?
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"]
}
}
}
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.
babel-preset-env with npm install..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.
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.