https://github.com/mrkou47/jest-css-modules-processor
Implement import css during testing
https://github.com/mrkou47/jest-css-modules-processor
css-modules jest jest-plugin
Last synced: 9 months ago
JSON representation
Implement import css during testing
- Host: GitHub
- URL: https://github.com/mrkou47/jest-css-modules-processor
- Owner: MrKou47
- License: mit
- Created: 2018-07-10T11:27:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-23T12:54:09.000Z (over 2 years ago)
- Last Synced: 2025-04-11T12:23:20.524Z (10 months ago)
- Topics: css-modules, jest, jest-plugin
- Language: JavaScript
- Homepage:
- Size: 465 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/css-modules/css-modules-require-hook) and [jest-css-modules-transform](https://github.com/Connormiha/jest-css-modules-transform).
## Install
```sh
yarn add jest-css-modules-processor --dev
```
## Usage
Just add transform field for your jest config.
```json
{
"jest": {
"transform": {
".+\\.(css)$": "jest-css-modules-processor",
"^.+\\.jsx?$": "babel-jest"
},
}
}
```
## Config
You should add `jestCSSProcessor` field in your `package.json`.
```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`