Jest doesn't works with JSX which imports CSS #3094

svipas · 2017-03-07T20:22:37Z

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
If app.jsx have import './app.css'; it's impossible to run test, I got this error:

yarn run:test v0.21.3
$ NODE_ENV=client jest -u
 FAIL  src/__tests__/app.test.js
  ● Test suite failed to run

    /home/svipben/Documents/react-boilerplate/src/client/app/app.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){body {
                                                                                                  ^
    SyntaxError: Unexpected token {

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at Object.<anonymous> (src/client/app/app.jsx:7:1)
      at Object.<anonymous> (src/__tests__/app.test.js:2:12)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.693s
Ran all test suites.
error Command failed with exit code 1.

What is the expected behavior?
To run tests without error...

Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.

OS: Linux Ubuntu 16.04
Jest: Latest
Yarn: Latest
Node: Latest
babel-jest: Latest

.babelrc:

        "client": {
            "presets": [
                "latest", // All you need to compile what's in ES2015+
                "flow", // Flow support
                "react", // Strip flow types and transform JSX
                "stage-2" // Experimental syntax extensions
            ],
            "sourceMaps": true // Compile with Source Maps
        },

jest: NODE_ENV=client jest -u

P.S. Everything runs well if I comment/remove import './app.css';

The text was updated successfully, but these errors were encountered:

maximderbin · 2017-03-07T21:36:19Z

@svipben https://facebook.github.io/jest/docs/webpack.html#mocking-css-modules

svipas · 2017-03-07T21:47:27Z

@maximderbin Thanks!

simonxl · 2018-03-01T21:10:09Z

@maximderbin Thank you! It resolves my issue by adding moduleNameMapper

sarahmarciano · 2018-04-22T14:51:22Z

@svipben @maximderbin @simonxl where do I have to add this moduleNameMapper?
I see in the doc that we shall add it in the packag.json but which one?
tnx

thymikee · 2018-04-22T15:02:32Z

@sarahmarciano moduleNameMapper is a part of your configuration. By default, you can set the config in package.json (the one which features jest in dependencies) under "jest" key, like this:

{
  "dependencies": {...}
  "jest": {
    "moduleNameMapper": {...}
  }
}

dennisja · 2018-04-28T10:45:09Z

I solved this by using the moduleNameMapper key in the jest configurations in the package.json file

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

After this you will need to create the two files as described below

__mocks__/styleMock.js

module.exports = {};

__mocks__/fileMock.js

module.exports = 'test-file-stub';

If you are using CSS Modules then it's better to mock a proxy to enable className lookups.
hence your configurations will change to:

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

But you will need to install identity-obj-proxy package as a dev dependancy i.e.

yarn add identity-obj-proxy -D

For more information. You can refer to the jest docs

matthew-dean · 2018-09-14T19:30:36Z

Note that the approaches recommended here will not work if your CSS modules export values which your JSX files depend on. Most guides assume you're only using CSS modules to export class names. I wish there was a guide for properly mocking CSS modules.

SimenB · 2018-09-15T12:39:09Z

@matthew-dean what do you mean "properly mocking CSS modules"? Can you describe your use case a bit more? I have great experience using identity-obj-proxy

matthew-dean · 2018-09-18T17:49:18Z

:export {
  sizeMobile: $size-mobile / 1px;
  sizePhablet: $size-phablet / 1px;
  sizeSmallTablet: $size-small-tablet / 1px;
  sizeTablet: $size-tablet / 1px;
  sizeDesktop: $size-desktop / 1px;
  sizeLargeDesktop: $size-large-desktop / 1px;
}

import styles from './variables.scss'

const tileSize = parseFloat(styles.sizeTablet) / 3
//...
render() {
  return <Tile style={{width: tileSize}} />
}

This is a contrived example, just demonstrating that you can share constants (values) between CSS modules and JS, and that conditional rendering or dynamic props can be assigned based on values.

But with identity-obj-proxy, these values can't be cast to integers, let alone the actual values that are present. So if you have JSX code that relies on constants defined in your CSS modules, then you can't test this without properly mocking the CSS module (having an object returned that has the values as testable integers). identity-obj-proxy only assumes that your CSS modules contain an object with nothing more than scoped CSS classnames; it does not support the other aspect of CSS modules which is the ability to export values / constants that in turn get used in JS operations.

matthew-dean · 2018-09-18T17:52:19Z

@SimenB

Incidentally, I WAS able to mock the CSS module successfully like this:

const styles = require('styles/variables.scss')

jest.mock('styles/variables.scss', () => {
  return {
    sizePhablet: 500,
    sizeSmallTablet: 768,
    sizeTablet: 1024,
    sizeDesktop: 1440,
    sizeLargeDesktop: 1920
  }
})

Hopefully that's useful for someone else who is using all the features of CSS modules and, like me, was tearing their hair out at all the default "just use identity-obj-proxy" advice.

krajasekhar · 2018-10-20T09:16:12Z

I solved this problem by using 'jest-transform-css'.
After installing, added the below in the jest config.

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

Now css files will get transpiled just like js files did.

gustavo-tailrecursive · 2019-01-31T17:23:27Z

@matthew-dean where did you write the mock the CSS module and how do you reference it to jest?

CeamKrier · 2019-02-14T20:44:36Z

I'm using an external package and it imports its own files to a single file by using the following:
@import "progress-tracker/progress-tracker-variables.scss";

Whenever I run the Jest for to start testing

the error above shows up. I already have specified css mockup inside the package.json

Im looking forward to get some help about that issue. Any tricks, suggestions?

Edit: I have tried both babel-jest and identity-obj-proxy packages and none of those worked. The problem still persists.

Edit 2: Also I have tried the config below according to solutions that I have come across with on the web.

bengrunfeld · 2019-03-13T07:57:07Z

I'm using Babel 7, babel-jest ^24.5.0, Jest ^24.1.0.

After following the above advice, I'm still getting this error when I try to import a function or object into a Jest test file (e.g. Post.test.js) when the target file (e.g. Post.js) imports a CSS file - e.g. ./postStyles.css.

Jest encountered an unexpected token

SyntaxError: Unexpected token .

Details:

    /Users/ben/Desktop/Work/code/bengrunfeld/src/front-end/components/Post/postStyles.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.post h1, .post h2, .post h3 {

      3 |
      4 | import { PostText } from './styles'
    > 5 | import './postStyles.css'

As per the article linked above, this is in my package.json:

"jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",

      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js"
    }
  },

and in the root directory, I have __mocks__/styleMock.js which has the following code:

module.exports = {};

Lastly, my jest.config.js:

module.exports = {
  setupFiles: ['<rootDir>/src/test/setup.js']
}

Which in turn configures Enzyme:

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

fthomas82 · 2019-04-29T10:15:13Z

I am struggling to solve almost same issue where my scss file contain @import statements. Test fails telling SyntaxError: Invalid or unexpected token. Can somebody help me please?

I followed solutions given above but none of them seems to be working for me

FJKhan · 2019-05-12T16:21:01Z

I was able to resolve this by adding @babel/polyfill as a dev dependency

yanlee26 · 2019-06-27T11:33:51Z

same here @fthomas82

joseigor · 2019-07-15T02:00:31Z

I solved this by using the moduleNameMapper key in the jest configurations in the package.json file
{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}
After this you will need to create the two files as described below

__mocks__/styleMock.js
module.exports = {};
__mocks__/fileMock.js
module.exports = 'test-file-stub';
If you are using CSS Modules then it's better to mock a proxy to enable className lookups.
hence your configurations will change to:
{
  "jest":{
     "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
  }
}
But you will need to install identity-obj-proxy package as a dev dependancy i.e.
yarn add identity-obj-proxy -D
For more information. You can refer to the jest docs

It worked for me. Thanks!!!

idindrakusuma · 2019-07-20T11:39:43Z

I solved this problem by using 'jest-transform-css'.
After installing, added the below in the jest config.
"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }
Now css files will get transpiled just like js files did.

Thanks, bro @krajasekhar
It works for me 👍

ShadOoW · 2019-07-23T17:31:36Z

I added suggested config to packages.json, without success, then I realized I had a jest.config.js in my project root directory, Jest uses that config file over packages.json.

For reference here is my jest.config.js file:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

neginqantas · 2019-11-04T03:51:44Z

I have to import a raw css in my code

import "./cloud.css?raw"

I also modified jest config
"jest":{ "moduleNameMapper": { "\\.(css|less|scss|sass|css?raw)$": "identity-obj-proxy" },

still, I am getting test error on the import line. Any idea how to mock raw import?

jahnaviv · 2020-01-16T07:39:50Z

Solution of @import Unexpected token=:)

Install package:
npm i --save-dev identity-obj-proxy

Add in jest.config.js

module.exports = {
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

rafinskipg · 2020-04-13T14:13:11Z

If somebody arrives here:
This module is the most updated I have seen: https://www.npmjs.com/package/jest-css-modules-transform

transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
    ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform"
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy'
  },

danielrsantana · 2020-10-08T22:44:32Z

I added suggested config to packages.json, without success, then I realized I had a jest.config.js in my project root directory, Jest uses that config file over packages.json.

For reference here is my jest.config.js file:
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

Thanks to everybody who presented a solution and specially to you @ShadOoW! It was a kind of logic thing but I was missing that ... config file will be used over settings in package.json

In short, for new comers, what worked to me was an union of multiple solutions presented by our community dream team:

create a jest.config.json file

touch jest.config.json open jest.config.json

Install jest-transform-css:

yarn add jest-transform-css -D

This is how your jest config file should look like:

module.exports = {
  preset: 'ts-jest/presets/js-with-babel',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': './jest.mock.js',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/assets/'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(css|less|scss|sass)$': 'jest-transform-css',
  },
};

Update your package.json (first, transfer all your JEST configurations, if you have some there, to the new jest config file), then the magic goes here:

"test": "jest --config ./jest.config.js"

Tks Everyone !

Mano534 · 2020-12-24T21:07:35Z

it worked for me when I add the moduleNameMapper in the jest.config.ts, not the package.json

olignyf · 2021-04-01T21:09:13Z

If you are using Jest for images snapshots there is not much choice to parse SCSS into CSS and inject it in the tests. I tried "sass-jest" and "sass-jest-transform" and they didn't work. I'm wondering if I will have to write my own?

luiznasciment0 · 2021-04-12T20:50:03Z

Hey! I'm still having this error after trying all the options. If I remove the "?type=global" it works, but then I run out of styles...

My jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom', // https://jestjs.io/docs/en/configuration#testenvironment-string
  roots: ['<rootDir>'],
  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],

  automock: false,
  restoreMocks: true,

  // Runs special logic, such as cleaning up components
  // when using React Testing Library and adds special
  // extended assertions to Jest
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],

  // Module file extensions for importing
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'css'],

  // tsconfig.json `paths` aliases
  moduleNameMapper: {
    '^@maria/api(.*)$': '<rootDir>/main/core/api/$1',
    '^@maria/bifrost(.*)$': '<rootDir>/main/core/bifrost/$1',
    '^@maria/request(.*)$': '<rootDir>/main/core/request/$1',
    '^@maria/metrics(.*)$': '<rootDir>/main/core/metrics/$1',
    '^@maria/utils(.*)?': '<rootDir>/main/core/utils',
    '^@maria/models(.*)$': '<rootDir>/main/app/models/$1',
    '^@maria/components(.*)$': '<rootDir>/main/app/components/$1',
    '^@maria/hooks(.*)$': '<rootDir>/main/app/hooks/$1',
    '^@maria/hocs(.*)$': '<rootDir>/main/app/hocs/$1',
    '^@maria/layout(.*)$': '<rootDir>/main/app/layout/$1',
    '^@maria/providers(.*)$': '<rootDir>/main/app/providers/$1',
    '^@maria/assets(.*)$': '<rootDir>/main/app/assets/$1',
    '^@maria/selectors(.*)$': '<rootDir>/main/app/selectors/$1',
    '^@maria/screens(.*)$': '<rootDir>/main/app/screens/$1',
    '^@maria/containers(.*)$': '<rootDir>/main/app/containers/$1',
    '^@maria/validators(.*)$': '<rootDir>/main/app/validators/$1',
    '^@maria/server(.*)$': '<rootDir>/server/$1',
    '^@maria/test(.*)$': '<rootDir>main/app/test/$1',
    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less|sass|scss|css?type=global)$': '<rootDir>/__mocks__/styleMock.js',
  },

  // Jest transformations -- this adds support for TypeScript and styled-jsx
  transform: {
    '^.+\\.(ts|tsx)?$': 'babel-jest',
    '.+\\.css$': 'jest-styled-jsx-transformer',
  },
}

