jest-css-modules-transform

2019-10-10 admin

jest-css-modules-transform是什么

什么是jest-css-modules-transform,Jest's preprocessor for css, sass, less, stylus modules generated with Webpack

jest-css-modules-transform使用教程帮助文档

Build Status

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)$": "<rootDir>/node_modules/jest-css-modules-transform"
},

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

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)

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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77010.html

文章标题:jest-css-modules-transform

回到顶部