如何mock RXJS的pipe、map操作符 实现服务测试时内部方法覆盖

你当前编写的getCurrentUser返回的是普通JS对象，不存在pipe方法，直接调用getId会运行报错，首先需要将其调整为返回RxJS Observable类型：

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

// 修正后的service方法
getCurrentUser() {
  // 用of包裹普通对象转为Observable流
  return of({
    id: '',
    name: '',
  })
}

getId(type) {
  return this.getCurrentUser().pipe(map((user) => this.getUser(user, type)));
}

getUser(user, type) {
  return 'asdas'; 
}

测试用例编写步骤 #

特别注意：RxJS的流是冷的，只有订阅后才会执行内部逻辑，如果你只是调用getId而不订阅，pipe和map内的代码永远不会运行，也无法被覆盖率统计覆盖。完整测试用例如下：

import { of } from 'rxjs';

it('should execute pipe map logic and call inner methods', () => {
  const testType = 'test';
  const mockUser = { id: '123', name: '测试用户' };
  // mock getCurrentUser返回测试用的Observable
  spyOn(service, 'getCurrentUser').and.returnValue(of(mockUser));
  //  spyOn getUser验证调用
  const getUserSpy = spyOn(service, 'getUser').and.returnValue('testResult');

  // 必须订阅返回的Observable才会触发流执行
  let result;
  service.getId(testType).subscribe(res => {
    result = res;
  });

  // 验证所有调用逻辑
  expect(service.getCurrentUser).toHaveBeenCalled();
  expect(getUserSpy).toHaveBeenCalledWith(mockUser, testType);
  expect(result).toBe('testResult');
});

常见注意事项 #

• 如果是更复杂的异步流，可以搭配Angular测试的fakeAsync+tick或者done回调处理异步逻辑
• 不需要额外mockpipe和map本身，只要保证上游Observable正常返回，内部逻辑会正常执行
• 如果要测试异常分支，可以将getCurrentUser的mock返回值替换为throwError(() => new Error('测试异常'))验证错误处理逻辑

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