Angular服务中catchError管道函数单元测试错误分支覆盖方法

解决方案 #

你可以通过HttpTestingController主动触发HTTP错误响应，来覆盖catchError分支的代码，新增如下测试用例即可：

it('should trigger catchError when Deletevote request fails', (done) => {
  // 模拟错误参数
  const mockErrorOpts = { status: 500, statusText: 'Internal Server Error' };
  // 可选：监听console输出，验证catchError内逻辑执行
  const logSpy = spyOn(console, 'log');
  const errorSpy = spyOn(console, 'error');

  service.Deletevote(DeleteObj).subscribe({
    next: () => fail('请求应该抛出错误，不应走到next回调'),
    error: (err) => {
      // 断言错误返回符合预期
      expect(err.status).toBe(500);
      // 断言catchError内的日志逻辑已执行
      expect(logSpy).toHaveBeenCalledWith('error caught in service');
      expect(errorSpy).toHaveBeenCalledWith(err);
      done();
    }
  });

  const req = httpTestCtrl.expectOne(environment.apiUrl + '/api/reset/abc');
  expect(req.request.method).toBe('POST');
  // 主动触发错误响应，进入catchError分支
  req.error(new ProgressEvent('服务端错误'), mockErrorOpts);
});

补充说明

• 除了调用req.error()触发错误，你也可以用flush方法传入错误配置实现相同效果：

  req.flush('请求失败', { status: 400, statusText: 'Bad Request' });
  

• 测试用例中传入的done回调用于标记异步测试结束，避免测试在错误回调执行前就终止导致用例异常。
• 如果你不需要验证catchError内的日志逻辑，可以删除对应的spy相关代码。

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