Angular 19多HTTP请求单元测试报错：存在未处理请求

你遇到的未处理GET请求报错，通常是以下几个核心问题导致的，对应解决方法如下：

1. 请求URL匹配不精确 #

组件中发起的SVG请求路径（比如相对路径./assets/icons/icon1.svg），在Angular测试环境中会被解析为绝对路径，如果你在测试中用expectOne写的精确路径和实际解析后的路径不一致，就会导致请求无法被捕获，最终被标记为未处理。

解决方法：

• 用正则表达式匹配所有符合模式的请求，避免路径细节差异：

  // 捕获所有assets/icons下的SVG请求
  const requests = httpMock.match(/assets\/icons\/.*\.svg$/);
  expect(requests.length).toBe(3);
  // 批量返回模拟响应
  requests.forEach((req, index) => {
    req.flush(`<symbol id="icon${index+1}"></symbol>`);
  });
  

• 临时打印实际请求URL核对：

  fixture.detectChanges();
  // 捕获所有请求并打印URL
  const allRequests = httpMock.match(() => true);
  allRequests.forEach(req => console.log('实际请求URL:', req.request.url));
  

2. 请求发起时机未触发 #

如果组件的forkJoin请求是在ngOnInit中发起的，但测试中没有调用fixture.detectChanges()触发组件初始化，请求会延迟到测试结束后才发出，被检测为未处理请求。

解决方法：
确保在捕获请求前触发组件初始化：

it('should load SVG symbols', () => {
  // 触发ngOnInit，发起请求
  fixture.detectChanges();
  
  // 后续捕获请求、返回响应的逻辑
});

3. 未完成所有请求的模拟响应 #

即使捕获了请求，如果没有调用flush()完成响应，请求会处于挂起状态，httpMock.verify()会判定为未处理。

解决方法：
每个捕获到的请求都必须调用flush()：

// 精确匹配单个请求的场景
const req1 = httpMock.expectOne('/assets/icons/icon1.svg');
req1.flush('<symbol id="icon1"></symbol>');

const req2 = httpMock.expectOne('/assets/icons/icon2.svg');
req2.flush('<symbol id="icon2"></symbol>');

const req3 = httpMock.expectOne('/assets/icons/icon3.svg');
req3.flush('<symbol id="icon3"></symbol>');

4. 测试模块配置错误 #

如果没有正确导入HttpClientTestingModule，测试会使用真实的HttpClient发送请求，而非被测试模块拦截，导致请求无法被处理。

解决方法：
确保测试Bed中导入HttpClientTestingModule：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [HttpClientTestingModule], // 必须导入
    declarations: [YourSvgComponent]
  }).compileComponents();
});

完整测试示例 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { YourSvgComponent } from './your-svg.component';

describe('YourSvgComponent', () => {
  let component: YourSvgComponent;
  let fixture: ComponentFixture<YourSvgComponent>;
  let httpMock: HttpTestingController;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [YourSvgComponent]
    }).compileComponents();

    httpMock = TestBed.inject(HttpTestingController);
    fixture = TestBed.createComponent(YourSvgComponent);
    component = fixture.componentInstance;
  });

  afterEach(() => {
    // 验证所有请求都已处理
    httpMock.verify();
  });

  it('should load and insert 3 SVG symbols', () => {
    // 触发组件初始化，发起请求
    fixture.detectChanges();

    // 捕获所有SVG请求
    const requests = httpMock.match(/assets\/icons\/.*\.svg$/);
    expect(requests.length).toBe(3);

    // 返回模拟响应
    requests.forEach((req, idx) => {
      req.flush(`<symbol id="icon-${idx}"></symbol>`);
    });

    // 验证DOM中已插入symbol
    expect(document.querySelector('#icon-0')).toBeTruthy();
  });
});

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