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, Jan 25 '17 at 01:38
http://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files maybe help — fumihwh, Jan 25 '17 at 01:39
I used this: { "presets": ["es2015", "react"], "ignore": [".css",".scss"] } in babelrc, when run npm test, same error. Any idea? — user3006967, Jan 25 '17 at 04:10
Re *"package.json"*: Implying [Node.js](https://en.wikipedia.org/wiki/Node.js)? — Peter Mortensen, Feb 01 '23 at 03:15

score 40 · Accepted Answer · edited Feb 01 '23 at 03:08

40

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 01 '23 at 03:08

Peter Mortensen

30,738
21
105
131

answered Jan 25 '17 at 12:34

Andreas Köberle

106,652
57
273
297

Smart solution! This is the only one that makes it work. Thanks – user3006967 Jan 25 '17 at 23:29
2

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! – toasty Dec 09 '18 at 04:51

score 4 · Answer 2 · answered Jul 26 '21 at 21:04

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.

score 3 · Answer 3 · edited Feb 01 '23 at 03:17

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 01 '23 at 03:17

Peter Mortensen

30,738
21
105
131

answered Dec 15 '21 at 18:51

Not Again

39
1

1

It's worked for my app. But I don't understand why don't works other answers. – Kayra Berk Tuncer May 15 '22 at 20:32
*Why* does it work? What is the idea? What environment? Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/70368912/edit), not here in comments (but ******* ***without*** ******* "Edit:", "Update:", or similar - the answer should appear as if it was written today).) – Peter Mortensen Feb 01 '23 at 03:18

score -2 · Answer 4 · edited Feb 01 '23 at 03:09

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"
  }
}

*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).) — Peter Mortensen, Feb 01 '23 at 03:09

React Jest causing "SyntaxError: Unexpected token ."

4 Answers4