Jest 无法加载 Primeeng css 文件

问题描述

我使用 Jest 版本 26.6.3 来测试 Angular 组件.使用 Primeng 的复选框组件 的任何组件的单元测试在 compileComponents 步骤期间失败错误无法加载 checkbox.css":

I'm using Jest version 26.6.3 to test Angular components. The unit tests for any components that use Primeng's checkbox component fail during the compileComponents step with the error "Failed to load 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]，没有任何变化.

There are no files in my codebase named checkbox.css and no references to it anywhere either, so I'm assuming the css file is from Primeng. I've tried including schemas: [NO_ERRORS_SCHEMA] in the TestBed.configureTestingModule options, with no changes.

可能导致此错误的原因是什么?我将在下面包含一些相关文件:

What might be causing this error? I'll include some relevant files below:

这是失败的完整测试功能

This is the full test function that fails

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 文件:

Here's the jest.config.js file:

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 文件

And here's the tsconfig.spec.json file

{
  "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"]
}

推荐答案

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

It looks like this issue is caused by Primeng components failing to load css files specified in the styleUrls of the component decorator when tests run. I was able to resolve this by adding the following code inside the beforeEach function and before calling TestBed.configureTestingModule:

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

因为在我的一些测试中多个 Primeeng 组件导致了这个错误，我最终将 TestBed.overrideComponent 调用拉入了一个辅助函数:

Because multiple Primeng components were causing this error in some of my tests, I eventually pulled the TestBed.overrideComponent call into a helper function:

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();

这篇关于Jest 无法加载 Primeeng css 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！