sam-621 · 2021-04-17T01:48:21Z

I move my config from jest.config.js to my package.json and worked

darekkay · 2021-05-15T09:55:28Z

I came across this issue when importing CSS files from node_modules:

import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

This was my configuration:

transform: {
  "^.+\\.(css|scss)$": here("./jest/transforms/css-transform"),
};

While it works fine with local CSS files, It didn't for the imports above. The reason is that transformIgnorePatterns includes node_modules by default, hence the CSS transform will be skipped for those files. This change was necessary:

transformIgnorePatterns: [
  "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
],

github-actions · 2021-06-15T00:03:38Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

cpojer closed this as completed Mar 7, 2017

dmitrizzle mentioned this issue Jun 28, 2018

Example tests throw errors roast-cms/french-press-editor#67

Closed

kwokwilliam mentioned this issue Jul 27, 2018

Write unit tests for existing classes codeandcognition/koconut#94

Open

VeraZab mentioned this issue Jan 14, 2019

allow disabling colorscale dropdown plotly/react-chart-editor#832

Merged

ffasolin mentioned this issue Jul 29, 2019

Uncaught SyntaxError: Unexpected token . wojtekmaj/react-calendar#108

Closed

baldoalessandro mentioned this issue Feb 26, 2020

npm test fail with SyntaxError tohacknight/open-hospital#10

