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": {       "\\.(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?

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

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.