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中提到的Component Stubs https://angular.io/guide/testing#nested-component-tests或非常有用的ng-mocks库。上面的Angular扩展坞中提到的第三个选项是NO_ERRORS_SCHEMA，但如果要测试是否从父级调用子组件的方法，则不能使用它。

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

declarations: [ TestedComponent, ChildComp]在丹尼尔的答案中

declarations: [ TestedComponent, MockComponent(ChildComp)]

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

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

2 个答案: