Jest测试报错：无法找到Button.module.scss模块求解决方案

执行npm run unit Button.test.ts命令后出现以下错误：

Test suite failed to run
Cannot find module '../Button.module.scss' from 'src/widgets/Button/ui/Button.tsx'
Require stack:
src/widgets/Button/ui/Button.tsx
src/widgets/Button/ui/Button.test.tsx

已尝试在Jest.config.ts中添加modulePaths配置，但问题未解决。求问题原因及修复方法，可提供更多信息。

当前配置文件 #

tsconfig.json #

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "ESNext",
    "target": "es5",
    "jsx": "react-jsx",
    "allowJs": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "*": ["./src/*"]
    },
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS",
      "esm": true
    }
  },
  "include": ["./config/jest/setupTest.ts"]
}

global.d.ts #

declare module '*.scss' {
  interface IClassNames {
    [className: string]: string;
  }
  const classNames: IClassNames;
  export = classNames;
}

declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.svg' {
  import React from 'react';

  const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
  export default SVG;
}

declare const __IS__DEV__: boolean;

Jest.config.ts #

export default {
  preset: 'ts-jest/presets/default-esm', // or other ESM presets
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1'
  },
  transform: {
    // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
    // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        useESM: true
      }
    ]
  },
  clearMocks: true,
  testEnvironment: 'jsdom',
  coveragePathIgnorePatterns: ['\\\\node_modules\\\\'],
  moduleFileExtensions: [
    'js',
    'jsx',
    'ts',
    'tsx',
    'json',
    'node'
  ],
  moduleDirectories: ['node_modules'],
  modulePaths: ['<rootDir>src'],
  testMatch: ['<rootDir>src/**/*(*.)@(spec|test).[tj]s?(x)'],
  rootDir: '../../',
  setupFilesAfterEnv: ['<rootDir>config/jest/setupTest.ts']
}

问题原因 #

Jest 默认不支持解析 SCSS 这类样式文件，当测试代码导入 SCSS 模块时，Jest 无法识别并处理该文件，导致模块找不到错误。此外当前 Jest 配置缺少对 SCSS 文件的映射规则，虽然 TypeScript 有类型声明，但 Jest 运行时无法识别这些文件的导出结构。

修复步骤 #

1. 安装依赖包
   安装identity-obj-proxy，它可以模拟 CSS 模块的导出结构，让 Jest 能正确解析样式模块：

   npm install identity-obj-proxy --save-dev
   

2. 修改 Jest 配置
   在Jest.config.ts的moduleNameMapper中添加 SCSS 模块的映射规则：

   moduleNameMapper: {
     '^(\\.{1,2}/.*)\\.js$': '$1',
     '\\.module\\.scss$': 'identity-obj-proxy'
   },
   

   这条规则会告诉 Jest，所有.module.scss结尾的文件都用identity-obj-proxy处理，它会返回与原类名一致的对象，满足组件对样式类的引用需求。

3. 验证根目录配置（可选）
   确认rootDir设置是否正确，确保<rootDir>src指向项目实际的 src 目录。如果Jest.config.ts位于config/jest/下，rootDir: '../../'通常是正确的，但可以根据项目结构调整。

4. 重新运行测试
   执行测试命令验证修复效果：

   npm run unit Button.test.ts
   

补充说明 #

如果项目中存在全局 SCSS 文件（非模块形式），可以在moduleNameMapper中添加额外规则：

'\\.scss$': '<rootDir>config/jest/mockStyle.ts'

然后创建mockStyle.ts文件，内容为空即可：

export {};

内容的提问来源于stack exchange，提问作者Максим Дмитриевич