Angular 2 个单元测试 - @ViewChild 未定义

Question

我正在编写 Angular 2 单元测试。我有一个 @ViewChild 子组件，我需要在组件初始化后识别它。在本例中，它是 ng2-bootstrap 库中的一个 Timepicker 组件，尽管具体情况无关紧要。在我 detectChanges() 之后，子组件实例仍然未定义。

伪代码：

@Component({
    template: `
        <form>
            <timepicker
                #timepickerChild
                [(ngModel)]="myDate">
            </timepicker>
        </form>
    `
})
export class ExampleComponent implements OnInit {
    @ViewChild('timepickerChild') timepickerChild: TimepickerComponent;
    public myDate = new Date();
}
    
// Spec
describe('Example Test', () => {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture<ExampleComponent>;

    beforeEach(() => {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it('should recognize a timepicker'. async(() => {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log('timepickerChild', timepickerChild)
    }));
});

伪代码按预期工作，直到您到达控制台日志。 timepickerChild 未定义。为什么会这样？

Answer 1

我认为它应该有效。也许你忘记在你的配置中导入一些模块。下面是完整的测试代码：

import { TestBed, ComponentFixture, async } from '@angular/core/testing';

import { Component, DebugElement } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { ExampleComponent } from './test.component';
import { TimepickerModule, TimepickerComponent } from 'ng2-bootstrap/ng2-bootstrap';

describe('Example Test', () => {
  let exampleComponent: ExampleComponent;
  let fixture: ComponentFixture<ExampleComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, TimepickerModule.forRoot()],
      declarations: [
        ExampleComponent
      ]
    });
    fixture = TestBed.createComponent(ExampleComponent);
  });

  it('should recognize a timepicker', async(() => {
    fixture.detectChanges();
    const timepickerChild: TimepickerComponent = fixture.componentInstance.timepickerChild;
    console.log('timepickerChild', timepickerChild);
    expect(timepickerChild).toBeDefined();
  }));
});

Plunker Example

Answer 2

在大多数情况下，只需将其添加到声明中即可。

beforeEach(async(() => {
        TestBed
            .configureTestingModule({
                imports: [],
                declarations: [TimepickerComponent],
                providers: [],
            })
            .compileComponents()

Answer 3

确保您的子组件没有评估为 false 的 *ngIf。如果是这样，它将导致子组件未定义。

Answer 4

如果要用stub子组件测试主组件，需要给stub子组件添加provider；如文章 Angular Unit Testing @ViewChild.

中所述

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-child',
  template: '',
  providers: [
    {
      provide: ChildComponent,
      useClass: ChildStubComponent
    }
  ]
})
export class ChildStubComponent {
  updateTimeStamp() {}
}

注意 providers 元数据，在 ChildComponent[=23= 时使用 class ChildStubComponent ] 是必需的。

然后您可以正常创建您的父组件，它的子组件将以 ChildStubComponent.
类型创建

Answer 5

即使按照接受的答案中的所有内容进行操作，您仍会得到子组件的未定义实例，然后请检查该组件是否可见。

在我的例子中，*ngIf 应用于控件，这就是为什么未定义子实例然后我删除并检查它对我有用

Answer 6

有关执行此操作的替代方法，请参阅此 post：

Angular 2 个单元测试 - @ViewChild 未定义

Angular 2 unit testing - @ViewChild is undefined

unit-testing

angular2-template

ng2-bootstrap

angular