[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"
  }
}

Answer 1

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"
    }
}