Angular单元测试校验HTTP请求头出现非可迭代实例展开错误如何解决

1. Angular HttpHeaders 采用惰性初始化机制：你打印的日志中lazyUpdate存在待处理的头配置、headers/normalizedNames为空，说明头信息还没有完成正式序列化，只有首次调用has()/get()/keys()等头操作API时才会触发初始化逻辑。
2. 初始化过程内部依赖迭代器特性，若你项目的TypeScript编译目标为ES5，且没有配置对应的迭代器Polyfill与编译支持，初始化时的迭代操作就会触发「非可迭代实例展开失败」的报错。

方案1：调整测试代码（推荐，无需修改全局配置） #

将请求匹配方式替换为expectOne（确保匹配到唯一请求，避免数组索引异常），访问头信息前先调用keys()手动触发初始化：

it('should have my header', () => {    
  httpClient.get('/someURL').subscribe();
  // 匹配唯一GET请求，替代match避免多请求命中的索引问题
  const req = httpTestingController.expectOne(req => req.method === 'GET');
  // 手动触发headers初始化，规避惰性加载的兼容问题
  req.request.headers.keys();
  expect(req.request.headers.has('Custom-Header')).toEqual(true);
  // 补充请求返回，避免订阅逻辑抛异常
  req.flush({});
  httpTestingController.verify();
});

方案2：修复ES5环境迭代器支持 #

如果项目需要兼容ES5环境，修改两个配置项解决全局迭代器兼容问题：

1. 在polyfills.ts中引入相关Polyfill：

import 'core-js/es/symbol';
import 'core-js/es/map';

2. 在tsconfig.json的compilerOptions中开启降级迭代支持：

{
  "compilerOptions": {
    "target": "es5",
    "downlevelIteration": true
  }
}

方案3：临时校验方案（仅适合排查场景） #

无需触发初始化，直接读取HttpHeaders内部的惰性更新队列校验头配置：

it('should have my header', () => {    
  httpClient.get('/someURL').subscribe();
  const req = httpTestingController.match({ method: 'get' });
  const hasCustomHeader = (req[0].request.headers as any).lazyUpdate?.some(
    (item: {name: string}) => item.name.toLowerCase() === 'custom-header'
  );
  expect(hasCustomHeader).toBeTrue();
  httpTestingController.verify();
});

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