Ionic Capacitor StatusBar单元测试报错，如何正确Mock？

核心问题分析 #

你遇到的问题本质是两个点：一是Web环境下Capacitor原生插件未实现导致报错，二是Mock未正确覆盖组件中调用的StatusBar方法/平台判断逻辑。下面分步骤给出可落地的解决方案：

1. 先Mock Capacitor 平台判断 #

组件中只有在Native平台才会调用StatusBar，所以测试时必须让Capacitor.isNativePlatform()返回true，否则不会进入目标代码分支：

import { Capacitor } from '@capacitor/core';

// 在测试的beforeEach/beforeAll块中添加
spyOn(Capacitor, 'isNativePlatform').and.returnValue(true);

2. 根据组件使用方式选择Mock方案 #

场景A：组件直接调用StatusBar静态方法 #

如果你的app.component.ts是直接导入StatusBar并调用静态方法（如下示例）：

// app.component.ts
import { StatusBar, Style } from '@capacitor/status-bar';
import { Capacitor } from '@capacitor/core';

export class AppComponent {
  loadTheme() {
    if (Capacitor.isNativePlatform()) {
      StatusBar.setStyle({ style: Style.Dark });
    }
  }
}

测试时需要在文件顶部Mock整个@capacitor/status-bar模块：

// app.component.spec.ts
import { StatusBar, Style } from '@capacitor/status-bar';

// 放在describe块之外，确保模块导入时就被Mock
jest.mock('@capacitor/status-bar', () => ({
  StatusBar: {
    setStyle: jasmine.createSpy('setStyle') // 用jest.fn()如果是Jest环境
  },
  Style: {
    Dark: 'DARK',
    Light: 'LIGHT'
  }
}));

describe('AppComponent', () => {
  let component: AppComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();

    // Mock平台判断
    spyOn(Capacitor, 'isNativePlatform').and.returnValue(true);

    component = TestBed.createComponent(AppComponent).componentInstance;
  });

  it('triggers StatusBar.setStyle when loading theme', () => {
    component.loadTheme();
    expect(StatusBar.setStyle).toHaveBeenCalledWith({ style: Style.Dark });
  });
});

场景B：组件通过依赖注入使用StatusBar（推荐） #

为了更符合Angular的依赖注入规范，建议将StatusBar作为依赖注入到组件中，这样Mock更简单：

// app.component.ts
import { Component, Inject } from '@angular/core';
import { StatusBar, Style } from '@capacitor/status-bar';
import { Capacitor } from '@capacitor/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(@Inject(StatusBar) private statusBar: typeof StatusBar) {}

  loadTheme() {
    if (Capacitor.isNativePlatform()) {
      this.statusBar.setStyle({ style: Style.Dark });
    }
  }
}

测试时在TestBed中替换StatusBar的提供者：

// app.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { StatusBar, Style } from '@capacitor/status-bar';
import { Capacitor } from '@capacitor/core';

describe('AppComponent', () => {
  let component: AppComponent;
  const mockStatusBar = {
    setStyle: jasmine.createSpy('setStyle')
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent],
      providers: [
        { provide: StatusBar, useValue: mockStatusBar }
      ]
    }).compileComponents();

    spyOn(Capacitor, 'isNativePlatform').and.returnValue(true);
    component = TestBed.createComponent(AppComponent).componentInstance;
  });

  it('calls StatusBar.setStyle on theme load', () => {
    component.loadTheme();
    expect(mockStatusBar.setStyle).toHaveBeenCalledWith({ style: Style.Dark });
  });
});

3. 常见排查点 #

• 确认Mock的方法名和组件中调用的完全一致（比如是setStyle而非其他拼写）
• 检查Capacitor.isNativePlatform()的Mock是否生效，否则不会执行StatusBar逻辑
• 若使用Jest测试框架，将jasmine.createSpy替换为jest.fn()即可

内容的提问来源于stack exchange，提问作者MensinBM