如何测试返回带tap操作符Observable的函数及tap内赋值逻辑？

假设你用的是Angular常用的Jasmine/Karma测试框架，按以下步骤就能搞定：

1. 正确Mock SumService #

先创建sumService的mock对象，让它的getOperations方法返回我们能控制的Observable：

// 生成mock服务，指定要mock的方法
const mockSumService = jasmine.createSpyObj('SumService', ['getOperations']);

2. 配置测试环境并初始化组件 #

在beforeEach里配置TestBed，把mock服务注入进去，再初始化组件实例：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [YourComponent], // 替换成你的组件类名
    providers: [
      { provide: SumService, useValue: mockSumService }
    ]
  }).compileComponents();

  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

3. 编写核心测试用例 #

关键是让mock方法返回指定值，调用operations后一定要订阅Observable（冷Observable不订阅不会执行内部逻辑），最后断言赋值是否成功：

it('should assign getOperations result to this.value via tap', () => {
  // 定义测试用的返回值
  const testValue = 100;
  // 让mock方法返回包装好的Observable
  mockSumService.getOperations.and.returnValue(of(testValue));
  
  // 调用operations方法，传入测试用的数组（求和后是100）
  const result$ = component.operations([20, 80]);
  
  // 订阅Observable，触发tap里的赋值逻辑
  result$.subscribe();
  
  // 断言this.value是否正确赋值
  expect(component.value).toBe(testValue);
  // 额外验证getOperations是否传入了正确的求和值
  expect(mockSumService.getOperations).toHaveBeenCalledWith(100);
});

常见踩坑点排查 #

• 之前mock失败大概率是没订阅Observable：tap里的逻辑只有在Observable被订阅时才会执行，冷Observable不会自动触发。
• 要确保mock的getOperations返回的是Observable，必须用of()之类的操作符包装值，不能直接返回普通数值。
• 检查组件实例是否正确初始化，mock服务是否真的注入到了组件里，别搞混了依赖注入的配置。

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