React JS 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, and now, I want to test multiple components together, and I immediately got 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 is throwing the unexpected token "." error.

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

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

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

Answer 1

Have a look at the jest docs for webpack integration. The problem is that jest cant work with other stuff then js. So you have to mock all none js files you import. The easiest way is to configure a moduleNameMapper in your jest configs.

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

with a __mocks__/styleMock.js that looks like this.

module.exports = {};

Answer 2

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.

Answer 3

1. npm i -D identity-obj-proxy

2. add below to jest.config.js

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

3. jest.config.js:

testEnvironment: 'jsdom',