如何测试Angular中使用http.get的函数？英雄服务测试遇阻

你的核心问题是直接在测试中调用真实HTTP请求，测试环境无后端支撑，导致异步流要么报错终止，要么断言还未执行测试就已结束。必须用Angular官方提供的HttpClientTestingModule模拟HTTP响应，以下是具体修复方案：

1. 配置测试依赖 #

在服务测试文件中，导入HttpClientTestingModule和HttpTestingController，替换真实的HttpClient依赖：

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HeroService } from './hero.service';
import { Hero } from './hero';
import { MessageService } from './message.service';

describe('HeroService', () => {
  let service: HeroService;
  let httpMock: HttpTestingController;
  let messageServiceSpy: jasmine.SpyObj<MessageService>;

  beforeEach(() => {
    // 创建MessageService间谍对象，规避无关依赖干扰
    const spy = jasmine.createSpyObj('MessageService', ['add']);

    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule], // 用测试模块替代真实HTTP客户端
      providers: [
        HeroService,
        { provide: MessageService, useValue: spy } // 注入间谍对象
      ]
    });

    service = TestBed.inject(HeroService);
    httpMock = TestBed.inject(HttpTestingController);
    messageServiceSpy = TestBed.inject(MessageService) as jasmine.SpyObj<MessageService>;
  });

  // 测试后验证所有HTTP请求均被处理，避免遗漏未匹配请求
  afterEach(() => {
    httpMock.verify();
  });

2. 修复updateHero测试用例 #

重写你的测试逻辑，通过HttpTestingController捕获并模拟HTTP请求：

it('#updateHero() 执行后可获取更新后的英雄', () => {
    const testHero: Hero = { id: 42, name: 'TestHero' };
    const heroesUrl = service['heroesUrl']; // 替换为你服务中实际的API地址

    // 调用updateHero并订阅响应
    service.updateHero(testHero).subscribe(response => {
      expect(response).toBeTruthy();
    });

    // 捕获PUT请求，验证请求方法并返回模拟响应
    const updateReq = httpMock.expectOne(heroesUrl);
    expect(updateReq.request.method).toBe('PUT');
    updateReq.flush(testHero);

    // 调用getHero并验证返回结果
    service.getHero(42).subscribe(hero => {
      expect(hero.name).toBe('TestHero');
    });

    // 捕获GET请求，验证请求方法并返回模拟数据
    const getReq = httpMock.expectOne(`${heroesUrl}/42`);
    expect(getReq.request.method).toBe('GET');
    getReq.flush(testHero);
  });
});

3. 问题根源与关键说明 #

• 原测试失败原因：真实HTTP请求在测试环境无后端响应，要么触发catchError导致订阅回调不执行，要么异步回调在测试结束后才运行，断言永远不会触发，出现SPEC HAS NO EXPECTATIONS。
• HttpClientTestingModule作用：拦截所有HTTP请求，允许我们完全控制请求的匹配与响应模拟，脱离对真实后端的依赖。
• HttpTestingController核心方法：
  • expectOne(url)：匹配指定URL的请求，确保请求被正确发起
  • flush(data)：返回模拟的响应数据，触发订阅回调执行断言
  • verify()：确保所有发起的请求都被处理，避免测试遗漏

4. 额外建议 #

• 单元测试仅需验证服务逻辑，HTTP交互必须通过模拟实现，不要依赖真实后端。
• 若需验证完整HTTP流程，可编写端到端测试（如Cypress）连接测试环境后端。

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