CodePark/ questions / Hooks, context & providers
START PRACTICINGPRACTICE
Frontend question · Testing › Hooks, context & providers

A test for a React Query component makes the API return 500 and waits with await screen.findByText(/failed/i), but it times out. The handler is correct. What's the most likely cause?

React Query retries failed queries several times with a delay by default, so the error appears after the 1000ms findBy timeout

TanStack Query (React Query) retries failed queries before it sets the error state. By default it retries 3 times, with growing delays. So the error appears after the 1000ms findBy timeout. In tests, create the QueryClient with retry: false. Raising the findBy timeout would only make the test slow. The tempting option that MSW can't return 500 in Node is wrong. MSW returns 500 responses fine.