Question

我正在尝试为简单的Angular 2应用设置单元测试。我遇到了麻烦，因为单元测试创建了多个类的实例。请参阅以下代码

app.component.ts

import { TestClass } from './test.class';
import { Service } from './service';
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<div></div>'
})
export class AppComponent {
    constructor(private s: Service) {
        let c = new TestClass();
    }
}

test.class.ts

export class TestClass {
    static counts = 0;

    constructor() {
        TestClass.counts++;
        if (TestClass.counts > 1)
            throw "Multiple TestClass instance";
    }
}

app.component.spec.ts

import { Service } from './service';
import { AppComponent } from './app.component';
import { TestBed, ComponentFixture } from '@angular/core/testing';

let fixture: ComponentFixture<AppComponent>;
describe('AppComponent', function () {
    beforeEach(() => {
        fixture = TestBed.configureTestingModule({
            declarations: [AppComponent],
            providers: [Service]
        }).createComponent(AppComponent);
    });

    afterEach(() => {
        fixture.destroy();
    });

    it('1', () => {
        expect(true).toBe(true);
    });

    it('2', () => {
        expect(true).toBe(true);
    });
});

测试结果

[1]     Error: Error in ./AppComponent class AppComponent_Host - inline template
:0:0 caused by: Multiple TestClass instance

有没有办法在运行下一个“it”之前删除类实例？

Answer 1

正在创建TestClass的多个实例，因为AppComponent为每个TestBed块创建it一次。在上述情况下，将是两次。每afterEach个阻止后it运行一次，您可以重置静态变量counts

describe('AppComponent', function () {
    beforeEach(() => {
        fixture = TestBed.configureTestingModule({
            declarations: [AppComponent],
            providers: [Service]
        }).createComponent(AppComponent);
    });

    afterEach(() => {
        fixture.destroy();
        TestClass.counts = 0
    });
......

这样您就不必删除自TestClass来重置counts变量

编辑：替代方法：

由于您已经销毁了afterEach块中的组件，因此您可以在ngOnDestroy上使用AppComponent生命周期挂钩来重置其自身的计数变量。这里的逻辑是，如果组件本身被销毁，那么TestClass的实例也是如此。它必须以这种方式完成，因为打字稿没有析构函数的概念

@Component({
    selector: 'my-app',
    template: '<div></div>'
})
export class AppComponent implements OnDestroy{
    constructor(private s: Service) {
        let c = new TestClass();
    }
    ngOnDestroy() {
       TestClass.counts = 0;
    }
}

Angular 2单元测试 - 多类实例

1 个答案: