[React]Jest SyntaxError: Unexpected token import

Question

I've been really struggling and i cannot figure out how to make this work. There seems to be tons of questions on this subject and i tried every one of them and i still seem to be having a problem running jest. import just does not seem to work at all. So please can anyone assist me in solving this problem.

Error

C:\Users\admin\Documents\my-app\_tests_\main.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
  at process._tickCallback (internal/process/next_tick.js:109:7)

main.spec.js

import React from 'react';
import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { Home } from '../src/Home';

test('Basic Test', () => {
  expect(2 + 2).toBe(4);
});

Running this will create the error, but if i comment out the import line it works.

bablerc

{
    "plugins": [
            "transform-async-functions",
            "transform-object-rest-spread",
            "transform-regenerator"
          ],
     "presets": [
            "es2015",
            "react"
          ]
}

I've tried to add the "env": {"test": {"plugins": ["transform-es2015-modules-commonjs"]}} but it didn't do anything so i took it out for now.

package.json

{
  "name": "my-app",
  "version": "0.0.1",
  "description": "app",
  "scripts": {
    "start": "node server.js",
    "postinstall": "webpack -p --define process.env.NODE_ENV=\"'production'\" --define process.env.SERVER_ROOT=\"'${SERVER_ROOT}'\"",
    "start-dev": "webpack-dev-server",
    "test": "jest"
  },
  "engines": {
    "node": "6.11.1",
    "npm": "3.10.8"
  },
  "jest": {
    "transform": {
       "^.+\\.jsx?$": "babel-jest"
    },
    "moduleNameMapper": { "\\.(s?css|less)$": "identity-obj-proxy" }
  },
  "dependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-async-functions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-regenerator": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.0",
    "express": "^4.15.4",
    "file-loader": "^0.11.1",
    "image-webpack-loader": "^3.3.0",
    "moment": "^2.18.1",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-bootstrap": "^0.31.0",
    "react-bootstrap-table": "^3.3.3",
    "react-datepicker": "^0.46.0",
    "react-dom": "^15.5.4",
    "react-dropzone": "^3.13.3",
    "react-redux": "^5.0.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "redux-persist": "^4.6.0",
    "redux-thunk": "^2.2.0",
    "sails.io.js": "^1.1.10",
    "socket.io-client": "1.6.0",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.2",
    "babel-jest": "^20.0.3",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^2.9.1",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "jest": "^20.0.4",
    "react-test-renderer": "^15.6.1",
    "webpack-dev-server": "^2.4.2",
    "whatwg-fetch": "^2.0.3"
  }
}

Things change quickly in the js world. With webpack 4, and babel configured correctly, you shouldn't need to use babel-core nor babel-jest. Just use presets env, react, stage-0 to babelrc. If using modules: false on root level, you'll need to use modules: true on the test environment. Unexpected token import usually means babel is not converting to commonJs modules for jest/node to consume. — J. Quiles
– J. Quiles, Commented May 17, 2018 at 0:42

zer0chain · Accepted Answer · 2017-09-06 03:32:49Z

5

You need to tell jest to import your files using Babel. It can be done by setting the transform attribute of jest in your package.json :

"jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
}

answered Sep 6, 2017 at 3:32

zer0chain

4,4772 gold badges14 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Eric Over a year ago

yes thank you! that made the imports but now i'm getting an error for SyntaxError: Unexpected token : when i tried to import my own script with import { Home} from '../src/Home';

Eric Over a year ago

({"Object<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){:global .react-datepicker__tether-element-attached-top .react-datepicker__triangle, :global .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle, :global .react-datepicker__year-read-view--down-arrow, :global .react-datepicker__month-read-view--down-arrow

Eric Over a year ago

Seems like it's having a problem with react.datepicker

zer0chain Over a year ago

Sounds like you are importing your style. You can add this part on your package.json, in the jest part : "moduleNameMapper": { "\\.(s?css|less)$": "identity-obj-proxy" }

Eric Over a year ago

I've added that portion to my package.json but the error still there.

|

Collectives™ on Stack Overflow

[React]Jest SyntaxError: Unexpected token import

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related