React JS Jest causing "SyntaxError: Unexpected token ."

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 = {};

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.

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',