将控制台错误检测为错误并使测试失败

Question

是否可以使用 karma runner 检测单元测试中的控制台错误并将单元测试用例标记为失败。在我当前的项目中，我进行了数百次测试，但项目并未处于干净状态。当我使用 ng test 运行单元测试时，我会收到数百甚至数千条控制台消息，例如

ERROR: ''mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'

但所有测试用例都成功通过。没有提示哪些测试用例会导致这些问题。我尝试通过将it( 替换为fit( 来手动逐步完成测试，检查每个测试并修复它，但时间太长了。我想让控制台日志中包含错误的每个测试都失败，就像可以在 E2E 测试中使用

afterEach(async () => {
  // Assert that there are no errors emitted from the browser
  const logs = await browser.manage().logs().get(logging.Type.BROWSER);
  expect(logs).not.toContain(jasmine.objectContaining({
    level: logging.Level.SEVERE,
  } as logging.Entry));
});

这样 CD/CI 管道就会失败，开发人员必须修复测试。

单元测试的配置是默认的。它是带有茉莉花和无头 Chrome 的业力跑步者。

我搜索了业力配置，但找不到。这甚至可以通过单元测试实现吗？如果可能的话，是否可以在一个地方进行配置而不涉及所有数百个测试文件？

要重现我的问题，请使用ng new sandbox 创建一个新的 Angular 项目。将app.component.ts 更改为

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<mat-icon></mat-icon>'
})
export class AppComponent  {
}

将app.component.spec.ts 更改为：

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

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

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

删除app.components.html 和app.component.css。运行ng test。

即使应用因未安装 Material 而无法运行，测试也不会失败。它通过但它打印错误日志。我得到了输出：

> ng test

⠋ Generating browser application bundles...21 04 2021 18:18:06.826:WARN [karma]: No captured browser, open http://localhost:9876/
21 04 2021 18:18:06.830:INFO [karma-server]: Karma v6.1.2 server started at http://localhost:9876/
21 04 2021 18:18:06.831:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
⠙ Generating browser application bundles (phase: building)...21 04 2021 18:18:06.835:INFO [launcher]: Starting browser Chrome
✔ Browser application bundle generation complete.
21 04 2021 18:18:09.656:WARN [karma]: No captured browser, open http://localhost:9876/
21 04 2021 18:18:09.696:INFO [Chrome 89.0.4389.114 (Linux x86_64)]: Connected on socket w7tUMYWxN3pJ5tdBAAAB with id 77883839
ERROR: 'NG0304: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 89.0.4389.114 (Linux x86_64): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR: 'NG0304: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
Chrome 89.0.4389.114 (Linux x86_64): Executed 1 of 1 SUCCESS (0.072 secs / 0.023 secs)
TOTAL: 1 SUCCESS

我希望这个测试失败。

Answer 1

有一个与您的问题相关的未解决问题： https://github.com/angular/angular-cli/issues/18177