如何为subscribe方法编写单元测试？Angular场景问题求助

我首次编写单元测试，尝试覆盖代码中的subscribe部分，但持续报错且无法解决。以下是我的业务代码、测试代码，请问该如何覆盖这段subscribe逻辑？

业务代码 #

triggerConfirmationErrorCheck(
    upgradeRequestPayload: UpgradeRequestInfoPayload,
    tripInsuranceSelectedValue: boolean
  ) {
    this.paymentMediatorService.confirmationErrorCheck$
      .pipe()
      .subscribe((data) => {
        if (this.isSuccess(data)) {
          this.invokeConfirmation(
            upgradeRequestPayload,
            tripInsuranceSelectedValue
          );
        } else if (this.isError(data)) {
          const errors = data?.validationErrorsArr?.length || 0;
          this.confirmationError.showUIError(
            errors,
            'id_paymentCardNum_creditDebit'
          );
        }
      });
}

现有测试代码 #

it('should test triggerConfirmationErrorCheck', () => {
  const upgradeRequestPayload: UpgradeRequestInfoPayload = {
    comfortRequest: '',
    firstClassRequest: '',
    savePreferences: '',
    tripInsuranceSelectedValue: false
  };
  const tripInsuranceSelectedValue = false;
  expect(
    service.triggerConfirmationErrorCheck(
      upgradeRequestPayload,
      tripInsuranceSelectedValue
    )
  ).toBe(undefined);
});

解决方案 #

要覆盖subscribe内部的逻辑，核心是模拟Observable的数据流，并验证依赖方法的调用情况，具体步骤如下：

1. 准备依赖Mock #

首先需要mock paymentMediatorService 的 confirmationErrorCheck$（用Subject手动控制数据发射），以及服务中依赖的其他方法/服务：

// 以Jasmine为例，测试前的初始化代码
let paymentMediatorService: jasmine.SpyObj<PaymentMediatorService>;
let confirmationError: jasmine.SpyObj<ConfirmationError>;
let service: YourService;

beforeEach(() => {
  // 创建带有Subject属性的mock服务
  const errorCheckSubject = new Subject<any>();
  paymentMediatorService = jasmine.createSpyObj('PaymentMediatorService', [], {
    confirmationErrorCheck$: errorCheckSubject
  });
  
  // mock confirmationError服务
  confirmationError = jasmine.createSpyObj('ConfirmationError', ['showUIError']);
  
  // 实例化待测试服务
  service = new YourService(paymentMediatorService, confirmationError);
  
  // mock服务内的实例方法
  spyOn(service, 'isSuccess').and.returnValue(false);
  spyOn(service, 'isError').and.returnValue(false);
  spyOn(service, 'invokeConfirmation');
});

2. 编写成功分支测试 #

验证当confirmationErrorCheck$发射成功数据时，是否调用invokeConfirmation：

it('should invoke confirmation on success data', () => {
  const testPayload: UpgradeRequestInfoPayload = {
    comfortRequest: '',
    firstClassRequest: '',
    savePreferences: '',
    tripInsuranceSelectedValue: true
  };
  const testInsuranceValue = true;

  // 设置isSuccess返回true
  service.isSuccess.and.returnValue(true);
  
  // 调用目标方法
  service.triggerConfirmationErrorCheck(testPayload, testInsuranceValue);
  
  // 手动发射成功数据，触发subscribe逻辑
  (paymentMediatorService.confirmationErrorCheck$ as Subject<any>).next({});
  
  // 验证方法是否被正确调用
  expect(service.invokeConfirmation).toHaveBeenCalledWith(testPayload, testInsuranceValue);
});

3. 编写错误分支测试 #

验证当confirmationErrorCheck$发射错误数据时，是否调用showUIError：

it('should show UI error on error data', () => {
  const testPayload: UpgradeRequestInfoPayload = {
    comfortRequest: '',
    firstClassRequest: '',
    savePreferences: '',
    tripInsuranceSelectedValue: false
  };
  const testInsuranceValue = false;
  const errorData = { validationErrorsArr: ['error1', 'error2'] };

  // 设置isError返回true
  service.isError.and.returnValue(true);
  
  service.triggerConfirmationErrorCheck(testPayload, testInsuranceValue);
  
  // 发射带有错误列表的数据
  (paymentMediatorService.confirmationErrorCheck$ as Subject<any>).next(errorData);
  
  // 验证错误提示方法是否传入正确参数
  expect(confirmationError.showUIError).toHaveBeenCalledWith(2, 'id_paymentCardNum_creditDebit');
});

关键注意点 #

• 原测试仅验证方法返回undefined，完全未触及subscribe内部逻辑，必须通过手动发射Observable数据来触发代码执行。
• 所有依赖的方法（isSuccess、isError、invokeConfirmation等）都需要mock，避免执行真实业务逻辑带来的副作用，同时方便验证调用情况。
• 使用Subject模拟Observable可以灵活控制数据发射时机，确保subscribe内的代码被执行到。

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