Angular 7中HTTP 404错误响应测试问题排查

你踩的这个坑其实很多Angular开发者都遇到过——实际运行时catchError能完美处理404并返回空数组，但写测试时不仅没进入错误处理块，连tap里的日志都没打，核心是你对HttpClientTestingModule的错误模拟方式理解错了，还加了一个容易忽略的笔误。

问题根源拆解 #

1. 混淆了req.error()和req.flush()的使用场景
   你现在用req.error(errorEvent, { status: 404... })模拟404，但这个方法是用来处理网络层面的错误（比如断网、服务器连接失败这类情况）；而404属于服务器正常返回的HTTP状态码错误，这种场景必须用req.flush()来模拟。

2. 测试里的方法名写错了
   你的服务方法叫searchStuff，但测试里调用的是service.searchWorks(query)——这直接导致测试根本没触发目标请求，自然不会走任何服务里的逻辑，绝对是个致命的小疏忽！

修正后的测试方案 #

把这两个问题都Fix掉，测试就能正常进入catchError了，完整代码如下：

it('should handle a 404 when no search results are found', inject([HttpTestingController], (mockController: HttpTestingController) => { 
  // 新版本Angular推荐用inject替代TestBed.get
  const service: SearchService = TestBed.inject(SearchService); 
  const query: SearchQuery = new SearchQuery(); 
  query.searchFor = 'stuffs'; 
  query.searchTerm = 'something'; 

  service.searchStuff(query).subscribe(results => { 
    expect(results).toBeDefined(); 
    // 明确断言返回的是空数组，验证catchError的逻辑是否生效
    expect(results).toEqual([]); 
  }); 

  const req = mockController.expectOne(request => { 
    return request.url === 'http://localhost/stuffs?title=something' && request.method === 'GET'; 
  }); 

  // 用flush模拟服务器返回404状态码，这才是触发HTTP错误响应的正确方式
  req.flush(null, { status: 404, statusText: 'Not Found' }); 

  mockController.verify(); 
}));

额外提示 #

• 以后区分两种错误模拟方式：
  • 网络异常（无法连接服务器）→ 用req.error()
  • HTTP状态码错误（4xx/5xx）→ 用req.flush(响应体, { status: 状态码 })
• 测试时一定要检查方法名、参数这些细节，有时候不起眼的拼写错误会浪费大量排查时间。

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