Ionic/Angular继承多层抽象类的组件Jasmine单元测试报错如何解决

错误原因分析 #

你遇到的两个报错的根因分别是：

1. 未mock LoadingController时，真实的Ionic LoadingController 依赖运行时的Portal容器，单元测试环境未初始化该能力，因此抛出_getPortal未定义错误。
2. 你当前mock的LoadingController不完整：create方法返回的{content: ''}是普通对象，缺少Loading实例需要的present、setContent、dismiss三个方法，因此调用this.loading.present时抛出不存在的错误。
   该问题和抽象类继承逻辑无关，属于依赖mock不完整导致的常规单元测试错误。

具体修复代码 #

调整你的测试mock逻辑，先mockLoading实例的所有用到的方法，再将其作为LoadingController.create的返回值即可：

// 第一步：mock Loading实例，覆盖业务代码中用到的所有方法
const mockLoading = jasmine.createSpyObj<Loading>('Loading', ['present', 'setContent', 'dismiss']);
// 第二步：mock LoadingController，指定create方法返回上面的mockLoading实例
const fakeLoadingController = jasmine.createSpyObj<LoadingController>('LoadingController', ['create']);
fakeLoadingController.create.and.returnValue(mockLoading);

// 第三步：测试模块providers配置保持不变
{provide: LoadingController, useValue: fakeLoadingController},

如果需要验证业务逻辑正确性，可以补充如下断言用例：

• 验证组件初始化后fakeLoadingController.create被调用，入参为{content: ''}
• 验证mockLoading.present被调用
• 验证mockLoading.setContent被调用且入参为空字符串

抽象类继承场景的单元测试说明 #

涉及抽象类继承的场景完全可以正常进行单元测试：
抽象父类的逻辑会在子类实例化时自动执行，你只需要确保父类声明依赖的所有服务都被正确mock，不需要做额外的适配处理。

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