angular - 带TestBed的OverrideComponent

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

我想编写一个模拟ChildComponentA的单元测试用例。如何使用TestBed(在Angular 2 RC5中)做到这一点？

在我以前使用overrideDirective(MainComponentName, ChildComponentA, MockChildComponentA);之前，是否等效于使用TestBed？

我尝试使用

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

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

最佳答案

我认为在这种情况下，您可以尝试将子组件替换为模拟组件。只需使用相同的选择器创建一个模拟组件，然后使用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/