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

时间：2018-01-15 01:29:06

标签： typescript testing ionic3 jestjs

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

about.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 {}

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

}

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

about.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)

2 个答案:

答案 0 :(得分：0)

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

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

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

答案 1 :(得分：0)

我也使用Jest并且遇到过＆＃34; 无法解决所有参数＆＃34;但对我来说这是另一头野兽。

我第一次用Jest进行测试时，一切都很顺利。每次连续运行都会触发上述错误。

明确解决了问题使用以下内容运行没有缓存的jest：jest --no-cache。

在找到这个之前，我已经敲了很长时间。我希望它可以帮助任何有同样问题的人。 （我没有机会尝试@Injectable（）解决方案。）

相关问题
最新问题