使用@ViewChild对角度5组件进行单元测试 [英] Unit testing angular 5 component with @ViewChild

问题描述

我正在使用角度5.2.0.我有一个子组件

I am using angular 5.2.0. I have a child component

import { Component } from '@angular/core';

@Component({
    template: `<div><\div>`
})
export class ChildComponent {

    public childMethod() {
        ...
    }
}

和一个通过ViewChild

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

@Component({
    template: `<child-component #child><\child-component>`
})
export class ParentComponent {

    @ViewChild('child')
    public child: ChildComponent;

    public parentMethod() {
        this.child.childMethod();
    }
}

我需要一个单元测试，以证明调用parentMethod会导致调用childMethod.我有以下内容:

I want a unit test proving that an invocation of parentMethod causes an invocation of childMethod. I have the following:

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChildComponent } from './child.component';
import { ParentComponent } from './parent.component';

describe('ParentComponent', () => {

    let component: Parentcomponent;
    let fixture: ComponentFixture<Parentcomponent>;

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

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

    it('should invoke childMethod when parentMethod is invoked', () => {
        const childMethodSpy: jasmine.Spy = spyOn(component.child, 'childMethod');
        component.parentMethod();
        expect(childMethodSpy).toHaveBeenCalled();
    });

});

但是，这不起作用，我得到了Error: <spyOn> : could not find an object to spy upon for childMethod().

Yet, this does not work, and I get Error: <spyOn> : could not find an object to spy upon for childMethod().

此外，这不是单元测试，因为我使用了真正的ChildComponent而不是模拟对象.我尝试创建一个MockChildComponent并将其添加到declarations和export中，但是得到了相同的结果.有帮助吗?

Moreover, this is not a unit test, because I use the real ChildComponent instead of a mock. I tried creating a MockChildComponent and adding it to declarations and export but I got the same result. Any help?

我知道有类似的帖子，但是它们适用于不同版本的angular，它们并没有帮助.

I know there are similar post, but they are for different versions of angular, and they did not help.

推荐答案

您可以执行以下操作.

像这样为ChildComponent创建一个间谍对象.

Create a spy object for the ChildComponent like this.

const childComponent = jasmine.createSpyObj('ChildComponent', ['childMethod']);

然后在测试中，将组件的childComponent属性设置为您创建的间谍.

Then in the test, set the component's childComponent property to the spy that you have created.

  component.childComponent =  childComponent;

您的测试文件应如下所示.

Your test file should look like this.

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChildComponent } from './child.component';
import { ParentComponent } from './parent.component';

describe('ParentComponent', () => {

    let component: ParentComponent;
    let fixture: ComponentFixture<ParentComponent>;

    const childComponent = jasmine.createSpyObj('ChildComponent', ['childMethod']);

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

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

    it('should invoke childMethod when parentMethod is invoked', () => {
        component.childComponent =  childComponent;
        component.parentMethod();
        expect(childComponent.childMethod).toHaveBeenCalled();
    });

});

这篇关于使用@ViewChild对角度5组件进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！