CODEWITHSUNDEEP
reactjsjestjsbabel-jest
Sherry
Sherry

Reputation: 135

Jest Error Unexpected token on react component

enter image description here

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);
 })
})

Upvotes: 6

Views: 4892

Answers (2)

dugong
dugong

Reputation: 4411

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).

Upvotes: 0

Sherry
Sherry

Reputation: 135

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:

exclude-static-assets

Upvotes: 5

Related Questions