Angular 单元测试 - 在 ViewChild 中引用/模拟指令

Question

如何 stub /模拟一个被读取为 ViewChild 的指令/组件？

例如，使用来自 angular.io 的简单指令:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor() { }
}

假设我正在测试 AppComponent 并使用 ViewChild 读取 HighlightDirective 作为:

@ViewChild(HighlightDirective) theHighlightDirective: HighlightDirective

stub 指令是:

@Directive({
  selector: '[appHighlight]'
})
export class StubbedHighlightDirective {
  constructor() { }
}

由于组件正在尝试读取 HighlightDirective，即使您在单元测试中声明了 StubbedHighlightDirective，theHighlightDirective 也将是 undefined 。

例子:

it('HighlightDirective is defined', () => {
    // This test fails
    expect(component.theHighlightDirective).toBeDefined();
});

如果您忽略 tslint 中的某些内容或使用 as 关键字，则可以解决此问题:

Version 1: Just ignore some things in tslint so compiler doesn't complain
it('HighlightDirective is defined', () => {
    // Compiler will typically complain saying that
    // StubbedHighlightDirective isn't assignable to type of HighlightDirective
    component.theHighlightDirective = new StubbedHighlightDirective();

    // this passes
    expect(component.theHighlightDirective).toBeDefined();
});

Version 2: Use "as" keyword
it('HighlightDirective is defined', () => {
    // Actually compiler will still complain with warnings
    component.theHighlightDirective = new StubbedHighlightDirective() as HighlightDirective;

    // this passes
    expect(component.theHighlightDirective).toBeDefined();
});

是否有另一种方法可以彻底清除这些类型的 ViewChild 引用？

Answer 1

问题是您正在使用一个类来查找 child ，而该类已被您的 stub 替换。您可以在指令(docs、blog post)中使用匹配的 exportAs 链接，以确保真实版本和 stub 具有相同的名称。

在原来的指令装饰器中:

@Directive({
    selector: '[appHighlight]',
    exportAs: 'appHighlight'
})
export class HighlightDirective {

在 stub 指令中:

@Directive({
    selector: '[appHighlight]',
    exportAs: 'appHighlight'
})
export class StubbedHighlightDirective {

然后在使用指令的模板中:

<div appHighlight #appHighlight="appHighlight">

完成所有这些后，您需要更新您的 @ViewChild 定义以使用字符串而不是类:

@ViewChild('appHighlight') theHighlightDirective: HighlightDirective