我正在写一个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
未定义。为什么会这样?
答案 0 :(得分:17)
我认为它应该有效。也许您忘记在配置中导入一些模块。以下是测试的完整代码:
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 强>
答案 1 :(得分:2)
在大多数情况下,只需将其添加到减速状态即可。
beforeEach(async(() => {
TestBed
.configureTestingModule({
imports: [],
declarations: [TimepickerComponent],
providers: [],
})
.compileComponents()
答案 2 :(得分:0)
确保您的子组件没有* ngIf值,其值为false。如果是这样,它将导致子组件未定义。
答案 3 :(得分:0)
如果要使用 stub 子组件测试主要组件,则需要向stub子组件添加提供程序;如文章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() {}
}
请注意提供者元数据,以便在需要 ChildComponent 时使用类 ChildStubComponent 。
然后您可以正常创建父组件,其子组件将以 ChildStubComponent 类型创建。
答案 4 :(得分:0)
即使按照已接受的答案进行了所有操作之后,您仍会得到未定义的子组件实例,然后请检查该组件是否可见。
在我的情况下,在控件上应用了*ngIf
,这就是为什么未定义child实例,然后我删除并检查它对我有用的原因