Css Module @import Fails The Jest Test Suit

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/Navba

Solution 1:

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

Solution 2:

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'

Solution 3:

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.

Solution 4:

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