CSS module @import fails the Jest test suit

Question

I am using Jest and Enzyme to test my application. I am getting error:

 FAIL  app/containers/Navbar/NavbarContainer.test.js
  ● Test suite failed to run

    app/components/Navbar/styles.css: Unexpected token (1:0)
      > 1 | @import "../../styles/base/_variables";
          | ^
        2 |
        3 | .navbar{
        4 |   width: $navbar-width;

This is my Jest configuration in package.json:

"jest": {
    "verbose": true,
    "globals": {
      "env": {
        "isProd": false,
        "isDev": true,
        "command": "start"
      }
    },
    "moduleNameMapper": {
      "\\.(css)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "css"
    ],
    "modulePaths": [
      "/app"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "verbose": true,
    "setupFiles": [
      "./setupJest.js"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js"
  }

I was following the guides while setting up the application, and I found that identity-obj-proxy will help to mock css-modules functionality, but that's not working in my case. Please let me know what am I missing here.

P.S. this is about not ES6 modules import. The suit failed because there is a @import in css.

@elbecita that question is about ES6 module imports, that can be solved by `babel-jest`. This is about `css-modules`'s `@import`s. If you see the same thing could you please remove the possible duplicate flag? — Bharat Soni, Jan 16 '18 at 17:33
Yes, I am sorry, I read too quickly. Might this help? https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files The guy has the error because of an @import in a less file, but that really sounds like your issue? — elbecita, Jan 16 '18 at 17:44
Basically the solution would be to create an empty module and tell jest that for any css file it should use that empty module instead. (Since "identity-obj-proxy" seems to not be working). — elbecita, Jan 16 '18 at 17:49
@elbecita `identity-obj-proxy` is the advanced solution of adding mock files. checkout comments in the answer, the guy solved his problem by using the same plugin. — Bharat Soni, Jan 16 '18 at 17:58
Does it work if you include the extension (.css) in the @import statement? — elbecita, Jan 16 '18 at 18:06
tried it, it doesn't work with that. Actually the the problem is Jest is not able to understand `@import` in a CSS file. So adding or removing extension for the solution is out of the question. — Bharat Soni, Jan 16 '18 at 18:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163270/discussion-between-elbecita-and-bharat-soni). — elbecita, Jan 16 '18 at 18:14

Alexey Nikonov · Answer 1 · 2019-03-16T07:48:47.393

4

UPDATE who use create-react-app from feb 2018. You cannot override the moduleNameMapper in package.json but in jest.config.js it works, unfortunately i havent found any docs about why it does the trick. So my jest.config.js look like this:

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

and it skips scss files and @import quite well.

I added to devDependencies identity-obj-proxy

Backing my answer i followed jest webpack

edited Mar 16 '19 at 07:48

answered Mar 16 '19 at 07:10

Alexey Nikonov

4,958
5
39
66

This resolved my issue too. I simply had to change `"moduleNameMapper": { "\\.(css|jpg|png|svg)$": "path/to/JestMockModule.js" },` to `"moduleNameMapper": { "\\.(s?css|jpg|png|svg)$": "path/to/JestMockModule.js" },`. Just 2 character solved my issue. – Tom O. Mar 11 '20 at 19:47

score 2 · Answer 2 · answered Jan 17 '18 at 05:53

So, I've found the solution to this problem. I was importing CSS without the extension in my components and Jest was confusing that import with JS file. Solution is instead of importing css like:

import * as styles from './styles'

you should import it like:

import * as styles from './styles.css'

score 0 · Answer 3 · answered Feb 05 '18 at 03:35

0

One quick gotcha that I found with this. If you have a jest.config.js file, then you need to set your moduleNameWrapper inside of that config file.

answered Feb 05 '18 at 03:35

Michael Ryan Soileau

1,763
17
28

score 0 · Answer 4 · answered Mar 02 '20 at 16:55

I know this post is old but i solved this issue by adding jest-transform-css as a devDependency

npm i --save-dev jest-transform-css

and then adding the following inside jest.config.js

    transform: {
                '^.+\\.js$': 'babel-jest',
                '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css'
    }

you can refer to this github issue for more information

CSS module @import fails the Jest test suit

4 Answers4

Linked