Closed

SunXinFei mentioned this issue May 25, 2020

前端单元测试二三事 SunXinFei/sunxinfei.github.io#27

Open

This was referenced Jun 10, 2020

test: fix jest with less import ant-design/ant-design#24900

Merged

antd CI failed with antd-img-crop nanxiaobei/antd-img-crop#46

Closed

yuxitang-amzn mentioned this issue Sep 9, 2020

Add unit test for role edit opensearch-project/security-dashboards-plugin#438

Merged

eLeontev mentioned this issue Oct 26, 2020

#66 [Tests] StatusCodeCard component M0nica/httriri#88

Merged

github-actions bot locked as resolved and limited conversation to collaborators Jun 15, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jest doesn't works with JSX which imports CSS #3094

Jest doesn't works with JSX which imports CSS #3094

svipas commented Mar 7, 2017 •

edited

maximderbin commented Mar 7, 2017

svipas commented Mar 7, 2017

simonxl commented Mar 1, 2018

sarahmarciano commented Apr 22, 2018

thymikee commented Apr 22, 2018

dennisja commented Apr 28, 2018 •

edited

matthew-dean commented Sep 14, 2018

SimenB commented Sep 15, 2018

matthew-dean commented Sep 18, 2018

matthew-dean commented Sep 18, 2018 •

