如何用Jest和Angular测试更新Subject的HTTP请求

问题背景 #

在测试Angular项目中OdourService的createNewOdour方法时，核心需求是验证该方法调用HTTP POST接口成功后，是否正确更新了内部的observation$ Subject和_observations BehaviorSubject。

最初的测试方案直接mock了observation$，导致测试完全失效：明明方法没有正确更新目标Subject（返回null），测试却依然通过。改为提前订阅服务原生的observation$后测试恢复正常，但希望找到更严谨、可维护的测试方案。

相关业务代码：

// 待测试的createNewOdour方法
public createNewOdour(odour: OdourCreateForm): Observable<ObservationRes> {
  return this.http
    .post<ObservationRes>(
      `${environment.BACKEND_BASE_URL}api/observations`,
      { ...odour },
      {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        withCredentials: true,
      },
    )
    .pipe(
      tap(({ data }) => {
        this.observation$.next(data[0]);
        const currObservations = this._observations.getValue();
        this.updateObservations([...currObservations, data[0]]);
      }),
    );
}

初始测试的问题分析 #

原来的测试代码存在两个致命问题：

1. 错误mock内部Subject：直接给service.observation$赋值mock的Subject，导致方法内tap操作的是服务原生的observation$，而测试订阅的是mock实例，两者完全无关，断言自然失效。
2. 异步控制错误：内层subscribe还未执行就调用了done()，测试提前结束，根本没走到断言逻辑。

// 存在问题的初始测试代码
it('createNewOdour() updates the observation$ Subject and _observations BehaviorSubject', (done) => {
  httpMock.post.mockReturnValueOnce(
    of({ status: 'success', data: [observationsMock[0]] }),
  );
  service.observation$ = observation$; // 错误：替换了服务内部的Subject

  service.createNewOdour(odourCreateFormMock).subscribe((res) => {
    service.observation$.subscribe((observationValue) => {
      expect(observationValue).toEqual(null) // 断言永远成立，因为订阅的是mock的Subject
      done()
    });
    done() // 提前结束测试，内层subscribe未执行
  });
});

更优测试方案 #

方案1：使用fakeAsync + tick 控制异步流 #

这种方案能精准控制异步操作的执行时机，同时验证两个Subject的更新，逻辑清晰且易维护。

import { fakeAsync, tick } from '@angular/core/testing';

it('createNewOdour() correctly updates observation$ and _observations', fakeAsync(() => {
  // 1. 准备mock数据
  const mockObservation = observationsMock[0];
  httpMock.post.mockReturnValueOnce(of({ status: 'success', data: [mockObservation] }));

  // 2. 提前订阅目标Subject，存储结果用于断言
  let observationUpdate: any;
  let observationsListUpdate: any[];
  service.observation$.subscribe(val => observationUpdate = val);
  service._observations.subscribe(list => observationsListUpdate = list);

  // 3. 执行待测试方法
  service.createNewOdour(odourCreateFormMock).subscribe();
  
  // 4. 触发异步流执行
  tick();

  // 5. 断言两个Subject的更新结果
  expect(observationUpdate.id).toEqual(mockObservation.id);
  expect(observationsListUpdate.includes(mockObservation)).toBeTrue();
  expect(observationsListUpdate.length).toBe(1); // 假设初始列表为空
}));

方案2：使用RxJS TestScheduler 进行Marble测试 #

适合复杂的Observable流场景，能直观描述流的时序和预期结果，尤其适合需要验证多个流交互的测试。

import { TestScheduler } from 'rxjs/testing';

it('createNewOdour() updates internal Subjects via marble test', () => {
  const testScheduler = new TestScheduler((actual, expected) => {
    expect(actual).toEqual(expected);
  });

  testScheduler.run(({ cold, expectObservable }) => {
    // 定义mock的POST响应流
    const postResponse = cold('(a|)', { a: { status: 'success', data: [observationsMock[0]] } });
    httpMock.post.mockReturnValue(postResponse);

    // 预期observation$的输出：初始值（假设为null）+ 新数据
    expectObservable(service.observation$).toBe('n (b|)', {
      n: null,
      b: observationsMock[0]
    });

    // 执行测试方法
    service.createNewOdour(odourCreateFormMock).subscribe();
  });
});

关键注意事项 #

• 不要mock服务内部的Subject：测试的核心是验证服务内部逻辑对这些Subject的操作，必须使用服务原生的实例。
• 精准控制异步流：Angular测试中的fakeAsync/tick或RxJS的TestScheduler能避免异步时序导致的断言失效。
• 同时验证多个依赖：一次测试中同时验证observation$和_observations的更新，确保逻辑完整性。

内容的提问来源于stack exchange，提问作者Tomás Tubert SFC