Error when testing react components with jest and css-modules

Question

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.

intercoder · Accepted Answer · 2017-07-12 11:45:58Z

5

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

answered Jul 12, 2017 at 11:45

intercoder

2,4298 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

avalanche1 Over a year ago

Rename .jestrc to jest.config.js and restart jest)

Praym Over a year ago

Adding these jest settings to package.json worked for me.

Garrett McCullough · Accepted Answer · 2017-07-06 16:35:26Z

2

I took a look at the Jest docs and, just to be clear, did you install identity-obj-proxy?

npm install --save-dev identity-obj-proxy

Also, I see that the recommended file regex in the Jest docs is

"\\.(css|less)$": "identity-obj-proxy"

may try switching yours to match.

Finally, you could try a jest plugin like jest-css-modules

https://github.com/justinsisley/Jest-CSS-Modules

edited Jul 6, 2017 at 16:35

answered Jul 6, 2017 at 16:10

Garrett McCullough

9807 silver badges15 bronze badges

1 Comment

intercoder Over a year ago

I have actually tried everything, but 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. I added an edit to my question

Collectives™ on Stack Overflow

Error when testing react components with jest and css-modules

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related