时间戳

首页 > 解决方案 > 使用 Jasmine-Karma 在 Ionic 3 中进行组件单元测试

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

问题描述

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

在此处输入图像描述

about.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();
    });
});

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

在此处输入图像描述

请建议。

标签： angularunit-testingtestingionic3karma-jasmine

解决方案

错误来自fixture.destroy()内部afterEach函数，因为fixtureis undefined。

你可以摆脱这个afterEach函数，因为fixture并且component应该在beforeEach函数内部再次为每个测试创建。要真正实现这一点，还请尝试将其拆分为与CLI 生成的测试beforeEach中相同的两个函数。

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();
});

推荐阅读