Jest 无法加载 Primeng css 文件

Posted 2023-03-08

【中文标题】Jest 无法加载 Primeng css 文件

【英文标题】：Jest fails to load Primeng css files

【发布时间】：2021-11-15 06:31:46

【问题描述】：

我正在使用 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"]

【问题讨论】：

嗨，你能找到解决办法吗？谢谢。

嘿，这里也一样 :(

【参考方案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();

【讨论】：

感谢您分享您的解决方法。我认为这应该作为一个问题发布（不知道是在primeng还是在开玩笑），以便可以正确修复。

感谢您的回复 :) 经过一些研究，问题是主要组件没有以适合测试的格式编译。你能试试这个吗：在你的 package.json => "test": "ngcc && jest",