Registry / testing / jest-css-modules-transform

jest-css-modules-transform

library4.4.2jsnpmunverified

A Jest preprocessor that transforms CSS, SCSS, SASS, Less, and Stylus files into JavaScript objects mimicking Webpack's css-loader module output. Version 4.4.2 is current stable; released occasionally with bug fixes and minor features. Unlike simple identity mock objects (e.g., `{}`), this generates correct class name mappings (as-is, camelCase, dashes), supports PostCSS with custom plugins, and allows prepending variables or mixins. It provides configuration via `jest-css-modules-transform-config.js` for per-preprocessor options, making it ideal for visual regression testing or component testing where real class names matter.

testing

npm install jest-css-modules-transform

github ↗package ↗

INSTALL

IMPORT

SIG · JEST-CSS-MODULES-T

jest-css-modules-transform

testingjavascriptv4.4.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ module.exports = require('jest-css-modules-transform'); // or in Jest config as string

This package is a Jest transform, not imported in test files. Configure in Jest's 'transform' option as a string.

process

✓ In jest-css-modules-transform-config.js: module.exports = { ... };

Options are exported from a separate config file, not passed to the transform directly.

Shows basic setup for Jest transform configuration and optional config file for custom CSS module output style.

// jest.config.js module.exports = { transform: { '^.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform', }, }; // Optionally create jest-css-modules-transform-config.js in project root // to customize preprocessor options: // jest-css-modules-transform-config.js module.exports = { cssLoaderConfig: { exportLocalsStyle: 'camelCase', }, postcssConfig: { plugins: [require('autoprefixer')], }, prepend: ['src/variables.scss'], }; // In your test file, import CSS as usual: import styles from './styles.css'; expect(styles.myClass).toBeDefined();

Debug

Known issues

gotchaOptions file must be named exactly 'jest-css-modules-transform-config.js' and located in project root (where package.json is).

fix

Rename config file or move to root directory.

affects: >=1.0.0

gotchaPostCSS processing only applies to .css, .pcss, .postcss files; other preprocessors (scss, less) are handled by their respective modules.

fix

Ensure postcss.config.js is in root or use postcssConfig in jest-css-modules-transform-config.js for non-.css files.

affects: >=1.0.0

breakingNode.js <10 is not supported; package uses modern JavaScript features.

fix

Upgrade Node to version 10 or higher.

affects: >=4.0.0

gotchaThe 'sass' module is preferred over 'node-sass' for scss processing; if both exist, 'sass' is used unless sassModuleName is set.

fix

Install 'sass' as a devDependency or set sassModuleName: 'node-sass' in config.

affects: >=3.0.0

deprecatedOption 'localIdentName' from webpack is not supported; use exportLocalsStyle instead.

fix

Use cssLoaderConfig.exportLocalsStyle to control class name format.

affects: >=4.0.0

Errors

Common errors & fixes

Cannot find module 'sass' or 'node-sass'

Missing dependency for processing scss files.

fix

Run 'npm install sass --save-dev' or 'npm install node-sass --save-dev'.

TypeError: Cannot read property 'includes' of undefined

Options file exports a function instead of an object.

fix

Ensure 'jest-css-modules-transform-config.js' exports a plain object.

Module parse failed: Unexpected token (1:0) in file styles.css

Jest transform mapping missing for CSS extension.

fix

Add '.+\.(css|styl|less|sass|scss)$' to transform in Jest config.

Upgrade

Version history

4.4.2latest on npm

Audit

Dependencies

sassoptionalRequired for SCSS/SASS processing if not using node-sass

node-sassoptionalAlternative for SCSS/SASS processing if sass is not available

lessoptionalRequired for Less file processing

stylusoptionalRequired for Stylus file processing

postcssoptionalRequired if using PostCSS plugins

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/Connormiha/jest-css-modules-transform ↗

packagehttps://www.npmjs.com/package/jest-css-modules-transform ↗