Angular 16集成Jest测试时无法找到variables.scss的解决方案求助

我在现有项目中引入Angular对Jest的实验性支持（@angular-devkit/build-angular:jest）后，执行npm test时项目构建正常，但测试报错：

✘ [ERROR] Can't find stylesheet to import. ╷ 1 │ @import "_variables.scss";

尝试添加stylePreprocessorOptions配置（该配置仅适用于Jasmine构建器）无效，以下是几种可行的解决办法：

方法一：配置Jest的moduleNameMapper #

创建或修改项目根目录下的jest.config.js，通过moduleNameMapper映射SCSS文件路径，让Jest能正确识别导入的样式文件：

module.exports = {
  preset: 'jest-preset-angular',
  moduleNameMapper: {
    // 直接映射单个变量文件
    '^_variables\\.scss$': '<rootDir>/src/shared/_variables.scss',
    // 批量映射shared目录下所有SCSS文件（按需调整）
    '^@shared/(.*)\\.scss$': '<rootDir>/src/shared/$1.scss'
  },
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts']
};

注：Angular 16+版本的Jest预设通常为jest-preset-angular，确保配置与项目版本兼容。

方法二：全局导入样式变量文件 #

在测试初始化文件（如src/setup-jest.ts）中全局导入SCSS变量文件，确保所有测试用例都能访问到这些变量：

import './shared/_variables.scss';
// 其他测试初始化代码（如Zone.js相关配置）

同时在angular.json的test配置中指定该初始化文件：

"test": {
  "builder": "@angular-devkit/build-angular:jest",
  "options": {
    "polyfills": [
      "zone.js",
      "zone.js/testing"
    ],
    "tsConfig": "tsconfig.spec.json",
    "setupFilesAfterEnv": ["src/setup-jest.ts"]
  }
}

方法三：修改SCSS导入为相对路径 #

如果不想调整配置，可以直接将SCSS中的导入语句改为相对路径（根据当前文件位置调整层级）：

// 原导入语句
@import "_variables.scss";
// 修改为相对路径
@import "../shared/_variables.scss";

该方法直接但维护成本较高，适合样式文件引用较少的场景。

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