angular - 使用 TestBed 覆盖组件

Question

我有 MainComponent，它使用 ChildComponentA 作为 @ViewChild。 MainComponent 正在调用 ChildComponentA 上的方法。

我想编写一个模拟 ChildComponentA 的单元测试用例。我如何使用 TestBed(在 Angular 2 RC5 中)执行此操作？

在我以前使用 overrideDirective(MainComponentName, ChildComponentA, MockChildComponentA); 是否有与此等效的使用 TestBed？

我试过用

TestBed.overrideComponent(ChildComponentA,{
        set: {
          template: '<div></div>'
        }
      }); 

这只是设置模板，但我也想模拟组件中的方法。

Answer 1

我认为在这种情况下，您可以尝试将子组件替换为模拟组件。只需创建一个具有相同选择器的模拟组件，然后使用 TestBed 删除真实子组件的声明并将声明添加到您的模拟组件。

@Component({
  selector: 'child',
  template: '<div></div>'
})
class MockComponent {

}

并在您的测试中执行此操作以使用模拟组件:

    TestBed.configureTestingModule({
        imports: [MyModule],
        declarations: [ParentComponent, MockComponent]
    });

    TestBed.overrideModule(MyModule, {
        remove: {
            declarations: [ParentComponent, ChildComponent],
            exports: [ParentComponent, ChildComponent]
        }
    });

此处有更多详细信息:https://github.com/angular/angular/issues/10689 .确保重新声明 ParentComponent，否则它不起作用(不知道为什么)。

如果使用@ViewChild 获取子组件的引用，则需要将其修改为不使用组件的类型，而是使用id。使用@ViewChild('child') 而不是@ViewChild(ChildComponent)。请参阅此处的第二个示例:http://learnangular2.com/viewChild/