How can I fix this Jest error in react app?

Question

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: /home/edi/web-dev/OnlineMarket/client/src/css/Home.css: Unexpected token (1:0)

> 1 | .home-wr {
    | ^
  2 |   position: relative;
  3 |   width: 80%;
  4 |   margin: 30px 10%;

  at Parser._raise (node_modules/@babel/parser/src/parser/error.js:60:45)
  at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:55:17)
  at Parser.raise (node_modules/@babel/parser/src/parser/error.js:39:17)
  at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
  at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1174:20)
  at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:541:23)
  at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:521:21)
  at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:312:23)
  at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:264:23)
  at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js

This is the error I get when i run 'npm test' having only one test:

import React from 'react'
import ReactDOM from 'react-dom'
import App from '../src/App'

it('should render app', () => {
  let div = document.createElement('div')
  ReactDOM.render(<App />, div)
  ReactDOM.unmountComponentAtNode(div)
})

Also this react app is inside a folder where I have the node.js app: -client (folder with react app) . . index.js (node.js app) package.json

I mention this because when I first installed Jest for the node.js app, react throw an error telling me that is a problem with the versions of jest-babel or something like this. I don't know if this is related to that. Also the tests for the node.js app are working fine.

Maybe this will help you: https://stackoverflow.com/a/54646930/13781982 — Dominik S., Jun 20 '20 at 21:09

score 1 · Accepted Answer · answered Jun 20 '20 at 21:25

You can find the complete answer here: https://stackoverflow.com/a/54646930/406110

But basically, jest doesn't know how to interpret a CSS import - you need to use a style mock - since you probably don't need styles on any of your jest tests.

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '\\.(css)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
  }
};

// test/jest/__mocks__/style-mock.js
module.exports = {};

Using this code in your jest.config.js file will make the import return an empty object to the javascript, without breaking the transpile trying to transform a CSS code into javascript.

How can I fix this Jest error in react app?

1 Answers1