Jest And Scss Variables

I'm using Jest in my project and got stuck on one test which contains SCSS variable. $grey-light: #C7C7C7; I get this Jest error: Jest encountered an unexpected token and it poi

Solution 1:

I ran into this as well and it was solved by using the identity-obj-proxy package:

https://github.com/keyz/identity-obj-proxy

Just follow the instructions in the Jest docs:

https://jestjs.io/docs/en/webpack#mocking-css-modules

And should run the tests with no issues regarding the .scss files import statements. All you have to do is include the jest configuration in your package.json file:

{"name":"...","version":"0.0.0","description":"...","main":"index.js","scripts":{"start":"webpack --config webpack.config.js","test":"jest"},"jest":{"moduleNameMapper":{"\\.(css|scss|less)$":"identity-obj-proxy"}},"keywords":[],"author":"Homer Jay","license":"MIT","devDependencies":{},"dependencies":{}}

And the .scss imports will work as expected and any variable or mixin won't throw an error.

Solution 2:

Sass helps you write more organized and maintainable code, but it's not a vaild css code, thus, browsers don't know how to read it.

scss files needs to be compiled into css, and you need to import and use the css files. For example, the parameter you define has the #C7C7C7 value. The compiler will replace that parameter with that value so the final css will only contain hard-coded values