Angular项目中Jest无法解析模块别名的问题求助

针对你在Angular 9项目中配置Jest时遇到的Cannot find module '@app/<dir>/<myFile>.<extension>'错误，以下是几个关键修复步骤：

1. 移除jest.config.js中冗余的transform配置 #

jest-preset-angular已经内置了适配Angular TypeScript文件的transform规则，手动添加的transform配置会覆盖预设的正确规则，导致别名解析失效。修改后的jest.config.js如下：

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['./jest.setup.ts'],
  verbose: true,
  roots: ['<rootDir>/src/'],
  moduleNameMapper: {
    '@app/(.*)': '<rootDir>/src/app/$1',
    '@env/(.*)': '<rootDir>/src/environments/$1' // 补充@env的映射，和tsconfig保持一致
  },
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.json', // 明确指定使用项目的tsconfig配置
      stringifyContentPathRegex: '\\.html$'
    }
  }
};

2. 让ts-jest读取tsconfig的paths配置 #

在globals.ts-jest中指定tsconfig路径，确保ts-jest能读取到tsconfig.json里的baseUrl和paths规则，让测试时的别名映射和项目编译时保持一致。

3. 确认测试命令使用Angular builders #

检查package.json中的测试命令，确保通过@angular-builders/jest运行Jest，而不是直接调用jest命令：

"scripts": {
  "test": "ng test --watch=false",
  "test:watch": "ng test"
}

依赖@angular-builders/jest时，用ng test命令才能正确集成Angular的项目配置。

4. 清理Jest缓存后重新测试 #

Jest的缓存可能保留旧配置，运行以下命令清理缓存后再执行测试：

npx jest --clearCache
npm run test

如果以上步骤仍未解决问题，可以排查：

• 确认tsconfig.json的baseUrl确实指向src目录，@app/*对应的app/*路径真实存在
• 当前jest-preset-angular@8.3.2、ts-jest@26.5.2和Angular 9版本兼容，无需升级Angular

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