Angular 單元測試 - 在 ViewChild 中使用引用存根/模擬指令

Question

您如何存根/模擬讀取為ViewChild的指令/組件？

例如，使用來自 angular.io 的簡單指令：

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

假設我正在測試AppComponent並使用ViewChild讀取HighlightDirective為：

@ViewChild(HighlightDirective) theHighlightDirective: HighlightDirective

存根指令是：

@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

問題是您正在使用一個類來查找孩子，而該類已被您的存根取代。 您可以在指令（文檔、 博客文章）中使用匹配的exportAs鏈接來確保真實版本和存根具有相同的名稱。

在原始指令裝飾器中：

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

在存根指令中：

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

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

<div appHighlight #appHighlight="appHighlight">

完成所有這些后，您需要更新@ViewChild定義以使用字符串而不是類：

@ViewChild('appHighlight') theHighlightDirective: HighlightDirective