{"id":20149,"library":"jest-css-modules-transform","title":"jest-css-modules-transform","description":"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.","status":"active","version":"4.4.2","language":"javascript","source_language":"en","source_url":"git://github.com/Connormiha/jest-css-modules-transform","tags":["javascript","jest","webpack","css-import","transform","preprocessor","class","classname","css"],"install":[{"cmd":"npm install jest-css-modules-transform","lang":"bash","label":"npm"},{"cmd":"yarn add jest-css-modules-transform","lang":"bash","label":"yarn"},{"cmd":"pnpm add jest-css-modules-transform","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for SCSS/SASS processing if not using node-sass","package":"sass","optional":true},{"reason":"Alternative for SCSS/SASS processing if sass is not available","package":"node-sass","optional":true},{"reason":"Required for Less file processing","package":"less","optional":true},{"reason":"Required for Stylus file processing","package":"stylus","optional":true},{"reason":"Required if using PostCSS plugins","package":"postcss","optional":true}],"imports":[{"note":"This package is a Jest transform, not imported in test files. Configure in Jest's 'transform' option as a string.","wrong":"","symbol":"default","correct":"module.exports = require('jest-css-modules-transform'); // or in Jest config as string"},{"note":"Options are exported from a separate config file, not passed to the transform directly.","wrong":"","symbol":"process","correct":"In jest-css-modules-transform-config.js: module.exports = { ... };"}],"quickstart":{"code":"// jest.config.js\nmodule.exports = {\n  transform: {\n    '^.+\\\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',\n  },\n};\n\n// Optionally create jest-css-modules-transform-config.js in project root\n// to customize preprocessor options:\n// jest-css-modules-transform-config.js\nmodule.exports = {\n  cssLoaderConfig: {\n    exportLocalsStyle: 'camelCase',\n  },\n  postcssConfig: {\n    plugins: [require('autoprefixer')],\n  },\n  prepend: ['src/variables.scss'],\n};\n\n// In your test file, import CSS as usual:\nimport styles from './styles.css';\nexpect(styles.myClass).toBeDefined();","lang":"javascript","description":"Shows basic setup for Jest transform configuration and optional config file for custom CSS module output style."},"warnings":[{"fix":"Rename config file or move to root directory.","message":"Options file must be named exactly 'jest-css-modules-transform-config.js' and located in project root (where package.json is).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure postcss.config.js is in root or use postcssConfig in jest-css-modules-transform-config.js for non-.css files.","message":"PostCSS processing only applies to .css, .pcss, .postcss files; other preprocessors (scss, less) are handled by their respective modules.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Node to version 10 or higher.","message":"Node.js <10 is not supported; package uses modern JavaScript features.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Install 'sass' as a devDependency or set sassModuleName: 'node-sass' in config.","message":"The 'sass' module is preferred over 'node-sass' for scss processing; if both exist, 'sass' is used unless sassModuleName is set.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use cssLoaderConfig.exportLocalsStyle to control class name format.","message":"Option 'localIdentName' from webpack is not supported; use exportLocalsStyle instead.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install sass --save-dev' or 'npm install node-sass --save-dev'.","cause":"Missing dependency for processing scss files.","error":"Cannot find module 'sass' or 'node-sass'"},{"fix":"Ensure 'jest-css-modules-transform-config.js' exports a plain object.","cause":"Options file exports a function instead of an object.","error":"TypeError: Cannot read property 'includes' of undefined"},{"fix":"Add '.+\\.(css|styl|less|sass|scss)$' to transform in Jest config.","cause":"Jest transform mapping missing for CSS extension.","error":"Module parse failed: Unexpected token (1:0) in file styles.css"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}