升级Angular 14+Jest28+Nx后Jest测试无法找到apollo-angular模块

以下是几个针对性的排查和修复步骤：

1. 更新jest-preset-angular到兼容版本 #

Angular 14需要搭配jest-preset-angular v12及以上版本（可参考官方兼容矩阵确认）。执行安装命令：

npm install jest-preset-angular@latest --save-dev
# 或使用yarn
yarn add jest-preset-angular@latest --dev

2. 让Jest正确转换apollo-angular模块 #

如果apollo-angular以ESM格式发布，Jest默认可能会跳过转换它。修改libs/shared/ui-components/jest.config.ts中的transform配置，明确指定转换apollo-angular：

transform: {
  '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
  'apollo-angular.*': 'jest-preset-angular' // 显式转换apollo-angular相关文件
},

3. 检查tsconfig.spec.json的类型配置 #

确保libs/shared/ui-components/tsconfig.spec.json的types数组包含必要的类型（如果需要的话）：

{
  "compilerOptions": {
    "types": ["jest", "apollo-angular"]
  }
}

4. 修复模块路径映射 #

有时候自动生成的路径映射可能干扰node_modules的解析。在moduleNameMapper中添加apollo-angular的 fallback：

moduleNameMapper: {
  ...pathsToModuleNameMapper(paths, { prefix: '<rootDir>/../../..' }),
  'apollo-angular': '<rootDir>/../../../node_modules/apollo-angular'
},

5. 清除Jest缓存 #

缓存的模块解析结果可能导致问题，执行命令清除缓存：

npx jest --clearCache

额外检查点 #

• 确认apollo-angular及其依赖（如@apollo/client、graphql）的版本与Angular 14兼容；
• 检查jest-setup.ts是否包含jest-preset-angular必需的初始化代码，比如import 'jest-preset-angular/setup-jest';（v12+版本需要）。

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