使用 Jasmine-Karma 在 Ionic 3 中进行组件单元测试

Question

我正在尝试在 Ionic 3 中测试一个页面。因此，我在 src/pages/page 文件夹中手动创建了该页面的 .spec.ts。 但是当我使用 TestBed.createComponent 创建组件时，它会显示以下错误：

关于.spec.ts 文件

    import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { TestBed, ComponentFixture, async } from "@angular/core/testing";
import { AboutPage } from './about';
import { IonicPageModule, NavController, NavParams, Platform } from 'ionic-angular';
import { BrowserDynamicTestingModule,platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

describe('AboutPage', () => {

    let fixture;
    let component;
    beforeEach(async(() => {
        TestBed.resetTestEnvironment();
        TestBed.initTestEnvironment(BrowserDynamicTestingModule,platformBrowserDynamicTesting());
      TestBed.configureTestingModule({
        declarations: [ AboutPage ],
        imports: [IonicPageModule.forChild(AboutPage)],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        providers: [NavController, NavParams, Platform]
      }).compileComponents().then((response) => {
          fixture = TestBed.createComponent(AboutPage);
          component = fixture.componentInstance;
          fixture.detectChanges();
      });
    }));

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

     describe('First test',() => {
        it('should print',() => {
            let a = true;
            expect(a).toBeTruthy();
        })
    })
});

由于出现此错误，我无法找出缺少我的代码的位置。 我需要在我的规范文件中获取组件，以便对其功能及其部分进行测试。 请提出我可能做错的地方。

按照建议（第 1 版）：

我通过删除 afterEach 并将 beforeEach 代码重构为两部分来更改我的 about.spec.ts：

import { CUSTOM_ELEMENTS_SCHEMA ,NO_ERRORS_SCHEMA} from "@angular/core";
import { TestBed, ComponentFixture, async } from "@angular/core/testing";
import { AboutPage } from './about';
import { IonicPageModule, NavController, NavParams, Platform } from 'ionic-angular';
import { BrowserDynamicTestingModule,platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

describe('AboutPage', () => {

    let fixture;
    let component;

    beforeEach(async(() => {
        TestBed.initTestEnvironment(BrowserDynamicTestingModule,platformBrowserDynamicTesting());
        TestBed.configureTestingModule({
            declarations: [ AboutPage ],
            imports: [IonicPageModule.forChild(AboutPage)],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            providers: [NavController, NavParams, Platform]
        }).compileComponents();
    }));

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

    it('should print',() => {
        let a = true;
        expect(a).toBeTruthy();
    });
});

但是我再次遇到相同类型的错误，而不是破坏错误。

请建议。

Answer 1

错误来自 afterEach function 内afterEach fixture.destroy()因为fixture是undefined 。

您可以摆脱这个afterEach function，因为fixture和component应该在beforeEach function 中再次为每个测试创建。要真正实现这一点，还请尝试将beforeEach拆分为两个函数，就像在CLI 生成的测试中找到的一样。

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ AboutPage ],
        imports: [IonicPageModule.forChild(AboutPage)],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        providers: [NavController, NavParams, Platform]
    }).compileComponents();
}));

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