Jest And Scss Variables
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
Post a Comment for "Jest And Scss Variables"