Jest fails when CSS uses @import

Question

trying to setup jest to work with css decorators.

The css file linked to my react component has:

@import './another.css'

Now, when I run jest I get:

SyntaxError: /Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (2:1):

Then I went to my .babelrc and added:

   "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-decorators", { "legacy": true },
      ]
    }

Running jest again I get

[BABEL] /Users/thiagofacchini/Documents/atomix/src/library/protons/Animator/tests/index.test.js: The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option.

(While processing:/Users/thiagofacchini/Documents/atomix/node_modules/@babel/plugin-proposal-decorators/lib/index.js")

Also tried to change my .babelrc to:

  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true ,"legacy": true },
      ]
    }
  }

But get exactly the same error.

My package.json looks like:

"@babel/core": "^7.3.4",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@logux/eslint-config": "^27.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",

NOTE: The error is just happening on JEST, my development build works fine.

I googled the hell but I simply cannot understand what's going on. Maybe something with versions? I'd appreciate any help.

Michael Knight Michael Knight · Accepted Answer · 2019-03-04T06:58:20

When you run your app in development build the build process is taken care of by webpack/parcel/whichever tool you're using.

These tools allow you to (via the use of plugins) do thing like import css into javascript and then eventually spit it back out as css at the appropriate time. This is not a native feature of javascript.

Jest runs on node js which doesn't have all of the features of webpack and cannot parse raw css etc.

So when you had the error "SyntaxError: /Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (2:1):"

this is actually nodejs trying to parse the css as javascript! You can read more about what it though you were doing here https://www.sitepoint.com/javascript-decorators-what-they-are/

So how do you manage css in your jest environment?

in your jest configuration you set it up so that you don't import the css and instead you import a blank module.

first npm install identity-obj-proxy

then add the following to your jest.config.js

moduleNameMapper: {
    "\\.css$": "identity-obj-proxy",
    "^lodash-es$": "lodash"
},

Jest fails when CSS uses @import

1 Answers