Ionic 5 + Jasmine 测试 SplashScreen.hide() 是否被调用失败（更新至 Capacitor 3）

Question

我无法通过之前有效的单元测试。我正在尝试将我的 Ionic 项目从 Capacitor 2 更新到 Capacitor 3，但在集成新的 SplashScreen 插件时遇到了问题。这是我的 app.component.ts class:

import { Component } from '@angular/core';
import { SplashScreen } from '@capacitor/splash-screen';
import { Platform } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { AuthenticationService } from './api/authentication.service';
import { SettingsService } from './services/settings.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(private platform: Platform, private translate: TranslateService,
      private settingsService: SettingsService, private authService: AuthenticationService ) {
    this.initializeApp();
    this.authService.logIn();
  }
  
  private splashScreen = SplashScreen;

  initializeApp() {
    if (this.platform.is('hybrid')) {
      this.platform.ready().then(() => {
        console.log("It's a hybrid context!")
        this.splashScreen.hide().then(()=>console.log("SplashScreen hidden"));
        console.log("Platform ready, SplashScreen hidden")
      });
    }

    /** Set default language */
    this.translate.setDefaultLang('en');
    this.translate.use(this.settingsService.getUserLanguage());
  }

}

这是我的 app.component.spec.ts 文件：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed, waitForAsync } from '@angular/core/testing';
import { SplashScreen } from '@capacitor/splash-screen';
import { Platform } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { AppComponent } from './app.component';

describe('AppComponent', () => {

  let splashScreenSpy, platformReadySpy, platformSpy;

  beforeEach(waitForAsync(() => {

    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
    platformReadySpy = Promise.resolve();
    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy, is: (type: string) => { 
      if (type === 'hybrid') {
        return true; 
      } else { 
        return false; 
      } 
    }});

    console.log("Configuring Testing Module")

    TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [TranslateModule.forRoot()],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { provide: Platform, useValue: platformSpy },
        { provide: SplashScreen, useValue: splashScreenSpy }
      ]
    }).compileComponents();
    
    console.log("Testing Module configured")
  }));
  
  it('hides the splash screen', waitForAsync (()  => {
    (platformSpy.is as any).withArgs('hybrid').and.returnValue(true);
    TestBed.createComponent(AppComponent).whenStable().then(() => {
      expect(platformSpy.ready).toHaveBeenCalled();
      console.log("Check whether splash screen will be hidden is going to start now")
      expect(splashScreenSpy.hide).toHaveBeenCalled();
      console.log("Check whether splash screen will be hidden is finished")
    });
  }));

最后一次期望失败并出现以下错误：

LOG: 'Configuring Testing Module'
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1): Executed 0 of 48 SUCCESS (0 secs / 0 secs)
LOG: 'Testing Module configured'
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1): Executed 0 of 48 SUCCESS (0 secs / 0 secs)
LOG: 'It's a hybrid context!'
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1): Executed 0 of 48 SUCCESS (0 secs / 0 secs)
LOG: 'Platform ready, SplashScreen hidden'
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1): Executed 0 of 48 SUCCESS (0 secs / 0 secs)
LOG: 'SplashScreen hidden'
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1): Executed 0 of 48 SUCCESS (0 secs / 0 secs) 
LOG: 'Check whether splash screen will be hidden is going to start now'
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1): Executed 0 of 48 SUCCESS (0 secs / 0 secs)
LOG: 'Check whether splash screen will be hidden is finished'
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1): Executed 0 of 48 SUCCESS (0 secs / 0 secs)
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1) AppComponent hides the splash screen FAILED
    Error: Expected spy SplashScreen.hide to have been called.
        at <Jasmine>
        at src/app/app.component.spec.ts:51:36
        at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:372:1)
        at AsyncTestZoneSpec.push.QpwO.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:1248:1)
Chrome Headless 90.0.4427.0 (Mac OS 11.5.1): Executed 1 of 48 (1 FAILED) (0 secs / 2.194 secs)

我已经花了8个小时，尝试了很多不同的方法，但还是不行。你知道这里出了什么问题吗？

此致巴尔德斯

Answer 1

这是描述如何使用 Jasmine 模拟 Capacitor 插件的官方指南：https://capacitorjs.com/docs/guides/mocking-plugins

您必须在 __mocks__/@capactor 中创建存根文件并添加到 tsconfig.spec.ts 的路径。

Ionic 5 + Jasmine 测试 SplashScreen.hide() 是否被调用失败（更新至 Capacitor 3）

Ionic 5 + Jasmine test whether SplashScreen.hide() was called fails (update to Capacitor 3)

ionic-framework

jasmine

karma-jasmine

capacitor