如何在 Angular 单元测试中的子组件上执行方法

Question

我正在使用默认测试设置（Jasmine + Karma）运行 Angular 5 应用程序。

假设有一个名为 Parent 的组件，它有一个在子组件上执行方法的方法。

父组件.ts

@Component({
  selector: 'parent',
...
export class ParentComponent implements {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  executeChildComponentMethod() {
    this.childComponent.methodToTest();
  }
}

父组件规格

import { ParentComponent } from './parent.component'

describe('ParentComponent' () => {
  let component: ParentComponent;
  let fixture: ComponentFixture<ParentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent],
        schemas: [NO_ERRORS_SCHEMA]
      })
      .compileComponents();
    }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ParentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should trigger executeChildComponentMethod', () => {
    component.executeChildComponentMethod()
  });
});

这会导致测试抛出错误，提示无法执行未定义的 methodToTest.. 这意味着子组件未实例化。

尝试过在 it 块内实例化子组件、将子组件注入到 it 块以及从测试块中的另一个固定装置（用于子组件）实例化子组件等方法，但无济于事。

我怎样才能让测试工作？

Answer 1

添加ChildComponent到declarations数组，以便它成为单元测试的一部分，这意味着它将在视图中呈现。

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent, ChildComponent],
        schemas: [NO_ERRORS_SCHEMA]
      })
      .compileComponents();
  }));

注意：您可能还需要添加providersof 。ChildComponent

编辑 ：

替代方法

首先，作为unit testing您的一部分，不应该测试child组件内部parent组件的行为。如果您只想检查child组件方法是否被调用，那么您可以模拟该组件并定义您正在其中测试的child组件。method这样，您就不需要在child providers测试期间依赖。

请参阅此处了解模拟子组件。