Angular服务中Observable测试问题：如何测试含subscribe的服务函数？

别担心，我来一步步教你搞定这个getInvestigates函数里的subscribe逻辑测试，不管是成功回调还是错误分支都能精准覆盖到。

首先，我们要用到Angular官方提供的HttpClientTestingModule和HttpTestingController工具，它们能帮我们模拟HTTP请求，不用真的调用后端接口，就能完全控制返回的数据或错误，完美适配测试场景。

第一步：搭建测试环境 #

在你的服务测试文件里，先导入必要的依赖并初始化测试床：

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { YourService } from './your.service'; // 替换成你的服务类名
import { DataInterface } from './data.interface'; // 导入你的数据接口类型

describe('YourService', () => {
  let service: YourService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [YourService]
    });
    service = TestBed.inject(YourService);
    httpTestingController = TestBed.inject(HttpTestingController);
    // 初始化服务里的状态对象st，避免测试时出现未定义问题
    service.st = { totalPages: 0, totalElements: 0 };
  });

  afterEach(() => {
    // 确保所有HTTP请求都被处理，防止内存泄漏
    httpTestingController.verify();
  });

第二步：测试成功回调逻辑 #

我们模拟后端返回正常数据，然后断言subscribe里的变量是否被正确赋值：

it('should set investigates and state properties on successful response', () => {
    const mockData: DataInterface = {
      content: [{ id: 1, title: 'Test Case 1' }],
      totalPages: 3,
      totalElements: 25
    };
    const testPage = 1;
    const testLimit = 10;

    // 调用待测试的函数
    service.getInvestigates(testPage, testLimit);

    // 拦截对应的HTTP请求
    const req = httpTestingController.expectOne(
      `${service['bcUrl']}/api/investigates?page=${testPage}&size=${testLimit}`
    );
    // 确认请求方法是GET
    expect(req.request.method).toBe('GET');

    // 返回模拟的成功数据
    req.flush(mockData);

    // 断言变量是否被正确设置
    expect(service.investigates).toEqual(mockData.content);
    expect(service.st.totalPages).toBe(mockData.totalPages);
    expect(service.st.totalElements).toBe(mockData.totalElements);
  });

第三步：测试404错误分支 #

这里我们模拟返回404错误，同时要断言alert是否被正确触发（需要先模拟window.alert方法）：

it('should alert "Not found" when 404 error occurs', () => {
    // 模拟window.alert，方便后续断言调用情况
    spyOn(window, 'alert');
    const testPage = 1;
    const testLimit = 10;

    service.getInvestigates(testPage, testLimit);

    const req = httpTestingController.expectOne(
      `${service['bcUrl']}/api/investigates?page=${testPage}&size=${testLimit}`
    );

    // 返回404错误
    req.flush('Resource Not Found', { status: 404, statusText: 'Not Found' });

    // 断言alert被调用且参数正确
    expect(window.alert).toHaveBeenCalledWith('Not found');
  });
});

可选优化：提升代码可测试性 #

目前你的getInvestigates函数直接在内部subscribe并返回订阅对象，其实更推荐改成返回Observable，让调用方（比如组件）去订阅，这样代码复用性和可测试性会更好：

import { Observable, tap, catchError, throwError } from 'rxjs';

// 优化后的函数
getInvestigates(page, lim): Observable<DataInterface> { 
  return this.http.get<DataInterface>(`${this.bcUrl}/api/investigates?page=${page}&size=${lim}`, this.httpOptions)
    .pipe(
      tap((data: DataInterface) => {
        this.investigates = data.content;
        this.st.totalPages = data.totalPages;
        this.st.totalElements = data.totalElements;
      }),
      catchError(error => {
        if (error.status === 404) {
          alert('Not found');
        }
        return throwError(() => error);
      })
    );
}

这种写法下，测试逻辑和上面基本一致，但你可以直接订阅返回的Observable来验证逻辑，灵活性更高。

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