useQuery not catching/handling the error when throwing error from mocked API in tests

Describe the bug I am using useQuery to fetch data from API. When I run the application in the browser, if the backend throws error, the error is properly handled by useQuery and displayed on the screen.

But when I am trying to do the same thing via testing, once I throw an error from the test itself, even tho my function is throwing the error properly, useQuery is not handling the error and it’s constantly in loading state.

Codesandbox example

https://codesandbox.io/s/cool-glitter-0vvki?file=/src/App.test.js

Expected behavior Expected isError to be true when throwing error from the tests.

Desktop (please complete the following information):

• OS: [MacOS Catalina]
• Browser: [Chrome]
• Version: [e.g. 22]

[mether]

I think I had the same issue with constant loading states and I believe this was due to the fact that by default react-query retries 3 times on error, leaving status === 'loading' and error === null until it fails on the third attempt

Try setting retry: false in your useQuery options e.g. const { ... } = useQuery(["toDo"], getToDo, { ..., retry: false });

If that addresses the problem in your tests, you can create a custom renderer for your tests and use the ReactQueryConfigProvider to set retry: false for consistent tests without having to disable it for your end users

Hope that helps!

P.S. I tried to fork your example but there seems to be some errors in there and I didn’t have time to address them.

[tannerlinsley]

Yep. Make sure you are accounting for retry or setting it to 0.