jest-preset-angular在Angular 13 ESM模块环境下无法正常运行问题咨询

核心原因 #

Angular13开始全面采用Ivy编译模式、默认ESM输出，jest-preset-angular next版对默认配置做了大量调整，你新版本配置存在规则冲突、关键参数缺失的问题，导致模块解析失败。 #

具体调整步骤 #

• 移除冗余的ngcc处理器导入：Angular13及以上版本的依赖包均为Ivy预编译产物，无需再执行ngcc处理，直接删除require('jest-preset-angular/ngcc-jest-processor')这行代码即可。
• 修正transformIgnorePatterns规则：原有规则中.*\.mjs$的匹配逻辑优先级过高，会干扰@igniteui包的解析，调整为仅放开@igniteui和tslib的转换限制即可。
• 补全ts-jest全局配置：新版本配置中丢失了旧版本里的ts-jest参数，导致ESM解析逻辑未生效，需要重新显式配置useESM、tsconfig路径等参数。
• 移除冗余的自定义配置：你手动添加的transform、resolver字段会覆盖预设内置的正确配置，没有特殊需求直接删除即可。

修改后的完整配置 #

module.exports = {
  preset: 'jest-preset-angular/presets/defaults-esm',
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  globals: {
    'ts-jest': {
      useESM: true,
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.html$'
    }
  },
  testTimeout: 20000,
  transformIgnorePatterns: [
    "node_modules/(?!(@igniteui|tslib)/)"
  ],
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
}

生效验证 #

配置修改完成后，先执行npx jest --clearCache清除jest缓存，再运行测试命令即可正常识别@igniteui模块。

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