Jest Error Unexpected token on react component - reactjs

Question

I am getting Unexpected token on the React Component Name while running npm test. Tried reading several other similar questions but none seems to be working for me. I have added content of babelrc , package.json and my test file content below
<!-- content of .babelrc file -->
{ "presets": ["env"] }
<!-- content of package.son file -->
"dependencies": {
"react": "^16.2.0",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"redux": "^3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-jest": "^23.0.0-alpha.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"jest": "^22.4.2",
"react-test-renderer": "^16.2.0"
},
"jest": {
"notify": true,
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupTestFrameworkScriptFile": "./src/setupTests.js",
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
<!-- Content of Test file App.test.js -->
import React from 'react';
import { shallow, mount } from 'enzyme';
import App from '../../src/components/App';
// describe what we are testing
describe('Render App Component', () => {
// make our assertion and what we expect to happen
it('should render without throwing an error', () => {
wrapper = shallow(<App />);
expect(wrapper.find('.app__wrapper').length).toEqual(1);
})
})

Answer 1

Here is how I resolved the issue.
• Add the following content to your .babelrc file and make sure .babelrc is in the root folder
{ "presets": ["env","react"] }
• Make sure you exclude static assets like CSS, images, SCSS, PDF, fonts, etc. Add the following to package.json as highlighted in the screenshot
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
Screenshot:

Answer 2

If anybody comes here to figure out what is happening, I think the accepted answer is not related to the issue here.
When the file extension is .js and if you try to write JSX in that file, linter will complain if you have a correct ESlint configuration.
Instead, try to change the file extension to .jsx or .tsx (if Typescript involved).