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

Question

I am trying to test a page in Ionic 3. So, I created.spec.ts of that page manually within src/pages/page folder. But when I create component using TestBed.createComponent, then it shows following error:

about.spec.ts file

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

I am unable to find out where my code is lacking due to which this error is coming. I need to fetch component in my spec file so as to perform testing on its functions and its part. Please suggest where I may be doing wrong.

AS SUGGESTED (Edition-1):

I changed my about.spec.ts by removing afterEach and refactoring beforeEach code into 2 parts:

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

But again I am getting same type of error, not that of destroy one.

Please suggest.

Answer 1

The error is coming from fixture.destroy() inside afterEach function because fixture is undefined .

You can get rid of this afterEach function since fixture and component are supposed to be created for each test again inside the beforeEach function. To make this really happen, also try to split the beforeEach into two functions same as found in CLI-generated tests .

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