Repository navigation
css-modules-require-hook and jest #109
Description
#I have this setup in my jest config.
moduleNameMapper: {
'^.+\\.(scss)$': '<rootDir>/test/utils/css-hooks.js'
},const hook = require('css-modules-require-hook');
const sass = require('node-sass');
hook({
extensions: [
'.scss'
],
preprocessCss: (data, file) => {
return sass.renderSync({ // eslint-disable-line no-sync
data,
file
}).css;
}
});When I use mocha this resolves to _styles_header__styles which is something I can test against.
// mocha.opts
--require ./test/utils/css-hooks.jsHowever, in jest this returns undefined.
Activity
mightyaleksey commentedon Jan 13, 2018
There is a good solution for jest in official docs: http://facebook.github.io/jest/docs/en/webpack.html#mocking-css-modules
It replaces all the css files with Proxy object, so you'll be able to access all the keys without any computations.
LukeChannings commentedon Jan 17, 2018
This is only a solution in that it allows tests not to fail.
Some people (like myself) actually want to write tests based on the computed css-modules class names.
Using this actually changes the behaviour of a React component where
classNameis based on props,classNamewill be undefined when mocking CSS, but not when actually importing the CSS.I have been trying to find a solution to this that actually imports the CSS via CSS Modules. I have a documentation generation script that uses
css-modules-require-hookand it works perfectly. Importing and hookingcss-modules-require-hookinjest/setup.jsor throughjest.config.jshas not been possible so far.pascalduez commentedon Feb 25, 2018
Hi,
I've been using
babel-plugin-css-modules-transformto apply the same transform for both build and unit test steps.Might be a solution.
pragmaticivan commentedon Jul 13, 2018
Hi there, any progress with that?