使用 React Query + Axios Mock Adapter 測試時如何提高錯誤響應速度？

Question

我正在為一個組件編寫測試，該組件使用 React Query with Jest、React Testing Library 和 Axios Mock Adapter（所有請求均使用 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-query 會進行 3 次指數退避重試。 建議通過QueryClientProvider在全局范圍內關閉重試 - 這在此處的官方文檔中。 我想你會想從renderWithProvider中做到這一點。

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