blog/testing-react-query

[utterances-bot]

Testing React Query | TkDodo's blog

Let's take a look at how to efficiently test custom useQuery hooks and components using them.

https://tkdodo.eu/blog/testing-react-query

[bonnie]

This is fantastic -- thank you, Dominik!

[Mmferry]

Thanks a lot Dominik
Can you take a look on that error please
https://stackoverflow.com/questions/67354617/typeerror-reactquery-default-is-not-a-constructor

[cloud-walker]

didn't know about the silence errors thing, very nice!

[andrewluetgers]

This is exactly what I was looking for, thank you sir. Solid series all around, well done!

[mauriciosoares]

The Turn off retries tip should be in the official documentation. I spent hours trying to figure out why my query wasn't resolving using jest + enzyme, to only remember that the QueryClient has the retries configured to 3 by default...

[TkDodo]

@mauriciosoares I would appreciate a PR to the docs, maybe a small paragraph and an updated example here :)

[mauriciosoares]

@TkDodo I opened a PR for that TanStack/query#2460 🤘

I used pretty much the same info from that blog post, I don't see a reason to rephrase that, since it already pretty clear and concise

[seafoam6]

Great post. A section on how to test useMutation would also be appreciated.

[TkDodo]

Great post. A section on how to test useMutation would also be appreciated.

Thanks, I'll see what I can do :)

[janusch]

@TkDodo thank you for the great article!

I am wondering how you would go about testing queryClient.getQueryData() calls. In my app I load some data on startup and then just use it from the query-cache. I would like to test components and functions that use above function.

How could I load some data into the cache?

I tried just calling the custom hook that gets the intial data in the test, but it ends up in the wrong query client. Can you think of a way on how to re-use the query client in the setup with the wrappers that you outlined above?

Would love to hear what you think about this use case for testing with the cached data.

[TkDodo]

I am wondering how you would go about testing queryClient.getQueryData() calls. In my app I load some data on startup and then just use it from the query-cache. I would like to test components and functions that use above function.

So I wouldn't do that, because queryClient.getQueryData() doesn't create a subscription to the queryCache. So if new data comes in, that component won't re-render on itself - only when a parent re-renders. I always advocate for: if you need data, just call useQuery, or better yet a custom hook that wraps useQuery. It will make sure your component works in isolation, not just if it's a child of a specific parent. This issue actually becomes apparent when you try to test it, because it can't "work alone".
If you are worried about too many background updates, you can set a staleTime on that query. As long as the query is fresh, data will only come from the cache with useQuery. Otherwise, you can also prop-drill data down, which would make it explicit and also easier to test, because now it's just a prop.

How could I load some data into the cache?

If you really want that, you can just call queryClient.setQueryData() after you've created the queryClient to prime the cache.

[janusch]

@TkDodo Thank you for the feedback!
That is a really good point. The thing is that the data I am loading is kind of configuration/master data that does not change much at all. And where I was first getting the data from different endpoints I ended up bundling it all into one configuration data endpoint that gives me all the different pieces. And many components just need one specific field of that config data. That is when I started creating those getCached* helpers that use getQueryData() and just return a specific field of the configuration data cache.

Using the wrappers from your examples how would I go about adding data for a specific test with queryClient.setQueryData()?

How can I get access to the same instance of the query client inside the test?

Thank you again for your guidance on this!

[TkDodo]

choosing the createWrapper approach, I think you can do this:

const createWrapper = (someKey, someInitialData) => {
  const queryClient = new QueryClient()
  queryClient.setQueryData(someKey, someInitialData)

  return ({ children }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  )
}

[janusch]

Makes sense, thanks a lot!
I will try out either solution and decide if it makes more sense to have the useQuery in each getCached helper or if I will setQueryData for the tests.

Looking forward to read the rest of your react-query blog series.

[eoghanmccarthy]

Hi, thanks for answering earlier questions on twitter. I just had one more. If I need to include other providers in renderWithClient do I declare them also in the return statement?

Like this:

export function renderWithClient(ui) {
  const testQueryClient = createTestQueryClient();
  const { rerender, ...result } = render(
    <QueryClientProvider client={testQueryClient}>
      <Provider store={mockedStore} context={ReactReduxContext}>
        <Router history={mockMemoryHistory}>
          <AuthProvider>{ui}</AuthProvider>
        </Router>
      </Provider>
    </QueryClientProvider>
  );
  return {
    ...result,
    rerender: rerenderUi =>
      rerender(
        <QueryClientProvider client={testQueryClient}>
          <Provider store={mockedStore} context={ReactReduxContext}>
            <Router history={mockMemoryHistory}>
              <AuthProvider>{rerenderUi}</AuthProvider>
            </Router>
          </Provider>
        </QueryClientProvider>
    )
  };
}

Or not, so like this?

export function renderWithClient(ui) {
  const testQueryClient = createTestQueryClient();
  const { rerender, ...result } = render(
    <QueryClientProvider client={testQueryClient}>
      <Provider store={mockedStore} context={ReactReduxContext}>
        <Router history={mockMemoryHistory}>
          <AuthProvider>{ui}</AuthProvider>
        </Router>
      </Provider>
    </QueryClientProvider>
  );
  return {
    ...result,
    rerender: rerenderUi =>
      rerender(<QueryClientProvider client={testQueryClient}>{rerenderUi}</QueryClientProvider>)
  };
}