Angular TypeScript Jest单元测试未因未知元素/缺失依赖失败的配置问询

核心原因 #

Jest测试通过但构建失败，通常是因为测试环境未启用Angular模板的严格检查，或是测试模块中使用NO_ERRORS_SCHEMA忽略了未知组件/指令的错误。

解决方案 #

1. 移除NO_ERRORS_SCHEMA #

检查所有组件测试的configureTestingModule配置，若存在schemas: [NO_ERRORS_SCHEMA]立即移除。该配置会让Angular忽略模板中的未知元素、属性和指令，导致测试无法检测到漏导入的依赖。

错误配置示例：

TestBed.configureTestingModule({
  declarations: [YourComponent],
  schemas: [NO_ERRORS_SCHEMA] // 删除此行
});

2. 启用严格模板编译 #

修改tsconfig.spec.json，开启Angular编译器的严格模板检查选项，让测试环境的编译规则与生产构建保持一致：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "strictNullChecks": true,
    "strictTemplates": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInputTypes": true,
    "strictAttributeTypes": true,
    "strictOutputEventTypes": true
  }
}

3. 调整Jest配置确保严格编译 #

在jest.config.js中指定使用上述tsconfig.spec.json，并确保ts-jest启用严格模式：

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      isolatedModules: true,
      astTransformers: {
        before: [
          'jest-preset-angular/build/InlineFilesTransformer',
          'jest-preset-angular/build/StripStylesTransformer'
        ]
      }
    }
  },
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
  moduleFileExtensions: ['ts', 'html', 'js', 'json']
};

4. 测试模块显式导入依赖 #

在组件测试的configureTestingModule中，必须显式导入用到的模块（如MatPaginatorModule、NgxMaskModule）。启用严格检查后，若漏导入依赖，Jest会直接抛出错误导致测试失败，提前发现问题。

正确配置示例：

TestBed.configureTestingModule({
  declarations: [YourComponent],
  imports: [MatPaginatorModule, NgxMaskModule]
});

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