Jest：在 axios 拦截器中测试带有延迟设置的 http 加载器

Question

我使用 Jest，React 测试库进行测试。

我已设置 Material-UI Backdrop Spinner 以在发出 HTTP 请求时延迟 1 秒显示。为此，我正在通过 HTTP 拦截器跟踪 axios 请求。我在 axios 请求拦截器中设置了超时，在其中我在 1 秒延迟后显示加载器。在响应拦截器中，加载器被隐藏，超时被清除。

我正在尝试为此功能编写测试，我认为我已经部分实现了。场景的测试断言 - 在 HTTP 成功时隐藏加载器正在通过，但场景的断言失败 - 在 HTTP 错误时隐藏加载器。我认为以某种方式调用 - axios.interceptors.response['handlers'][0].rejected(); 没有被 axios 响应拦截器错误回调捕获。

下面是组件和测试的相关代码 -

// axios interceptor in component

 const loaderTimerRef = React.useRef<number>(); // Ref to track the timeout

 axios.interceptors.request.use(async (request) => {
  loaderTimerRef.current = window.setTimeout(() => {
    handleLoaderDisplay(true);
  }, 1000);
  return request;
});

axios.interceptors.response.use(
  (response) => {
    clearTimeout(loaderTimerRef.current);
    setShowLoader(false); // Flag for displaying loader
    return response;
  },
  (err) => {
    clearTimeout(loaderTimerRef.current);
    setShowLoader(false);
    return Promise.reject(err);
  }
);

// Test
it("should show loader after 1s delay on http request, and hide it on http request success/error", async () => {
  render(<App />);

  // Using CSS class 'MuiBackdrop-root' as a selector for the loader with backdrop
  const backdrop = document.getElementsByClassName("MuiBackdrop-root")[0];

  await act(async () => {
  // Hide loader on HTTP success
  await axios.interceptors.response['handlers'][0].fulfilled({});
  expect(backdrop).toHaveStyle('visibility:hidden');

  // Show loader when HTTP response pending for more than 1s
  axios.interceptors.response[
    'handlers'
  ][0].fulfilled = jest
    .fn()
    .mockImplementation(
      () => new Promise((resolve) => setTimeout(() => resolve({}), 1001))
    );
  axios.interceptors.request['handlers'][0].fulfilled({ headers: {} });
  axios.interceptors.response['handlers'][0].fulfilled({});
  jest.advanceTimersByTime(1000);
  expect(backdrop).not.toHaveStyle('visibility:hidden');

  // Show loader when HTTP error pending for more than 1s
  axios.interceptors.response[
    'handlers'
  ][0].rejected = jest
    .fn()
    .mockImplementation(
      () => new Promise((_, reject) => setTimeout(() => reject(), 1001))
    );
  axios.interceptors.request['handlers'][0].fulfilled({ headers: {} });
  axios.interceptors.response['handlers'][0].rejected();
  jest.advanceTimersByTime(1000);
  expect(backdrop).not.toHaveStyle('visibility:hidden');
});