使用Jest测试React组件时导入SCSS文件出现TS2307错误求助

问题描述 #

测试React+TypeScript应用的页面组件时，Jest抛出TS2307错误，提示无法找到SCSS模块，报错示例：

● 测试套件运行失败
src/pages/unregistered/pep-login/login/login-layout.tsx:13:31 - error TS2307: Cannot find module '../../landing-new.scss'.
13 import * as stylesLayout from '../../landing-new.scss';
~~~~~~~~~~~~~~~~~~~~~~~~

FAIL src/pages/adu/dashboard/application-metrics/test/totalFailed.test.tsx
● 测试套件运行失败
src/pages/adu/dashboard/application-metrics/total-failed-api-list.tsx:5:31 - error TS2307: Cannot find module './application-metrics.scss'.
5 import * as stylesLayout from './application-metrics.scss';

当前package.json中的Jest配置：

"jest": {
  "collectCoverage": true,
  "coverageDirectory": "target/testCoverage",
  "collectCoverageFrom": [
    "src/**/*.{ts,tsx}"
  ],
  "setupFiles": [
    "/config/polyfills.js"
  ],
  "testPathIgnorePatterns": [
    "/\\[/\\]"
  ],
  "testEnvironment": "node",
  "testURL": "http://localhost",
  "transform": {
    ".(ts|tsx)": "/node_modules/ts-jest/preprocessor.js",
    ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
  },
  "transformIgnorePatterns": [
    "[/\\]node_modules[/\\].+\\.(js|jsx)$"
  ],
  "moduleNameMapper": {
    "^reac-native$": "react-native-web"
  },
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"
}

解决方案 #

1. 添加SCSS模块的TypeScript类型声明 #

TypeScript默认不识别SCSS模块，需手动添加类型声明：

• 在项目src目录下创建typings/styles.d.ts（或任意.d.ts文件）
• 写入以下内容：

declare module '*.scss' {
  const styles: Record<string, string>;
  export = styles;
}

• 确保tsconfig.json的include数组包含该类型文件，示例：

"include": ["src/**/*"]

2. 优化Jest的模块映射与转换配置 #

调整package.json中的Jest配置，修复模块匹配问题：

• 修正transform中的正则表达式（添加转义符，用<rootDir>变量确保路径正确）
• 在moduleNameMapper中添加SCSS模块映射，推荐使用identity-obj-proxy（轻量且适配CSS模块测试场景）

修改后的Jest配置片段：

"jest": {
  // ...其他原有配置
  "transform": {
    "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
    "^.+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
  },
  "moduleNameMapper": {
    "^reac-native$": "react-native-web",
    "^.+\\.(css|scss)$": "identity-obj-proxy"
  },
  // ...其他原有配置
}

• 使用identity-obj-proxy需先安装依赖：

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

3. 检查依赖与路径正确性 #

• 确保jest-transform-css已安装：

npm install jest-transform-css --save-dev

• 检查setupFiles中的/config/polyfills.js路径是否正确，建议改用<rootDir>变量，比如<rootDir>/config/polyfills.js

内容的提问来源于stack exchange，提问作者Jyoti