Unexpected Token - Jest for Existing React + Web-Pack Application
I have a simple React application. I am trying to customize Jest (Testing framework for React) on my existing response app. When I try to run 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 comes with webpack. I will be very grateful if someone can tell me how to fix this problem.
Here's 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 issue describe a file called babelrc. But in my project, I could not find such a file. Here is the project -> link
source to share
You have configured Babel in the webpack config and this only applies to webpack. When other tools like Jest use Babel they won't see this config because they don't look at the webpack config. You can use a file .babelrc
to configure Babel and this applies to anything Babel starts (not just the webpack).
Usage is .babelrc
usually preferred as you want to have a generic babel config and if you need to override a parameter, you can still do it in a specific application like webpack config.
Create the following .babelrc
:
{
"presets": ["es2015", "react"]
}
With this, you can remove the parameter presets
in your webpack config because it will use .babelrc
. Please note that the parameter cacheDirectory
is specific to babel-loader
and not used to configure basic Babel.
You also have a typo in your test, there toMatchSnapShot()
must be toMatchSnapShot()
.
expect(rendered.toJSON()).toMatchSnapshot();
source to share