如何为使用mergeMap的Angular服务编写Karma/Jasmine单元测试

很多新手写这类用例的时候，要么没正确触发HTTP mock的返回流程，导致整个pipe链路根本没运行到mergeMap的回调，要么提前断言没等管道执行完，最后覆盖率统计的时候显示mergeMap内部逻辑完全没被覆盖。

基础测试环境配置 #

测试这类依赖HttpClient的服务，必须引入HttpClientTestingModule替代真实的HttpClient，避免发出真实HTTP请求，完整的TestBed初始化代码如下：

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { ChassisService } from './chassis.service';
import { Chassis } from './chassis.model';

describe('ChassisService 单元测试', () => {
  let service: ChassisService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [ChassisService]
    });
    service = TestBed.inject(ChassisService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    // 校验所有发出去的HTTP请求都已经被正确处理
    httpMock.verify();
  });
});

覆盖mergeMap回调逻辑的正确用例写法 #

核心逻辑非常简单：*当你通过httpMock的flush方法把模拟的HTTP返回值推送到Observable链路时，整个pipe链路上的所有算子（包括mergeMap内部的循环赋值逻辑）都会被同步执行，不存在“绕过某个管道算子”的情况。之前覆盖不到，本质上是链路没有被真正触发。
完整用例代码：

it('getAllChassis 应该为每个返回的Chassis对象写入固定的健康状态、合规状态值', () => {
  // 准备初始状态为空的mock数据，方便后续校验mergeMap的赋值逻辑生效
  const initialChassisList: Chassis[] = [
    { id: 1, chassisName: 'rack-01', healthStatus: null, complianceStatus: null },
    { id: 2, chassisName: 'rack-02', healthStatus: null, complianceStatus: null }
  ];
  let resultFromService: Chassis[];

  // 订阅服务方法返回的Observable
  service.getAllChassis().subscribe(res => {
    resultFromService = res;
  });

  // 匹配对应的HTTP GET请求
  const testRequest = httpMock.expectOne('chassis');
  expect(testRequest.request.method).toBe('GET');
  // 推送mock数据，触发整个管道链路执行——此时mergeMap的回调逻辑就会被运行
  testRequest.flush(initialChassisList);

  // 断言校验mergeMap内部逻辑的执行效果
  expect(resultFromService.length).toBe(2);
  resultFromService.forEach(item => {
    expect(item.healthStatus).toBe(45);
    expect(item.complianceStatus).toBe(81);
  });
});

常见踩坑点 #

• 不要在准备mock数据的时候，就提前把healthStatus、complianceStatus赋值为45和81，这种写法就算mergeMap的赋值逻辑完全失效，断言也会通过，根本起不到测试校验的作用
• 不要在flush调用之前就做断言，此时Observable链路还没收到值，mergeMap的回调自然不会执行，拿到的结果永远是undefined
• 如果写的用例运行正常、断言全过，但karma-coverage的覆盖率报告还是显示mergeMap内部的循环行没被覆盖，检查下覆盖率工具的配置，是不是误把rxjs的执行链路过滤了，这类是覆盖率统计的显示问题，不是代码真的没跑到

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