React Jest causing "SyntaxError: Unexpected token ."

Question

I am now using React Jest to test code. If a component is single, and not importing anything else, "npm test" runs smoothly. Now I want to test multiple components together, and I immediately get this error:

SyntaxError: Unexpected token .

It seemed whenever React is importing something else, such as this one:

require( './style/fixed-data-table.css' );
require( './style/jnpr-datatable.scss' );

and then using Jest, it is throwing the unexpected token "." error.

There must be something wrong in my settings, but where? My package.json file contains:

 "jest": {
   "unmockedModulePathPatterns": [
     "<rootDir>/node_modules/react/",
     "<rootDir>/node_modules/react-dom/",
     "<rootDir>/node_modules/react-addons-test-utils/"
   ]
 }

And the .babelrc file is already in the root. Also babel-jest is included.

you can try with : "ignore": [".css",".scss"] in your .babelrc — Hosar
– Hosar, Commented Jan 25, 2017 at 1:38
I used this: { "presets": ["es2015", "react"], "ignore": [".css",".scss"] } in babelrc, when run npm test, same error. Any idea? — user3006967
– user3006967, Commented Jan 25, 2017 at 4:10

Peter Mortensen · Accepted Answer · 2023-02-01 03:08:12Z

45

Have a look at the Jest documentation for Webpack integration. The problem is that Jest can’t work with other stuff than JavaScript. So you have to mock all non-JavaScript files you import. The easiest way is to configure a moduleNameMapper in your Jest configuration.

{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

With a __mocks__/styleMock.js, that looks like this.

module.exports = {};

edited Feb 1, 2023 at 3:08

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 25, 2017 at 12:34

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3006967 Over a year ago

Smart solution! This is the only one that makes it work. Thanks

toasty Over a year ago

Where can I find: __mocks__/styleMock.js? Or, if it's something I need to create, under which folder should it be housed? Sorry if that's obvious, I'm new to jest and I'm currently stumped. Greatly appreciate the help!

Neurotransmitter · Accepted Answer · 2021-07-26 21:04:29Z

7

The easiest is to add an identity-obj-proxy package:

yarn add --dev identity-obj-proxy

And use it to automatically mock CSS/SCSS modules.

Add this to the package.json:

  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "identity-obj-proxy"
    }
  }

Or the following to jest.config.ts:

moduleNameMapper: {
  '\\.(css|scss)$': 'identity-obj-proxy'
}

This way (S)CSS module class names will be automatically retrieved in tests.

Here is the source.

answered Jul 26, 2021 at 21:04

Neurotransmitter

6,9172 gold badges54 silver badges41 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2023-02-01 03:17:20Z

3

npm i -D identity-obj-proxy

Add the below to file jest.config.js

moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
}

File jest.config.js:
```
testEnvironment: 'jsdom',
```

edited Feb 1, 2023 at 3:17

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 15, 2021 at 18:51

Not Again

392 bronze badges

2 Comments

Kayra Berk Tuncer Over a year ago

It's worked for my app. But I don't understand why don't works other answers.

Peter Mortensen Over a year ago

Why does it work? What is the idea? What environment? Please respond by editing (changing) your answer, not here in comments (but ******* without ******* "Edit:", "Update:", or similar - the answer should appear as if it was written today).)

Peter Mortensen · Accepted Answer · 2023-02-01 03:09:05Z

-2

The way I got away with this was by adding these two lines to my .babelrc file:

{
    "presets": ["env", "react"],
    "plugins": ["transform-class-properties"]
}

And my package.json file looks like this:

{
  "name": "crud-redux",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  "react": "^16.4.0",
  "react-dom": "^16.4.0",
  "react-scripts": "1.1.4"
},
 "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "NODE_ENV=test jest",
     "eject": "react-scripts eject"
},
  "devDependencies": {
      "babel-jest": "^18.0.0",
      "babel-loader": "^6.4.1",
      "babel-plugin-transform-decorators-legacy": "^1.3.5",
      "enzyme": "^2.9.1",
      "jest": "^23.1.0",
      "react-addons-test-utils": "^15.6.2",
      "react-test-renderer": "^15.6.2",
      "redux-mock-store": "^1.5.1",
      "webpack": "^1.15.0",
      "webpack-dev-server": "^1.16.5"
  }
}

edited Feb 1, 2023 at 3:09

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 4, 2018 at 1:06

Cyclotron3x3

2,2491 gold badge29 silver badges41 bronze badges

1 Comment

Peter Mortensen Over a year ago

Why does it work? What is the idea? What environment? This answer is currently too terse. (But please *********************************** without *********************************** "Edit:", "Update:", or similar - the answer should appear as if it was written today).)

Collectives™ on Stack Overflow

React Jest causing "SyntaxError: Unexpected token ."

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related