在Angular中能否不做Mock、发起真实HTTP请求编写单元测试？

为什么测试服务时需要Mock HTTP请求 #

• 单元测试的核心是仅测试当前服务本身的逻辑，不依赖任何外部系统。后端接口状态、网络波动、数据库数据变动这类外部因素，会导致测试结果不稳定，明明服务代码没有问题，也可能因为外部故障导致测试失败，不符合单元测试的定位
• Mock掉HTTP请求后，测试不需要真实发送网络请求，运行速度极快，几十上百条用例跑完也只需要几秒
• 可以低成本覆盖所有边界场景：比如接口返回500、401、超时、异常格式返回，这类场景在真实请求中很难稳定触发，用Mock可以轻松模拟覆盖

能不能不Mock直接测试？ #

可以，但这类测试不属于单元测试，属于集成测试。实现方式就是测试时让请求直接发送到测试环境的后端服务，使用时有几个注意点：

• 提前在测试环境准备固定的测试数据，避免数据变动导致测试失败
• 测试用例要做数据隔离，每次执行完后重置测试数据，避免不同用例互相影响
• 这类测试优先级低于单元测试，一般只会用来覆盖核心主流程，不会用来测试所有边界情况

Spy的使用场景和方法 #

Spy是用来监听函数调用、替换函数实现的测试工具，Angular生态下常用Jasmine或者Jest自带的Spy能力，常见用法如下：
如果你的待测试服务依赖了另一个HTTP服务，你可以用Spy监听依赖服务的请求方法，验证你的服务是否正确调用了依赖方法、传参是否符合预期，示例（Jasmine为例）：

// 假设待测试的UserService依赖了HttpService
const httpService = TestBed.inject(HttpService);
// 监听httpService的get方法，替换为返回固定模拟值
const getSpy = spyOn(httpService, 'get').and.returnValue(of({id: 1, name: '测试用户'}));

// 调用待测试服务的方法
userService.getUser(1).subscribe();

// 验证get方法是否被正确调用，参数是否符合预期
expect(getSpy).toHaveBeenCalledWith('/user/1');

测试HTTP请求是否返回预期值的最佳实现 #

Angular官方推荐使用HttpClientTestingModule实现，这是专门为HTTP请求测试设计的官方工具，不需要Mock整个HttpClient，也不会发送真实请求，完美适配单元测试需求，实现步骤如下：

1. 在测试模块中导入HttpClientTestingModule，替换原本的HttpClientModule
2. 注入HttpTestingController用来拦截和管理请求
3. 调用服务方法触发请求，用expectOne匹配你要测试的请求，验证请求方法、URL、参数是否正确
4. 用flush返回你预设的响应数据，验证服务返回的结果是否符合预期
5. 最后调用verify()确保没有多余的未处理请求

完整示例代码：

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { UserService } from './user.service';

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

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

  it('getUser应该返回预期的用户数据', () => {
    const mockUser = { id: 1, name: '张三', email: 'zhangsan@test.com' };

    // 调用服务方法
    service.getUser(1).subscribe(user => {
      // 验证返回结果是否符合预期
      expect(user).toEqual(mockUser);
    });

    // 拦截匹配的请求，验证请求信息
    const req = httpTestingController.expectOne('/api/user/1');
    expect(req.request.method).toBe('GET');

    // 返回预设的模拟数据
    req.flush(mockUser);
  });

  afterEach(() => {
    // 验证没有多余的未处理请求
    httpTestingController.verify();
  });
});

这种方案的优势：

• 不会发送真实请求，测试稳定、运行速度快
• 可以同时验证请求的URL、方法、参数是否正确，以及服务对返回数据的处理逻辑是否正确
• 官方原生支持，不需要额外引入第三方工具，适配性最好

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