Модульное тестирование компонентов в Ioni c 3 с использованием Jasmine-Karma - PullRequest
1 голос
/ 11 февраля 2020

Я пытаюсь протестировать страницу в Ioni c 3. Итак, я создал .spe c .ts этой страницы вручную в папке src / pages / page. Но когда я создаю компонент, используя TestBed.createComponent, он показывает следующую ошибку:

enter image description here

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

Я не могу определить, где не хватает моего кода, из-за которого возникает эта ошибка. Мне нужно получить компонент в моем файле spe c, чтобы выполнить тестирование его функций и его части. Пожалуйста, предложите, где я могу делать не так.

КАК ПРЕДЛАГАЕТСЯ (Издание-1):

Я изменил свой about.spe c .ts, удалив afterEach и рефакторинг кода beforeEach на 2 части:

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

Но опять я получаю ошибку такого же типа, а не ошибку уничтожения.

enter image description here

Пожалуйста, предложите.

1 Ответ

0 голосов
/ 11 февраля 2020

Ошибка исходит от fixture.destroy() внутри afterEach функции, потому что fixture равно undefined.

Вы можете избавиться от этой функции afterEach, поскольку fixture и component должен быть создан для каждого теста снова внутри функции beforeEach. Чтобы это произошло на самом деле, также попробуйте разделить 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();
});
...