How to exclude CSS module files from jest test suites?

Question

I have react component to test, I import its CSS using webpack as the following.

 import styles from '../../node_modules/openlayers/css/ol.css' // eslint-disable-line no-unused-vars

After running jest I get error:

C:\Users\...\node_modules\openlayers\css\ol.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.ol-box {
                                                                                             ^
    SyntaxError: Unexpected token .

How to exclude css files from jest test suites?

Answer 1

You can create your own mock in jest to prevent processing of css files.

// __mocks__/styleMock.js

module.exports = {};

Then in your package.json you can map any css files to the styleMock.js file under moduleNameMapper option:

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

See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets for more info.

Answer 2

Or better yet, add

yarn add --dev identity-obj-proxy

And add the following to jest.config.json

{
  "jest":{
     "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
  }
}