Ionic中如何用Jasmine-Karma测试导航功能？遇push方法不存在报错

嘿，遇到这个报错其实挺常见的，本质原因是你搞错了spyOn的对象——NavController是个抽象类，push是它的实例方法，不是静态方法，直接去spyOn类本身肯定会提示方法不存在的。我给你梳理几种靠谱的解决办法：

一、直接提供带模拟push方法的NavController实例 #

在测试模块的providers里，我们可以直接用useValue创建一个带有spy版push方法的对象，这样TestBed注入的就是这个可用的实例了：

import { TestBed } from '@angular/core/testing';
import { NavController } from 'ionic-angular';
import { YourComponent } from './exp';

describe('YourComponent', () => {
  let component: YourComponent;
  let navCtrl: NavController;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        // 这里直接创建带spy的NavController模拟对象
        { provide: NavController, useValue: { push: jasmine.createSpy('push') } }
      ]
    }).compileComponents();

    // 获取注入的NavController实例
    navCtrl = TestBed.inject(NavController);
    // 创建组件实例
    component = TestBed.createComponent(YourComponent).componentInstance;
  });

  it('应该正确调用NavController.push', () => {
    // 触发组件里调用push的方法，比如假设你的组件有个goToNextPage方法
    component.goToNextPage();
    // 验证push方法被调用
    expect(navCtrl.push).toHaveBeenCalled();
  });
});

二、创建MockNavController类 #

如果需要模拟更多NavController的方法，也可以写个专门的mock类：

// 定义mock类
class MockNavController {
  push = jasmine.createSpy('push');
  // 可以添加其他需要模拟的方法，比如pop、setRoot等
  pop = jasmine.createSpy('pop');
}

// 在测试配置中使用这个mock类
describe('YourComponent', () => {
  let component: YourComponent;
  let navCtrl: MockNavController;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        { provide: NavController, useClass: MockNavController }
      ]
    }).compileComponents();

    navCtrl = TestBed.inject(NavController) as MockNavController;
    component = TestBed.createComponent(YourComponent).componentInstance;
  });

  // 测试用例写法和上面一致
});

三、避免踩坑的关键点 #

• 绝对不要直接spyOn(NavController, 'push')，因为push不是NavController类的静态方法，只有实例才拥有这个方法；
• 确保测试模块中正确提供了NavController的模拟实现，否则组件注入的会是抽象类的空实现，自然找不到push方法；
• 如果是Ionic 4+版本，NavController的用法有变化，可能需要结合Router或者Nav组件，但你的代码用的是ionic-angular，应该是Ionic 3，上面的方法完全适用。

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