Unexpected token import error in while running jest tests

Question

I know this has been asked countless times, but I am not able to fix the problem inspite of following all the SO solutions and suggestions.

I came to know about jest a few days ago and tried to have my hands on it. There is a good tutorial mentioned on DZone about using jest to test react components. However, when I try testing one of the components from the starter directory, I am having this issue,

SyntaxError: Unexpected token import

at ScriptTransformer._transformAndBuildScript (../../../../../../usr/local/lib/node_modules/jest/node_modules/jest-runtime/build/ScriptTransformer.js:289:17) at emitTwo (events.js:106:13)

As per suggested in this SO post, I have already installed babel-preset-react and added it to my webpack.config.js file.

Here is my webpack.config.js file, my package.json file , the .babelrc file

Please note that I have already gone through the solutions posted in these SO posts -

• Link 1
• Link 2
• Link 3

which might be apparent from the changes in my .babelrc and webpack files

But I'm not able to fix the issue that I'm having. Please let me know if I am missing something here, since I have spent a good 3-4 hrs searching SO and other forums for any answer and I can't seem to find it.

Update 1: Here is my test file - Clock.test.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
 import Clock from 'Clock';

 describe('Clock',()=>{
      it("renders without crashing",()=>{
         const div = document.createElement('div');
         ReactDOM.render(<Clock/>,div);
      });
   });

Answer 1

I was trying to follow up that tutorial but could not even install it without errors. As I see it, the tutorial is old, webpack 1 is deprecated, and other packages also undergone changes. You could try my steps, but it may not work for you.

• In the starter/CountdownTimer folder run npm install. If it throws this errors: “Cannot read property 'find' of undefined”, then run npm cache verify and npm install.
• Then run npm install –save-dev jest@18.0.0 to install jest.
• In the app folder create __tests__ folder in there create app.test.jsx
  and Clock.test.jsx.
• Add “jest” to the package.json test script.
• Change your .babelrc.

Here is how the files look like:

// app.test.jsx
describe('App', () => {
    it('should be able to run tests', () => {
        expect(1 + 2).toEqual(3);
    });
});

// Clock.test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
// Note the path.
import Clock from '../components/Clock';

describe('Clock',()=>{
  it("renders without crashing",()=>{
     const div = document.createElement('div');
     ReactDOM.render(<Clock/>,div);
  });
});

// package.json
{
  "name": "countdown-timer",
  "version": "0.0.1",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "test": "jest"
  },
  "author": "Joyce Echessa",
  "license": "MIT",
  "dependencies": {
    "express": "^4.14.0",
    "react": "^15.4.0",
    "react-dom": "^15.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.0",
    "foundation-sites": "^6.2.4",
    "jest": "^18.0.0",
    "jquery": "^3.1.1",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

// .babelrc
{
    "presets": [["es2015"], ["react"]]
}

Run npm test. This worked for me to get tests passing, hope it will help you too.