angular - 使用 Jest 和 Spectator 测试 Angular 拦截器的响应

Question

我正在尝试测试修改来自 HTTP 请求的响应的拦截器。
这是我当前的代码:

@Injectable()
export class ResponseCamelCaseInterceptor implements HttpInterceptor {
  intercept(
    httpRequest: HttpRequest<Record<string, unknown>>,
    httpHandler: HttpHandler,
  ): Observable<HttpEvent<Record<string, unknown>>> {
    return httpHandler.handle(httpRequest).pipe(
      filter(
        (value): value is HttpResponse<Record<string, unknown>> =>
          value instanceof HttpResponse,
      ),
      filter(({ body }) => isPlainObject(body)),
      map(httpEvent =>
        httpEvent.clone({ body: snakeToCamelCase(httpEvent.body) }),
      ),
    );
  }
}

及其相应的测试文件我到目前为止:

describe(ResponseCamelCaseInterceptor.name, () => {
  const createService = createServiceFactory(ResponseCamelCaseInterceptor);

  test('some description', () => {
    const { service } = createService();
    const fakeHttpRequest = new HttpRequest('POST', 'https://...', { custom_key: '1' });

    service.intercept(fakeHttpRequest, 'what should I put here for HttpHandler?').subscribe(() => {
      // expect(httpResponse.body).toStrictEqual({ customKey: '1' });
    });
  });
});

请注意，我使用的是 Angular 10.x.y、Jest 26.x.y 和 Spectator 5.x.y。

Answer 1

我能够获得截取方法来执行以下操作。根据需要修改 mockHandler.handle 返回值。

const mockHandler = {
  handle: jest.fn(() =>  of(new HttpResponse({status: 200, body: {data: 'thisIsWhatImTesting'}})))
};


spectator.service.intercept(new HttpRequest<any>(HttpMethod.GET, '/api'), mockHandler)
      .subscribe((response: HttpResponse<any>) => {
        expect(response.body).toStrictEqual({customKey: '1'});
      });

在 subscribe lambda 中，您需要将响应指定为输入。这应该是拦截器处理后的 HttpResponse 。
这里的关键是要在 jest 中进行模拟，您需要使用 jest.fn() 来模拟该函数。要让 TypeScript 将模拟识别为正确的类，您需要通过实现“句柄”来满足接口(interface)。