how to fix Jest encountered an unexpected token React - reactjs

Question

I m trying to run a react app, created using create-react-app. App runs successfully, but when I try to run JEST it give me the following error. I have looked and tried various options but could not fix it. Here is my package.json and jest.config.json
please suggest on what I might be doing wrong
Thank you
A
Error
FAIL src/App.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
SyntaxError: C:\Test\counter-app\src\App.test.js: Unexpected token (7:18)
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
> 7 | ReactDOM.render(<App />, div);
| ^
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
package.json
{
"name": "counter-app",
"version": "0.1.0",
"private": true,
"jest": {
"verbose": true,
"moduleDirectories": ["node_modules", "src"],
"transformIgnorePatterns": [
"node_modules/(?!(react-native|react-native-cookies)/)"
]
},
"dependencies": {
"bootstrap": "^4.3.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
jest.config.js
const {defaults} = require('jest-config');
module.exports = {
"verbose": true,
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.(css|scss|less)$": "jest-css-modules",
".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
},
"globals": {
"NODE_ENV": "test"
},
moduleFileExtensions: [...defaults.moduleFileExtensions, 'js', 'jsx'],
"moduleDirectories": [
"node_modules",
"src/frontend",
"src/shared"
]
};

Answer 1

Modified Package.json as follows:
{
"name": "foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"jest-junit": "^9.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"reporters": [ "default", "jest-junit" ],
"test": "react-scripts test --watchAll=false",
"testResultsProcessor": "jest-junit",
"eject": "react-scripts eject"
},
"jest-junit": {
"suiteName": "jest tests",
"outputDirectory": ".",
"outputName": "junit.xml",
"uniqueOutputName": "false",
"classNameTemplate": "{classname}-{hello}",
"titleTemplate": "{classname}-{helloTests}",
"ancestorSeparator": " › ",
"usePathForSuiteName": "true"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Answer 2

Try removing jest.config.js file completely and let it work with default config.