使用 Jest 测试 Ionic 3 延迟加载页面答案

【问题标题】：Testing Ionic 3 Lazy Loading Pages with Jest使用 Jest 测试 Ionic 3 延迟加载页面
【发布时间】：2018-11-15 03:30:42
【问题描述】：

我正在尝试测试我的页面内容，因为我已经将它们转换为使用 Ionic 3 的延迟加载。但是，我经常在 spec.ts 文件中遇到编译错误，因为我不确定如何构建个人应用程序中标签页的测试台部件。我正在尝试简单地测试使用 ionic generate page 命令生成的标准简单页面。

关于.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AboutPage } from './about';

@NgModule({
    declarations: [
        AboutPage,
    ],
    imports: [
        IonicPageModule.forChild(AboutPage),
    ],
})
export class AboutPageModule {}

关于.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'page-about',
    templateUrl: 'about.html',
})
export class AboutPage {

    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad AboutPage');
    }

}

现在我正在尝试创建测试文件：

关于.spec.ts

import { TestBed, ComponentFixture, async, inject } from '@angular/core/testing';
import { IonicPageModule, NavController, NavParams } from 'ionic-angular';

import { AboutPage } from './about';

let comp: AboutPage;
let fixture: ComponentFixture<AboutPage>;

describe('About Page', () => {

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

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

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

    it('is created', () => {
        expect(fixture).toBeTruthy();
        expect(comp).toBeTruthy();
    });
});

错误：

Can't resolve all parameters for NavParams: (?).

  15 |                              NavController,
  16 |                              NavParams
> 17 |             ],
  18 |             imports: [
  19 |                 IonicPageModule.forChild(AboutPage)
  20 |             ]

  at syntaxError (node_modules/packages/compiler/esm5/src/util.js:176:2)
  at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getDependenciesMetadata (node_modules/packages/compiler/esm5/src/metadata_resolver.js:1130:10)
  at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getTypeMetadata (node_modules/@angular/compiler/bundles/compiler.umd.js:15425:26)
  at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getInjectableMetadata (node_modules/@angular/compiler/bundles/compiler.umd.js:15405:21)
  at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver.getProviderMetadata (node_modules/packages/compiler/esm5/src/metadata_resolver.js:1305:14)
  at node_modules/packages/compiler/esm5/src/metadata_resolver.js:1216:7
      at Array.forEach (<anonymous>)
  at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getProvidersMetadata (node_modules/packages/compiler/esm5/src/metadata_resolver.js:1176:17)
  at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver.getNgModuleMetadata (node_modules/packages/compiler/esm5/src/metadata_resolver.js:744:10)
  at JitCompiler.Object.<anonymous>.JitCompiler._loadModules (node_modules/packages/compiler/esm5/src/jit/compiler.js:211:72)
  at JitCompiler.Object.<anonymous>.JitCompiler._compileModuleAndAllComponents (node_modules/packages/compiler/esm5/src/jit/compiler.js:189:35)
  at JitCompiler.Object.<anonymous>.JitCompiler.compileModuleAndAllComponentsAsync (node_modules/@angular/compiler/bundles/compiler.umd.js:33443:37)
  at CompilerImpl.Object.<anonymous>.CompilerImpl.compileModuleAndAllComponentsAsync (node_modules/packages/platform-browser-dynamic/esm5/src/compiler_factory.js:107:16)
  at TestingCompilerImpl.Object.<anonymous>.TestingCompilerImpl.compileModuleAndAllComponentsAsync (node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js:369:31)
  at TestBed.Object.<anonymous>.TestBed.compileComponents (node_modules/packages/core/esm5/testing/src/test_bed.js:355:23)
  at Function.Object.<anonymous>.TestBed.compileComponents (node_modules/packages/core/esm5/testing/src/test_bed.js:198:33)
  at src/pages/about/about.spec.ts:17:9
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:388:26)
  at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/async-test.js:49:39)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:76:39)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:387:32)
  at Zone.Object.<anonymous>.Zone.runGuarded (node_modules/zone.js/dist/zone.js:151:47)
  at runInTestZone (node_modules/@angular/core/bundles/core-testing.umd.js:141:25)
  at node_modules/@angular/core/bundles/core-testing.umd.js:80:13
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:388:26)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:79:39)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:387:32)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:138:43)
  at Object.testBody.length.done (node_modules/jest-zone-patch/index.js:51:29)

【问题讨论】：

标签： typescript testing ionic3 jestjs

【解决方案1】：

我也在使用 Jest，也遇到了“无法解析所有参数”，但对我来说，这是另一种野兽。

我第一次使用 Jest 进行测试时，一切正常。每次连续运行都会引发上述错误。

确实解决了这个问题是在没有缓存的情况下运行 jest，使用：jest --no-cache。

在发现这一点之前，我已经敲了很长时间。我希望它能帮助任何有同样问题的人。（我已经尝试了 @Injectable() 解决方案，没有机会。）

【讨论】：

【解决方案2】：

经过一些测试和使用不在选项卡中的页面后，我发现在选项卡中显示的页面仍然可以像普通页面一样进行测试。

import { async, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { IonicModule, IonicPage } from 'ionic-angular';

import { AppModule } from './../../app/app.module';
import { MyApp } from './../../app/app.component';

import { AboutPageModule } from './about.module';
import { AboutPage } from './about';

describe('About Page', () => {
    let fixture;
    let component;

    beforeEach(async(() => {                        // Need Async since we are using an external HTML/URL 
        TestBed.configureTestingModule({
            declarations: [MyApp],
            schemas: [NO_ERRORS_SCHEMA] ,
            imports: [
                IonicModule.forRoot(AboutPage),     // This page is in a tab, but does not matter for testing
                AboutPageModule
            ],
            providers: [
            ]
        }).compileComponents();                     // Need to compileComponents() as this is an external HTML file
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(AboutPage);   // Create the Page for testing
        component = fixture.componentInstance;          // Get a reference to the created instance
    });

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

    it ('should be created', () => {
        expect(component instanceof AboutPage).toBe(true);
    });
});

因此，我将测试简化为上述代码。 NavComponent 和 NavParams 由 Ionic 生成器添加，在基本页面中不需要，因此我可以将它们从构造函数调用中删除，然后我也不需要在测试中设置它们。

编辑：另一种选择是保留 NavComponent 和 NavParams 并为它们注入模拟。 Ionic 项目确实有一个用于这些的小型模拟库，允许您将它们保留在您的代码中，因为它们通常是，然后使用模拟继续测试而不引用这些控件，因为您可能不会在它们被注入时测试它们.如果您需要测试特殊数据会发生什么，您可以让 NavComponent 和 NavParams 传入特定数据。

将模拟导入添加到测试中

import { PlatformMock, SplashScreenMock, StatusBarMock} from './../test-config/mocks-ionic';

将 Mocks 加载为提供者：

    ...
    beforeEach(async(() => {
        TestBed.configureTestingModule({
           ...
            providers: [
                { provide: Platform, useClass: PlatformMock },
                { provide: SplashScreen, useClass: SplashScreenMock },
                { provide: StatusBar, useClass: StatusBarMock },
            ]
        }).compileComponents();
    }));

然后页面可以在构造函数中调用组件并测试它是否已创建。

【讨论】：