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

i have simple react app. trying configure jest(testing framework react) existing react app. when try run test cases npm test, gives me 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 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 test suites. npm err! test failed.  see above more details. 

my react app bundled using webpack. thankful if tell me how solve problem.

here test case:

import react 'react'; import renderer 'react-test-renderer'; import reportastableview '../../../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 package.json

{   "name": "openmrs-owa-built-in-reports",   "version": "0.1.0",   "description": "built-in reports 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 problem talks file named babelrc. in project couldn't find such file. here project -> link

you configured babel in webpack config , apply webpack. when other tools, jest, use babel, won't see configuration because don't @ webpack config. can use .babelrc file configure babel , apply runs babel (not webpack).

using .babelrc preferred want have general babel config, , if need override setting, can still in specific application in webpack config.

create following .babelrc:

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

with that, can remove presets option in webpack config because use .babelrc. note cachedirectory option specific babel-loader , not used configure underlying babel.

you have typo in test, tomatchsnapshot() should tomatchsnapshot().

expect(rendered.tojson()).tomatchsnapshot();