Angular Karma 使用 CUSTOM_ELEMENTS_SCHEMA 测试超时测试 AppComponent

Posted 2023-02-19

【中文标题】Angular Karma 使用 CUSTOM_ELEMENTS_SCHEMA 测试超时测试 AppComponent

【英文标题】：Angular Karma tests timeout testing AppComponent with CUSTOM_ELEMENTS_SCHEMA

【发布时间】：2019-11-28 04:27:44

【问题描述】：

我正在向我的 Angular 项目添加一个应用程序组件测试，但在运行所有测试时突然发生超时：

[launcher]: Launching browsers headless with concurrency unlimited
 21% building 95/96 modules 1 active .../src/css/public.scss19 [launcher]: Starting browser ChromeHeadless
[HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket -d4Du6uXE65XhnZkAAAA with id 51932343
[HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Disconnected (0 times), because no message in 30000 ms.

我最近添加的测试 app.component.spec.ts：

...
describe('AppComponent', () => 
  beforeEach(async(() => 
    TestBed.configureTestingModule(
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [RouterTestingModule],
      declarations: [AppComponent],
      providers: [...],
    ).compileComponents();
  ));

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

);

没有进行任何测试。过了一会儿，我发现 CUSTOM_ELEMENTS_SCHEMA 导致了超时。现在，我的 app.component.html 中有一个自定义元素，这就是我添加架构的原因。删除架构（并从 html 中删除元素）可以解决问题。

为什么添加架构会导致 karma-headlessChrome 超时？ 另外，将自定义元素添加到应用程序组件是一种不好的做法吗？

--更新--

原来我导入了错误的项目：

import CUSTOM_ELEMENTS_SCHEMA from '@angular/compiler/src/core';

应该是

import CUSTOM_ELEMENTS_SCHEMA from '@angular/core';

【问题讨论】：

已修复，请参阅更新

【参考方案1】：

原来我导入了错误的项目：

import CUSTOM_ELEMENTS_SCHEMA from '@angular/compiler/src/core';

应该是

import CUSTOM_ELEMENTS_SCHEMA from '@angular/core';