Angular HttpTestingController测试Blob类型错误响应问题

问题 #

在Angular 16（搭配jasmine 3.6、karma 6.3）环境中，测试响应类型为blob的POST API调用时遇到以下问题：

• 成功场景测试正常，但错误场景测试时，用req.flush传入HttpErrorResponse会触发Error: Automatic conversion to Blob is not supported for response type.错误；
• 改用req.error后，catchError逻辑虽被触发，但err.error不是Blob类型，导致await err.error.text()执行失败。

相关代码示例：

API调用代码 #

return this.http.post(someEndpoint, formData, {
  responseType: 'blob',
  observe: 'response',
  headers: new HttpHeaders({
    'Accept': 'text/csv'
  })
}).pipe(
  map(blobResponse => {
    // ... 成功映射逻辑
  }),
  catchError( async (err: HttpErrorResponse)=> {
    const customErrorMessage = await err.error.text();
    throw customErrorMessage;
  })
);

成功场景测试代码 #

myApi.someMethod(mock).subscribe({
  next: (res) => {
    expect(res).toEqual(someResponse);
  }
});

const req = httpTestingController.expectOne(someEndpoint);
expect(req.request.method).toEqual('POST');

req.event(responseMock);

httpTestingController.verify();

错误场景尝试的测试代码 #

const req = httpTestingController.expectOne(someEndpoint);
// ... 其他断言逻辑
req.error(new ProgressEvent('error'), {status: mockErrorStatus, statusText: mockErrorMessage});
// ... 错误断言逻辑
httpTestingController.verify();

解决方案 #

方法1：给req.error传入Blob类型的错误体 #

req.error的第二个参数支持自定义error属性，手动传入Blob对象即可让err.error.text()正常执行。

示例测试代码：

// 模拟错误信息的Blob
const errorBlob = new Blob(['自定义错误内容'], { type: 'text/plain' });

myApi.someMethod(mock).subscribe({
  error: (err) => {
    expect(err).toBe('自定义错误内容');
  }
});

const req = httpTestingController.expectOne(someEndpoint);
expect(req.request.method).toBe('POST');

// 调用req.error时，在响应配置中指定error为Blob
req.error(new ProgressEvent('error'), {
  status: 400,
  statusText: 'Bad Request',
  error: errorBlob // 关键：传入Blob类型的错误体
});

httpTestingController.verify();

方法2：增强catchError的鲁棒性（可选） #

如果希望代码在测试和生产环境都更稳定，可以增加类型判断，避免因err.error非Blob导致的崩溃：

catchError(async (err: HttpErrorResponse) => {
  let customErrorMessage = err.message; // 默认使用HttpErrorResponse的message
  if (err.error instanceof Blob) {
    customErrorMessage = await err.error.text();
  }
  throw customErrorMessage;
});

注意事项 #

• 禁止用req.flush模拟错误：当请求的responseType为blob时，Angular测试框架无法自动将HttpErrorResponse转换为Blob，因此会触发报错；
• req.error的第二个参数是HttpErrorResponseOptions，其中的error字段可直接指定错误体类型，只需与生产环境返回的类型一致即可。

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