angular - 断言父组件存在于 Angular 单元测试中

Question

我有一个顶级组件 AppComponent在里面是 template它呈现 <child> 的属性页面上的元素。 (<child> 是另一个 Angular 组件)。

我是否需要告诉单元测试忽略 <child>元素或以某种方式声明它以进行测试？

我实际上并没有尝试测试 <child>在这个测试文件中，我将创建一个单独的单元测试文件来验证它的功能。

应用程序模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent, ChildComponent],
  imports: [BrowserModule]
})
export class AppModule { }

应用程序组件.ts

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

@Component({
  selector: 'app',
  template: '<child></child>'
})
export class AppComponent { }

子组件.ts

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

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class ChildComponent { }

app.component.spec.ts

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

describe('App', (() => {
  beforeEach(async() => {
    TestBed.configureTestingModule({ declarations: [AppComponent, ChildComponent] }).compileComponents();
  }));
  it('should work', () => {
    let fixture = TestBed.createComponent(AppComponent);
    // assert app.component exists
  });
});

当我运行单元测试时，出现此错误:

Error: This test module uses the component ChildComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. in /tmp/karma-typescript-bundle-3142O76A6m7KjQOD.js (line 3929)

Answer 1

该错误表明其他单元(ChildComponent)参与了测试。该错误是由于ChildComponent使用了templateUrl，此类组件可能需要调用compileComponents进行编译。

由于 AppComponent 有 template 而不是 templateUrl，这使得测试同步并且不需要 async 助手，也消除了使用 compileComponents 的需要。

如 the guide 中所述,

The TestBed.compileComponents method asynchronously compiles all the components configured in the testing module. In this example, the BannerComponent is the only component to compile. When compileComponents completes, the external templates and css files have been "inlined" and TestBed.createComponent can create new instances of BannerComponent synchronously.

单元测试假定只测试一个单元，而忽略、 stub 或模拟其他单元。这允许保持测试隔离。

由于未声明的组件会导致错误，因此必须对它们进行 stub :

  beforeEach(() => {
    @Component({ selector: 'child', template: '' })
    class DummyChildComponent {}

    TestBed.configureTestingModule({ declarations: [AppComponent, DummyChildComponent] });
  });

虚拟组件的替代方案是 CUSTOM_ELEMENTS_SCHEMA 或 NO_ERRORS_SCHEMA，它们不适合测试，因为任何可能的错误输出都可能很有值(value)。和 custom schema是更重量级的解决方案。