justinsisley / jest-css-modules

A Jest script processor that prevents CSS module parse errors.

Note: As of v2.0.0, this library is simply implementing identity-obj-proxy. The Jest documentation provides more details on using identity-obj-proxy to solve this problem directly, and I recommend that you use that library instead of this one.

Jest CSS Modules

A Jest script processor that prevents CSS module parse errors.

Installation

npm install -D jest-css-modules

Update your package.json file's jest configuration:

{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"
    }
  }
}

Now, imports such as import styles from './MyModule.css'; will pass through Jest without causing any pain.

Supports .css, .less, .scss, .sss, and .styl extensions.

Note: If you continue to experience CSS module parsing errors after installing and configuring this library, try running jest with the --no-cache flag. Read the Jest documentation on caching for more details.

jest-css-modules's Issues

Regex expression is incorrect

I'm no regex expert, so please correct me if I am wrong.

The current regex for me filtered out files names that ended in: myTest.spec.js. It was matching the .s part. I changed the regex to the following to make it work.

if (filename.match(/.*\.\(css\|less|scss|styl\)/)) {
   return '';
}

Missing LICENSE file

While package.json declares the license as ISC, there is no actual license file in the project.

README.md should be updated

● Deprecation Warning:

  Option "scriptPreprocessor" was replaced by "transform", which support multiple preprocessors.

  Jest now treats your current configuration as:
  {
    "transform": {".*": "<rootDir>/node_modules/jest-css-modules"}
  }

  Please update your configuration.

  Configuration Documentation:
  https://facebook.github.io/jest/docs/configuration.html

Upgrade babel-jest to ^9.0.0 or newer

Hello @justinsisley

Please upgrade babel-jest dependencies to ^9.0.0 or newer.

I got Unknow option: .babelrc.presets when running jest.

I have declared "babel-jest": "^9.0.0" in my devDependencies.

Best regards

Return generated class names

Instead of returning an empty string, the processor should be able to return an object with the class names generated. I believe all the heavy lifting can be passed onto css-modules/css-modules-require-hook for this.

Document usage of --no-cache after installing preprocessor.

People will generally first already have executed jest tests on a broken file before coming here and finding this project. They will then install the preprocessor, run again, but the test still fails.

Why? According to jest docs, you need to use the --no-cache flag when working with script preprocessors on files that have already been processed before. See: https://facebook.github.io/jest/docs/api.html#scriptpreprocessor-string

I think it would be very useful to document this as well.

repo link on package/npm is wrong

It's pointing to browserify ;)

Does not work with react-css-modules

After fixing #5 locally I am getting:

butler% npm test

> @ test /home/me/apps/frontend
> jest

 FAIL  library/paymentform.test.js
  ● paymentform › renders patterns without slashes

    "form-reactbuttons" CSS module is undefined.
      
      at exports.default (node_modules/react-css-modules/dist/generateAppendClassName.js:41:23)
      at linkElement (node_modules/react-css-modules/dist/linkClass.js:67:65)
      at node_modules/react-css-modules/dist/linkClass.js:59:24
      at mapSingleChildIntoContext (node_modules/react/lib/ReactChildren.js:108:26)
...

... which seems to make sense given that jest-css-modules skips loading of the css modules.

Am I missing something to make jest-css-modules work with react-css-modules?

TypeError: Jest: a transform must export a `process` function.

After installing the package and adding the transform, I'm getting a new error TypeError: Jest: a transform must export a process function. Not sure if this a breaking change introduced by a Jest upgrade? I ran using --no-cache

package.json

    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "jest-css-modules": "^2.1.0",
     ...
  "jest": {
    "transform": {
	  "^.+\\.js$": "babel-jest",
	  "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"

    }
  }

Validation Error on newer Jest

Validation Error:

  Option "transform" must be of type:
    object
  but instead received:
    string

It seems like Jest has updated something. I can't use this in package.json anymore

{
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/jest-css-modules",
  }
}