Jest & Enzyme - SyntaxError: Unexpected token import

Question

Writing tests for my React App with Jest & Enzyme has hit me hard as I'm unable to setup Enzyme along with Jest.

Below is the error I get whenever I use this line in my test file import React from 'react';

FAIL  src\App.test.js
  ● Test suite failed to run

    D:\experiements\react\my-app\src\App.test.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 <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.049s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap-daterangepicker": "^2.1.30",
    "history": "^4.7.2",
    "jquery": "^3.3.1",
    "moment": "^2.21.0",
    "npm": "^5.7.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-bootstrap-daterangepicker": "^4.1.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-toastify": "^3.3.4",
    "redux": "^3.7.2",
    "redux-form": "^7.2.3",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "homepage": "http://localhost/my-app",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-jest": "^23.0.0-alpha.0",
    "enzyme": "^3.3.0",
    "jest": "20.0.4",
    "jest-cli": "20.0.4",
    "jest-config": "20.0.4",
    "jest-environment-node": "20.0.3",
    "react-scripts": "1.1.0"
  }
}

App.test.js

import React from 'react';

describe("<App />", () => {
    it("renders App Component", () => {
        expect(true).toBe(true);
    })
})

But, if I remove the import statement and just run 'npm test' it works fine.

Any help very much appreciated!

Answer 1

It seems like you're not compiling with Babel.

If you install or update babel-jest, that should fix your issue:

npm install --save-dev babel-jest

Here's the yarn version:

yarn add -D babel-jest