Jest 无法加载 Primeng css 文件

Question

我正在使用 Jest 版本 26.6.3 来测试 Angular 组件。使用 Primeng's checkbox component 的任何组件的单元测试在 compileComponents 步骤中失败，并出现错误“无法加载 checkbox.css”：

Failed: "Failed to load checkbox.css"

       7 |
       8 | describe('CheckboxComponent', () => {
    >  9 |   beforeEach(async () => {
         |   ^
      10 |     await TestBed.configureTestingModule({
      11 |       imports: [CheckboxModule],
      12 |       declarations: [CheckboxComponent, FieldLabelComponent],

      at Env.beforeEach (node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:46:24)
      at context.<computed> (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4309:39)
      at Suite.<anonymous> (src/app/@shared/forms/checkbox/checkbox.component.spec.ts:9:3)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at Suite.<anonymous> (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4227:33)

我的代码库中没有名为 checkbox.css 的文件，也没有在任何地方引用它，所以我假设 css 文件来自 Primeng。我尝试在TestBed.configureTestingModule 选项中包含schemas: [NO_ERRORS_SCHEMA]，但没有任何更改。

什么可能导致此错误？我将在下面包含一些相关文件：

这是失败的完整测试功能

import { TestBed } from '@angular/core/testing';
import { FormControl } from '@angular/forms';
import { CheckboxModule } from 'primeng/checkbox';
import { createComponent, getControlDisplayValue } from 'src/tests/test-utils';
import { FieldLabelComponent } from '../form-field/field-label/field-label.component';
import { CheckboxComponent } from './checkbox.component';

describe('CheckboxComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CheckboxModule],
      declarations: [CheckboxComponent, FieldLabelComponent],
    }).compileComponents();
  });

这是组件的模板：

<p-checkbox [inputId]="inputId" [formControl]="control" [binary]="true" [class.small-checkbox]="small"></p-checkbox>
<label [for]="inputId" [class.small-label]="small">
  <app-field-label [label]="label" [required]="required" [extraSmall]="small"></app-field-label>
</label>

这是 jest.config.js 文件：

module.exports = {
  preset: "jest-preset-angular",
  roots: ["src"],
  coverageDirectory: "reports",
  setupFilesAfterEnv: ["<rootDir>/src/setup-jest.ts"],
  moduleNameMapper: {
    "@app/(.*)": "<rootDir>/src/app/$1",
    "@core": ["<rootDir>/src/app/@core"],
    "@core/(.*)": ["<rootDir>/src/app/@core/$1"],
    "@shared": ["<rootDir>/src/app/@shared"],
    "@shared/(.*)": ["<rootDir>/src/app/@shared/$1"],
    "@env": "<rootDir>/src/environments/environment",
  },
  globals: {
    "ts-jest": {
      allowSyntheticDefaultImports: true,
      tsconfig: "<rootDir>/tsconfig.spec.json",
    },
  },
  // Do not ignore librairies such as ionic, ionic-native or bootstrap to transform them during unit testing.
  transformIgnorePatterns: ["node_modules/(?!(jest-test|@ng-bootstrap))"],
};

这是 tsconfig.spec.json 文件

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "allowJs": true,
    "types": ["jest", "node"]
  },
  "files": ["src/setup-jest.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.mock.ts", "src/**/*.d.ts"]
}

Answer 1

看起来这个问题是由于 Primeng 组件在测试运行时未能加载组件装饰器的styleUrls 中指定的 css 文件引起的。我可以通过在beforeEach 函数中添加以下代码并在调用TestBed.configureTestingModule 之前解决此问题：

TestBed.overrideComponent(Checkbox, { set: { styleUrls: [] } });

由于多个 Primeng 组件在我的一些测试中导致了这个错误，我最终将 TestBed.overrideComponent 调用拉到了一个辅助函数中：

export function removeStyleUrlsFrom(tokens: Type<any>[]): void {
  tokens.forEach((token) => TestBed.overrideComponent(token, { set: { styleUrls: [] } }));
}

可以这样使用：

beforeEach(async () => {
  removeStyleUrlsFrom([Checkbox, Calendar, Dropdown]);
  await TestBed.configureTestingModule({
    imports: [
      CheckboxModule,
      CalendarModule,
      DropdownModule,
    ],
    .....
  }).compileComponents();