断言在角度单元测试中存在父组件

Question

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

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

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

app.module.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 { }

app.component.ts

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

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

child.component.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 中所述，

TestBed.compileComponents 方法异步编译测试模块中配置的所有组件。在此示例中， BannerComponent 是唯一要编译的组件。 compileComponents 完成后，外部模板和 css 文件已经“内联”，TestBed.createComponent 可以同步创建 BannerComponent 的新实例。

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

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

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

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

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

Answer 2

您需要将ChildComponent 添加到您的模块中：

  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [AppComponent, ChildComponent] });
  });