升级Angular 13后Jest单元测试报无ɵmod属性错误如何修复

故障根因 #

Angular 13 彻底移除了 View Engine 构建支持，所有官方包默认输出 Ivy 规范的 ESM 格式产物。即使将 Jest 升级到 27.4 版本，如果配套的 Angular 适配预设、模块转译规则没有同步适配，Jest 会错误解析 Angular 包的导出内容，读到 undefined 的模块引用，最终抛出 Importing undefined which does not have a ɵmod property 错误。

修复步骤 #

• 安装版本匹配的依赖适配包
  卸载旧版本的 Jest Angular 适配包，安装适配 Angular 13 的对应版本依赖，执行命令：

  npm uninstall @angular-builders/jest jest-preset-angular
  npm install --save-dev jest-preset-angular@12.2.3 @types/jest@27.4 ts-jest@27.1
  

  注意：jest-preset-angular@12.x 是专门适配 Angular 13 的版本线，不要安装更高版本，否则会出现版本不匹配问题。
• 更新 Jest 初始化配置
  替换项目根目录下 setup-jest.ts 的全部内容，仅保留以下初始化语句，删除旧版本中手动编写的 TestBed.initTestEnvironment 相关逻辑，新版预设已内置 Ivy 测试环境初始化能力，重复配置会触发模块读取异常：

  import 'jest-preset-angular/setup-jest';
  

• 修正 Jest 转译规则
  更新项目根目录下 jest.config.js 配置，重点调整 ESM 包转译白名单，确保 Angular 相关的 ESM 格式包会被 Jest 正确转译：

  module.exports = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
    testPathIgnorePatterns: ['/node_modules/', '/dist/'],
    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|@angular|rxjs)'],
    moduleNameMapper: {
      '^src/(.*)$': '<rootDir>/src/$1'
    }
  };
  

  该配置是触发报错的核心遗漏点：默认配置下 Jest 不会转译 node_modules 下的文件，直接按 CommonJS 规范解析 ESM 格式的 Angular 包，就会读到 undefined 的模块导出。
• 对齐 TypeScript 测试配置
  检查 tsconfig.spec.json 的编译选项，确保满足以下要求：
  • target 设置为 es2017 或更高版本
  • module 设置为 esnext
  • 开启 esModuleInterop: true
• 清缓存后验证
  所有配置修改完成后，删除 node_modules/.cache 缓存目录，重新执行 Jest 测试命令即可恢复正常运行。

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