在使用React + Axios模拟适配器进行测试时，如何提高错误响应的速度？

Question

我正在为一个组件编写测试，该组件使用、和Axios适配器(所有请求都用axios发送)

我希望确保在axios返回500个错误时出现错误消息，并且我的测试完成了这个-，但是问题是错误实际出现需要花费大约8秒时间。

下面是一个测试：

  it("should show error message when bad request returned", async () => {
    mock.onGet("/url-example").reply(500);

    renderWithProvider(
        <TestContactUsComponent/>
    );

    expect(screen.getByTitle(/loading spinner/i)).toBeInTheDocument();

    await waitForElementToBeRemoved(
      () => screen.getByTitle(/loading spinner/i),
      { timeout: 10000 }
   );

    await expect(screen.queryByTestId("simple-error")).toBeInTheDocument();
}, 10000);

我的控制台记录了useQuery的状态，它返回loading大约7-8秒，然后返回错误，删除旋转器并呈现错误消息。

有没有办法减少这段时间？来自axios模拟适配器的200个请求的测试几乎立即完成，因此不确定为什么500个错误场景要花费这么长时间。

就组件的正常行为而言，它在大约一秒钟内呈现错误消息，因此我不认为它是组件本身的问题。

Answer 1

默认情况下，react会进行3次指数后退重试.建议通过QueryClientProvider在全球范围内关闭重试--这是在这里的官方文件中。我想你会想在renderWithProvider内部这么做。

 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       // ✅ turns retries off
       retry: false,
     },
   },
 })
 const wrapper = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     {children}
   </QueryClientProvider>
 );