使用Jasmine测试从viewChild调用另一个方法的方法

Question

我有这个方法验证组件，它正在调用另一个组件，它是ViewChild。我在我试图测试的组件中使用this.ViewChildComponent.someMethod();的组件。我试着用spyOn(viewChildComponent, 'someMethod').and.returnValue(true)。但它说this.ViewChildComponent.someMethod() is undefined。我有所有依赖项，例如服务提供商上的ViewChildComponent服务。我甚至向前迈了一步，并致电viewChildComponent为其服务决定someMethod();

任何帮助都是极好的。

Answer 1

如果你有例如

class TestedComponent() {
     @ViewChild('ChildComp') public variableChildComponent: ChildComp;
}

在测试spec文件中声明子组件和测试组件：

beforeEach(() => {
  TestBed.configureTestingModule({
     declarations: [ TestedComponent, ChildComp]
  })
  fixture = TestBed.createComponent(TestedComponent);
  comp = fixture.componentInstance;
  spyOn(comp.variableChildComponent, 'someMethod').and.returnValue(true);
});

这应该工作。

Answer 2

@DanielDrozzel的回答可以解决你的问题，但基本上它是有缺陷的，不是一个好的做法。我想提供一个替代方案。在Daniel的回答中，当你使用declarations: [ TestedComponent, ChildComp]时，你在TestedComponent和ChildComp之间的单元测试中创建了一个紧耦合。如果子组件停止工作，您的测试将失败，如果它改变行为，测试可能会失败。

这并不总是坏事，但它有时会咬你。最好使用官方Angular Docs https://angular.io/guide/testing#nested-component-tests或非常有用的ng-mocks库中提到的Component Stubs。上面Angular Dock中提到的第三个选项是NO_ERRORS_SCHEMA，但如果你想测试是否从parent调用子组件的方法，则不能使用它。

使用ng-mocks库你需要做的就是交换

在Daniel的答案中，declarations: [ TestedComponent, ChildComp]

declarations: [ TestedComponent, MockComponent(ChildComp)]

并且可以在不创建对子组件的硬依赖性的情况下测试父组件。