jest-css-modules-processor

jest-css-modules-processor

You can use this module to realize import / require .css file when you run jest. And this module also support localIdentName😎!

Inspired by css-modules-require-hook and jest-css-modules-transform.

Install

yarn add jest-css-modules-processor --dev

Usage

Just add transform field for your jest config.

// package.json
{
  "jest": {
		"transform": {
			".+\\.(css)$": "@mtfe/jest-css-modules-processor",
			"^.+\\.jsx?$": "babel-jest"
		},
  }
}

Config

You should add jestCSSProcessor field in your package.json.

// package.json
{
  "jestCSSProcessor": {
    "generateScopedName": "[name]__[local]___[hash:base64:5]"
  }
}

option	description	required
camelCase	same as css-loader?cameCase	no
devMode	NODE_ENV === 'development'	no
processCss	process(transformedCSS, filename)	no
processOptions	http://api.postcss.org/global.html#processOptions	no
createImportedName	https://github.com/css-modules/postcss-modules-extract-imports/blob/master/src/index.js#L73	no
generateScopedName	for example [name]__[local]___[hash:base64:5]	no
mode	local or global	no
resolve	resolveOpts	no
rootDir	same as webpack context option	no

Usually, you just need to set the generateScopedName option. And it should same as localIndentName value which you setted in the webpack.config.js