Unexpected token while running test case in react js

Question

I running my test case in react js using jest I getting an error while running the test case my App.test.js is below

const { React } = require('react');
const { shallow } = require('enzyme');
const { Iconshow } = require('../../src/Component/Icon');

describe('Iconshow component', ()=>{
    let wrapper;
    beforeEach(()=>{
        wrapper = shallow(<Iconshow />); //i am getting error on this line
    })
    it('+++ render the DUMB component', () => {
        expect(wrapper).toBeTruthy();
    });
});

package.json file.

    {
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "chart.js": "^2.7.1",
    "enzyme-adapter-react-15": "^1.0.5",
    "husky": "^0.14.3",
    "lint-staged": "^6.1.0",
    "node-sass-chokidar": "^0.0.3",
    "normalize.css": "^7.0.0",
    "npm-run-all": "^4.1.2",
    "prettier": "^1.10.2",
    "react": "^16.2.0",
    "react-chartjs-2": "^2.7.0",
    "react-scripts": "1.1.0"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,json,css}": [
      "prettier --single-quote --write",
      "git add"
    ]
  },
  "scripts": {
    "precommit": "prettier",
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "eject": "react-scripts eject",
    "test": "jest",
    "test:watch": "jest -c --watch",
    "test:coverage": "jest -c --coverage"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-jest": "^22.2.2",
    "babel-preset-es2015": "^6.24.1",
    "enzyme": "^3.3.0",
    "enzyme-to-json": "^3.3.1",
    "jest": "^22.2.2",
    "jest-serializer-enzyme": "^1.0.0",
    "react-dom": "^16.2.0",
    "react-test-renderer": "^16.2.0"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "setupFiles": [
      "./test/jestsetup.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "moduleNameMapper": {
      ".*\\.(css|scss|sass)$": "<rootDir>/tools/jest/styleMock.js",
      ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/jest/assetMock.js"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ]
  }
}

I shared only jest configuration, I tried this with create-react-app no build configuration setup, refer the screen shot

    import React from 'react';

    const Iconshow = props => {
        let icon;
        switch(props.icon) {
            case "Clouds":
                icon = "wi wi-day-cloudy";
                break;
            case "Rain":
                icon = "wi wi-day-rain";
                break;
            default:
                icon = "wi wi-day-sunny";
        }
        return <div className="iconWeath"><i className={icon}></i></div>;
    }

    export default Iconshow;

test/jestsetup.js:

    import { shallow, render, mount } from 'enzyme';
    //const {shallow, render, mount} = require('enzyme');
    global.shallow = shallow;
    global.render = render;
    global.mount = mount;
    //Fail tests on any warning
    console.error = message => {
       throw new Error(message);
    };

my iconshow Component looks like this, I had updated my package.json and jestsetup file can pls check my package.json file and jestsetup tell me some solution, i am trying to fix this issues for post two days but i cant,

Answer 1

You have a couple of issues in your code,

• SyntaxError: Unexpected token import

Make sure you have added a file named .babelrc to the project's root folder. Without it babel transpiling won't work. More here, but the .babelrc content would be this:

{ "presets": ["env", "react"] }

• Fix your imports.

Since Iconshow is your default named export. Note the same applies to the React import. Change the imports on the test like this:

import React from 'react'; import { shallow } from 'enzyme'; import Iconshow from '../src/Components/Iconshow';

• Configure Enzyme Adapter.

Enzyme now requires to configure an adapter for a specific version of React. Since you're using React 16, run npm i enzyme-adapter-react-16 --save-dev. Then update your jestSetup.js with this:

import Adapter from 'enzyme-adapter-react-16'; import { shallow, render, mount, configure } from 'enzyme'; ... configure({ adapter: new Adapter() });

After following the steps above, I successfully got the the test running:

EDIT

Full code for your test and jestSetup fixed:

https://gist.github.com/danielcondemarin/ec8180c4c37a4d1f99be28e01c4804a6 https://gist.github.com/danielcondemarin/e7af16f59e062977bded3252140a46d4