jest-css-modules-transform

Preprocessor css modules for Jest test framework

This preprocessor converts css files in modules like Webpack. If we have css files

.class1, .class2, .class3 {
    display: block;
}

Webpack will transfrom it to object.

{
    class1: 'class1', //value may be different. It depends of localIndentName property
    class2: 'class2',
    class3: 'class3',
}

In testing you need to mock all css modules to aviod exception. But use pure object {} for mocking is bad idea, because it makes wrong classNames in components. This preprocessor makes correct modules as if Webpack did.

Usage

In Jest config add option

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

or

"transform": {
  ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
},

It supports pure CSS, SCSS, SASS, STYLUS and LESS.

For PostCSS

For .css, .pcss, .postcss files used postcss.config.js from root folder(if file exist of course).
For tests you can rewrite your existed postcss.config.js. See options.

Options

You can save preproccessor options in file jest-css-modules-transform-config.js in root of your project(Where is the file package.json). You can pass options for your preprocessors.

example:

const path = require('path');  
const additionalResolvePath = path.resolve(__dirname, 'src', 'additional_modules');

module.exports = {
    sassConfig: {
        includePaths: [additionalResolvePath],
        precision: 5,
    },
    lessConfig: {
        paths: [additionalResolvePath],
    },
    stylusConfig: {
        paths: [additionalResolvePath],
    },
    postcssConfig: {
        plugins: [
            require('autoprefixer')({
                browsers: ['Chrome 68', 'Firefox 62', 'Safari 12']
            })
        ]
    },
};

For all preprocessor options see offical documentations for Sass, Less, Stylus.

cssLoaderConfig

exportLocalsStyle

Webpack's cssLoader has option exportLocalsStyle.

// file jest-css-modules-transform-config.js
module.exports = {
   cssLoaderConfig: {
        exportLocalsStyle: 'camelCase'
   }
};

then this css code

    .foo__bar{color: red;}
    .foo__bar2{color: red;}

converted to

    {
        foo__bar: 'foo__bar',
        fooBar: 'foo__bar',
        foo__bar2: 'foo__bar2',
        fooBar: 'foo__bar2',
    }

Available values camelCase, camelCaseOnly, dashes, dashesOnly, asIs(by default)

prepend

Type: string, Function, Array<string | Function>
Default: null

Pass urls for prepend(before file content) to transformed files.
Useful in a situation where the module uses variables or mixins without explicit import.

For example you have vars in file, but without implicit import. You can prepend file with sass variables before convert module.

injectIntoDOM

Type: boolean Default: false

Inject the generated CSS into the head of the document.

This option could be useful for visual regression testing, where the output dom has the styles applied to it.

sassModuleName

Type: string Default: null

The default nodejs module for sass/scss files is sass. If not found in node_modules, then node-sass. You can define any another module.

Example with array of paths

// file jest-css-modules-transform-config.js
module.exports = {
   prepend: [
       'some/url/vars.scss',
       'some/url/theme.scss',
   ],
};

Example with single string

// file jest-css-modules-transform-config.js
module.exports = {
   prepend: 'some/url/vars.scss',
};

Example with custom function

// file jest-css-modules-transform-config.js
module.exports = {
   prepend: (filepath) => {
       if (filepath.includes('components')) {
           return [
               'components/vars.scss',
               'components2/vars.scss',
           ];
       }

       return [
            'common/vars.scss',
            'common/vars2.scss',
       ];
   },
};

It works with any preprocessors(Sass, Less, Styles, PostCSS, pure CSS)

Custom config path

By default option plugin's config file is jest-css-modules-transform-config.js from root. For specify custom path just add env JEST_CSS_MODULES_TRANSFORM_CONFIG. For example:

JEST_CSS_MODULES_TRANSFORM_CONFIG=custom-config-path npm test

or

JEST_CSS_MODULES_TRANSFORM_CONFIG=custom-config-path yarn test

Install

npm i jest-css-modules-transform

4.4.2

Add support for camelCase var name for post css :export

4.4.1

Fix Jest 28 with injectIntoDOM

4.4.0

Add Jest 28 support

4.3.0

Add Jest 27 support

4.2.1

Fixed edge cases with injectIntoDOM and scpecial characters.

4.2.0

Added injectIntoDOM option to inject css into DOM/JSDOM. This can be useful if you check the getComputedStyle in tests.

4.1.0

For sass/scss files try to use sass module. If not found, then node-sass
Add optional sassModuleName to config.

4.0.2

Update postcss versions dependencies

4.0.1

Fix parse pseudo-classes :not, :is, :matches

4.0.0

Node 8 is no longer supported
Add prepend property for config.
Now posible define files for prepend(before main content) to each imported css module. Useful in a situation where the module uses variables or mixins without explicit import.

Example (cancat SASS vars for each module before transfromation)

// file jest-css-modules-transform-config.js
module.exports = {
   prepend: [
       'some/url/vars.scss',
       'some/url/theme.scss',
   ],
};

3.1.0

Add support for async plugins for Less and PostCSS

3.0.1

Fix skip parsing with selectors like .class1.class2.class3

3.0.0

Fix parsing inside @media and with unusual names like name@suffix

2.5.0

Add :export support

2.4.0

Add support for custom path for plugin's config path

2.3.0

Add property exportLocalsStyle (equivalent from css-loader))

2.2.0

Add compibility for some kind of imports

2.1.1

Add postcss config support

2.1.0

Allow sassrc.js

2.0.3

Use dict keys order like Webpack

2.0.2

Use postcss v7

2.0.1

Add support .pcss, .postcss extentions

2.0.0

Support nested selectors in pure css via postcss-nested.
Now invalid pure css throw parse error by postcss

1.1.0

Add optional config file jest-css-modules-transform-config.js

1.0.5

Fix parsing css with unclosed single/double quotes
Fix parsing css with pseudo elements and pseudo classes

1.0.4

Fix parsing css with comments

1.0.3

Fix "import" directive for less, sass, scss, stylus modules

1.0.2

Fix detect Windows filename path

1.0.0

Stable release