CODEWITHSUNDEEP
javascriptreactjsjestjscss-modules
Bharat Soni
Bharat Soni

Reputation: 2902

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

Upvotes: 4

Views: 4065

Answers (4)

Mike Araya
Mike Araya

Reputation: 164

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

Upvotes: 1

Oleksi&#239; Nikonov
Oleksi&#239; Nikonov

Reputation: 5598

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

Upvotes: 5

Michael Ryan Soileau
Michael Ryan Soileau

Reputation: 1843

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.

Upvotes: 0

Bharat Soni
Bharat Soni

Reputation: 2902

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'

Upvotes: 2

Related Questions