使用jest测试Angular组件报resolveComponentResources错误如何解决？

错误原因 #

该报错是Jest运行时未将组件中声明的templateUrl、styleUrls对应的外部资源内联编译到组件代码中，Angular测试运行时无法识别组件关联的外部资源导致的。

解决步骤 #

• 确认jest-preset-angular版本与当前项目的Angular主版本匹配，版本不兼容是此类问题的高发诱因。
• 检查jest配置文件（一般为jest.config.js或jest.config.ts）的核心配置，确保包含以下配置项：

  module.exports = {
    // 直接使用jest-preset-angular预设，无需额外自定义transform规则
    preset: 'jest-preset-angular',
    // 适配你自定义的.spec.jest.ts后缀的测试文件规则
    testMatch: ['**/?(*.)+(spec.jest|test).[tj]s?(x)'],
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
  }
  

• 检查根目录下的setup-jest.ts初始化文件，确保导入了预设的初始化代码：

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

配置调整完成后重新执行npm run test:jest即可正常运行测试用例。

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