Question

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

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

parent.component.ts

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

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

parent.component.spec.ts

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()
  });
});

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

尝试过以下方法：实例化it块内的子组件，将子组件注入到it块，以及从测试块中的另一个夹具（用于子组件）实例化子组件，但无济于事。

如何使测试正常进行？

Answer 1

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

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

注意：您可能还必须添加providers中的ChildComponent。

编辑：

替代方法

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

有关模拟子组件的信息，请参见here。

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

1 个答案: