Angular中HttpClient转Promise后的单元测试报错排查

首先，你遇到的报错核心原因是测试代码的执行顺序完全颠倒了。在Angular的HTTP测试中，你得先触发实际的服务方法调用，也就是调用service.getAddress()，然后再用httpMock.expectOne()去捕获这个请求，最后才是返回模拟响应并断言结果。

原测试代码的问题 #

你现在的代码是先调用httpMock.expectOne()去查找请求，但此时服务的getAddress()方法还没执行，根本没有发送任何HTTP请求，所以自然会报错“found none”。

另外还有个小细节：你的业务代码里变量命名有点混乱——定义了addressDetails却没使用，反而给UserAddress（看起来像是类型名）赋值，虽然功能正常，但这是个潜在的bug，建议改成给addressDetails赋值后返回它。

修正后的测试代码 #

it('should return null address', async () => {
  // 第一步：先调用服务方法，触发HTTP请求
  const responsePromise = service.getAddress('id', 'name');

  // 第二步：捕获这个被拦截的请求
  const req = httpMock.expectOne(service.API_URL);
  expect(req.request.method).toEqual('POST');

  // 第三步：返回模拟的空响应（如果要模拟错误，可用 req.error(new ErrorEvent('error'))）
  req.flush(null);

  // 第四步：等待Promise完成并断言结果
  const response = await responsePromise;
  expect(response).toEqual(null);
});

额外的业务代码优化建议 #

你的业务代码可以用try/catch替代.then/.catch，让异步逻辑更直观，同时修正变量使用的问题：

readonly API_URL = "www.xyz.api";
public async getAddress(id: string, name: string): Promise<UserAddress[]> {
  const reqBody = { id, name };
  try {
    const res = await this.http.post<IUserAddressRes>(this.API_URL, reqBody).toPromise();
    return res.collection;
  } catch (error) {
    return null;
  }
}

补充测试流程说明 #

在Angular的HTTP测试中，记住这个核心流程：

• 先调用要测试的服务方法（此时请求会被HttpClientTestingModule拦截）
• 用httpMock.expectOne()或httpMock.match()捕获拦截到的请求
• 用req.flush()或req.error()返回模拟的响应/错误
• 等待异步操作完成，最终断言结果

按照这个顺序来，就能确保你捕获到实际触发的请求，不会再出现“found none”的错误啦。

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