edited

krajasekhar commented Oct 20, 2018 •

edited

gustavo-tailrecursive commented Jan 31, 2019

CeamKrier commented Feb 14, 2019 •

edited

bengrunfeld commented Mar 13, 2019

fthomas82 commented Apr 29, 2019 •

edited

FJKhan commented May 12, 2019

yanlee26 commented Jun 27, 2019

joseigor commented Jul 15, 2019

idindrakusuma commented Jul 20, 2019

ShadOoW commented Jul 23, 2019

neginqantas commented Nov 4, 2019

jahnaviv commented Jan 16, 2020 •

edited

rafinskipg commented Apr 13, 2020

danielrsantana commented Oct 8, 2020 •

edited

Mano534 commented Dec 24, 2020

olignyf commented Apr 1, 2021

luiznasciment0 commented Apr 12, 2021 •

edited

sam-621 commented Apr 17, 2021

darekkay commented May 15, 2021

github-actions bot commented Jun 15, 2021

Jest doesn't works with JSX which imports CSS #3094

Jest doesn't works with JSX which imports CSS #3094

Comments

svipas commented Mar 7, 2017 • edited

maximderbin commented Mar 7, 2017

svipas commented Mar 7, 2017

simonxl commented Mar 1, 2018

sarahmarciano commented Apr 22, 2018

thymikee commented Apr 22, 2018

dennisja commented Apr 28, 2018 • edited

matthew-dean commented Sep 14, 2018

SimenB commented Sep 15, 2018

matthew-dean commented Sep 18, 2018

matthew-dean commented Sep 18, 2018 • edited

krajasekhar commented Oct 20, 2018 • edited

gustavo-tailrecursive commented Jan 31, 2019

CeamKrier commented Feb 14, 2019 • edited

bengrunfeld commented Mar 13, 2019

fthomas82 commented Apr 29, 2019 • edited

FJKhan commented May 12, 2019

yanlee26 commented Jun 27, 2019

joseigor commented Jul 15, 2019

idindrakusuma commented Jul 20, 2019

ShadOoW commented Jul 23, 2019

neginqantas commented Nov 4, 2019

jahnaviv commented Jan 16, 2020 • edited

rafinskipg commented Apr 13, 2020

danielrsantana commented Oct 8, 2020 • edited

Mano534 commented Dec 24, 2020

olignyf commented Apr 1, 2021

luiznasciment0 commented Apr 12, 2021 • edited

sam-621 commented Apr 17, 2021

darekkay commented May 15, 2021

github-actions bot commented Jun 15, 2021

svipas commented Mar 7, 2017 •

edited

dennisja commented Apr 28, 2018 •

edited

matthew-dean commented Sep 18, 2018 •

edited

krajasekhar commented Oct 20, 2018 •

edited

CeamKrier commented Feb 14, 2019 •

edited

fthomas82 commented Apr 29, 2019 •

edited

jahnaviv commented Jan 16, 2020 •

edited

danielrsantana commented Oct 8, 2020 •

edited

luiznasciment0 commented Apr 12, 2021 •

edited