How to disable retry during unit tests (jest)

[Guuz]

I'm using React Native, React-Query, Jest and @testing-library/react-hooks. I've got my unit tests to work by setting global.window and clearing the queryCache after each test.

But i also have unit tests for failing queries. But they fail at the moment and i narrowed this down to the retry mechanism of React Query. I know how to disable this for my app, but how do you disable this during unit tests? I can't find a way to alter the default config that way.

Or alternatively; how do you wait for all 3 retries?

[TkDodo]

Can you can configure the queryCache and just set retry:false in the tests?

Possibly by wrapping the component in a custom query provider during testing: https://react-query.tanstack.com/docs/api/#reactquerycacheprovider

[TkDodo]

I know how to disable this for my app

alternatively, you can turn off retries for process.env.NODE_ENV === 'test' in your normal app, but that's rather sub-optimal I believe.

[Guuz]

The normal app doesn't run in unit tests. I just run the file that has the hook-code and mock some functions that do API calls.
With unit testing i try to test small units of code, not the entire app. but therefore i'm looking for a way how to configure React-Query without a provider.

[Guuz]

@TkDodo thanks for your fast reply!
It's a unit test for a Hook, not a React Component. So i dont know of any way to wrap it in a Provider...
(I extracted my data-fetching hook from my React Component because it's rather complex. it "should" also be easier to test if separated from other code ;-) in theory... )

[TkDodo]

It's a unit test for a Hook, not a React Component.

right, sorry, didn't grasp that 😅

and clearing the queryCache after each test.

Since you somehow have access to the queryCache in your tests, I don't see why you can't set retry: false on that queryCache 🤔 . Am I missing something obvious?

[Guuz]

Perhaps i am! :P but i couldn't find any way to change this setting/config.

[TkDodo]

right, I think it's not actually a setting on the cache itself, but rather a setting for the query. Whatever you have on your query will be merged with the defaultConfig from the cache.

I think the preferred solution would be to wrap the hook in a wrapper that renders a ReactQueryCacheProvider with the config you want, like shown here.

Something like:

import { QueryCache, ReactQueryCacheProvider } from 'react-query'

const queryCache = new QueryCache({
    defaultConfig: {
        queries: {
            retry: false
        },
    },
})

const wrapper = ({ children }) => <ReactQueryCacheProvider queryCache={queryCache}>{children}</ReactQueryCacheProvider>
const { result } = renderHook(() => useMyCustomQuery(), { wrapper })

Alternatively, not sure if that is a good idea, you could mock the useQueryCache hook and make it returns the defaultQueryConfig that you want.

[Guuz]

The renderHook() options with the wrapper is a good idea! i'm gonna look at it on Monday. thanks! i'll let you know!

[Guuz]

The wrapper does the job! Needed to make sure i clear the correct cache (not the default queryCache but the newly created one). So that might be a tip for anyone reading this in the future :) might save you some debugging.
Thanks @TkDodo !

[Guuz]

@TkDodo provided the correct answer in a thread here: #1090 (reply in thread)

[jamessaget]

Hello, I am struggling with the same issue except mine is from within a component as you first suggested - unfortunately the wrapper doesnt work as the replay is set within the component itself so it gets overwritten - any other suggestions?

within my test it runs fails once - and stays is loading without executing the other retries - getting a little stuck for ideas, thanks in advance

[TkDodo]

if you set retry directly on useQuery, you can't overwrite it. That's why I suggest not doing that: https://tkdodo.eu/blog/testing-react-query#turn-off-retries