Unexpected Token - Jest for existing React + Web-pack app

Question

I have a simple React app. I am trying to configure Jest(Testing framework for React) to my existing react app. When I try to run the test cases from npm test, it gives me the following error:

> openmrs-owa-built-in-reports@0.1.0 test D:\OpenMRS\OWA\openmrs-owa-built-in-reports
> jest

 FAIL  app\js\__tests__\reports\common\ReportAsTableView.test.js
  ● Test suite failed to run

    D:/OpenMRS/OWA/openmrs-owa-built-in-reports/app/js/__tests__/reports/common/ReportAsTableView.test.js: Unexpected token (14:16)
        12 |
        13 |         const rendered = renderer.create(
      > 14 |                 <ReportAsTableView reportUUID="e451ae04-4881-11e7-a919-92ebcb67fe33"
           |                 ^
        15 |                 reportParameters= {params} />
        16 |         );
        17 |         expect(rendered.toJSON()).toMatchSnapShot();

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

My React app is bundled using webpack. I will be much thankful if anyone could tell me how to solve this problem.

Here is my test case:

import React from 'react';
import renderer from 'react-test-renderer';
import ReportAsTableView from '../../../components/reports/common/ReportAsTableView';

describe('ReportAsTableView renders correctly ', () => {
    it('renders correctly', () => {
        const params = {
            "startDate": "2017-05-05",
            "endDate": "2017-10-05"
        };

        const rendered = renderer.create(
                <ReportAsTableView reportUUID="e451ae04-4881-11e7-a919-92ebcb67fe33" 
                reportParameters= {params} />
        );
        expect(rendered.toJSON()).toMatchSnapShot();
    });
});

Below is my package.json

{
  "name": "openmrs-owa-built-in-reports",
  "version": "0.1.0",
  "description": "built-in reports for reference application",
  "repository": {
    "type": "git",
    "url": "https://github.com/JudeNiroshan/openmrs-owa-openmrs-owa-built-in-reports"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "archiver": "^1.0.0",
    "babel-core": "^6.2.1",
    "babel-jest": "^20.0.3",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.16.0",
    "browser-sync": "^2.11.1",
    "browser-sync-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.24.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^20.0.4",
    "on-build-webpack": "^0.1.0",
    "raw-loader": "^0.5.1",
    "react-test-renderer": "^15.6.1",
    "regenerator-runtime": "^0.10.5",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.13",
    "yargs": "^4.3.1"
  },
  "scripts": {
    "clean": "rimraf dist && rimraf coverage*",
    "build": "npm run clean && webpack --progress --colors --mode=production --target=web",
    "build:dev": "npm run clean && webpack --progress --colors --mode=dev --target=web",
    "build:prod": "npm run test && npm run build",
    "build:deploy": "webpack --progress --colors --mode=deploy --target=web",
    "watch": "webpack --progress --colors --watch --mode=deploy --target=web",
    "test": "jest"
  },
  "keywords": [
    "OpenMRS",
    "Open",
    "Web",
    "App"
  ],
  "author": "JudeNiroshan",
  "license": "MPL-2.0",
  "jest": {
    "automock": false,
    "browser": true,
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/js/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.jsx?$": "./node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/js/__mocks__/fileTransformer.js"
    },
    "testEnvironment": "jsdom",
    "roots": [
      "./app/js/__tests__"
    ],
    "testRegex": ".*.test.js",
    "verbose": true
  }
}

All other posts I've seen similar to this problem talks about a file named as babelrc. But in my project I couldn't find such a file. Here is the project -> link

Answer 1

You configured Babel in your webpack config and this will only apply to webpack. When other tools, like Jest, use Babel, they won't see that configuration because they don't look at the webpack config. You can use a .babelrc file to configure Babel and that will apply to anything that runs Babel (not just webpack).

Using a .babelrc is usually preferred as you want to have a general babel config, and if you need to override a setting, you can still do that in the specific application like in the webpack config.

Create the following .babelrc :

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

With that, you can remove the presets option in your webpack config because it will use the .babelrc . Note that the cacheDirectory option is specific to babel-loader and is not used to configure the underlying Babel.

You also have a typo in your test, toMatchSnapShot() should be toMatchSnapshot() .

expect(rendered.toJSON()).toMatchSnapshot();