首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular 2单元测试- @ViewChild未定义

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

Stack Overflow用户
提问于 2017-03-11 01:19:43
回答 4查看 37.2K关注 0票数 53

我正在写一个Angular 2单元测试。我有一个需要在组件初始化后识别的@ViewChild子组件。在本例中,它是来自ng2-bootstrap库的Timepicker组件,尽管细节并不重要。在我detectChanges()之后,子组件实例仍然是未定义的。

伪代码:

代码语言:javascript
复制
@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未定义。为什么会发生这种情况?

EN

回答 4

Stack Overflow用户

发布于 2019-02-27 05:17:21

确保您的子组件没有*ngIf,它的计算结果为false。如果是这样,它将导致子组件是未定义的。

票数 8
EN

Stack Overflow用户

发布于 2017-08-20 21:50:02

在大多数情况下,只需将其添加到声明中,就可以了。

代码语言:javascript
复制
beforeEach(async(() => {
        TestBed
            .configureTestingModule({
                imports: [],
                declarations: [TimepickerComponent],
                providers: [],
            })
            .compileComponents() 
票数 5
EN

Stack Overflow用户

发布于 2022-02-03 06:05:18

要了解另一种方法,请参考这篇文章:

https://stackoverflow.com/a/70966565/11797105

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42724179

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档