Jest 26.6.3测试Angular组件加载Primeng checkbox.css失败如何解决

• Jest默认无法解析CSS类资源文件：PrimeNG Checkbox组件内部自带对checkbox.css的引用，测试运行时Jest没有对应处理器处理CSS导入，直接抛出加载失败错误。
• transformIgnorePatterns配置不全：当前jest.config.js中的transformIgnorePatterns仅配置了不忽略@ng-bootstrap等少数包，primeng不在排除忽略列表内，属于node_modules下默认不被转译的包，其内部的样式导入语句不会被jest-preset-angular做兼容处理。
• NO_ERRORS_SCHEMA不生效的原因：该配置仅能屏蔽模板中未知标签、属性的报错，测试代码已经显式导入了CheckboxModule，模块内部的资源加载错误不在该配置的处理范围内。

方案1：调整Jest配置适配PrimeNG #

修改jest.config.js文件：

1. 调整transformIgnorePatterns，添加primeng相关包到不忽略列表：

transformIgnorePatterns: ["node_modules/(?!(jest-test|@ng-bootstrap|primeng|@primefaces))"],

2. 在moduleNameMapper中添加CSS文件的mock规则，跳过样式加载：

moduleNameMapper: {
  // 保留原有别名配置
  '^.+\\.(css|scss|less)$': 'jest-preset-angular/build/empty.js'
},

方案2：Mock第三方组件（更适合单元测试） #

单元测试仅校验自有组件逻辑时，不需要引入真实的PrimeNG模块，直接Mock p-checkbox组件即可：

// 在spec文件顶部添加Mock组件
import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'p-checkbox',
  template: ''
})
class MockCheckboxComponent {
  @Input() inputId: string;
  @Input() formControl: FormControl;
  @Input() binary: boolean;
}

// 后续TestBed配置移除CheckboxModule的导入，把MockCheckboxComponent加到declarations中
await TestBed.configureTestingModule({
  declarations: [CheckboxComponent, FieldLabelComponent, MockCheckboxComponent],
}).compileComponents();

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