Search code examples
reactjsjestjsenzymecss-modules

Error when testing react components with jest and css-modules


I'm trying to test my components with jest, react, redux but I keep getting the following error:

 ● Test suite failed to run
        stream-react-redux/src/containers/App/App.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.app {

    SyntaxError: Unexpected token .

I have followed the instructions on how to add the identity-obj-proxy and configuring my .jestrc file, but I keep getting the same error. The problem came when I started using css-modules and importing them in my components

Here is my .jestrc:

{
  "moduleFileExtensions": [ "js", "jsx"],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "^.+\\.(css)$": "identity-obj-proxy"
  },
  "transform": {
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  "verbose": true
}

I have also added the ["es2015", { "modules": false } ] inside my .babelrc file.


Solution

  • So after trying everything, I was still getting the same error.

    What I just noticed is that when I specify my config inside a .jestrc file my tests brake because of the .css, but when I do it from the package.json everything works.

    EDIT

    #package.json
    
    
      "jest": {
        "moduleNameMapper": {
          "\\.css$": "identity-obj-proxy"
        }, 
        "transform": {
          "\\.js$": "babel-jest"
        }