How to clear queryCache after every Jest test run in version 3?

[wtanna]

Previously in version 1 and 2 of React Query we had this in our Jest setup

import { queryCache } from "react-query"

afterEach(() => queryCache.clear())

this way each test run would run with a fresh empty cache, no matter how deeply nested the tests got. However, with version 3 we can't import the query cache anymore as its part of the context that is run within our tests.

We currently are wrapping our contexts that are used in our apps with the React Testing Library wrapper, so we have access to the query client and it's config in our tests. Therefore, I have come up with this solution to get our tests passing again

import { queryClient } from "app/context"

afterEach(() => queryClient.clear())

This however means we now need to export the queryClient that is created in our app/context that is passed to the QueryClientProvider

import { QueryClient, QueryClientProvider } from "react-query"

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})

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

I'm not super keen on exporting the queryClient for testing purposes and I'm also worried about any repercussions that can come from this.

Is there a better way to clear the cache after every test in Jest in version 3, or this an alright solution?

[DannyDelott]

I'm not super keen on exporting the queryClient for testing purposes and I'm also worried about any repercussions that can come from this.

I hear you on exporting things only for testing purposes isn't great, but there are first-class apis, like the hydration api which don't require being called from the context of React and take the queryClient as an argument. At that point, it might make sense for you to then export the queryClient for practical feature-work.

So I think your solution is probably fine, and will cover more cases later on.

[TkDodo]

Alternatively, you can create a separate query client for testing. This might be good to turn off certain settings for tests only, like retries.

[tannerlinsley]

This is the suggested way IMO. Creating a queryClient for each test ensures that your tests are truly isolated.

[wtanna]

I'm not sure how moving the wrapper for RTL is going to help solve this issue?

Our current React Testing Library render function look like this:

function render(ui, renderOptions = {}) {
  return rtlRender(ui, { wrapper: AppProviders, ...renderOptions })
}

The AppProviders is going to have a new queryClient for each test run with our config that users would experience. Our apps have been tested like this to assert specific retries in specific scenarios as if a user was using the app. (I didn't post our full query client config as it was irrelevant for the problem we are having)

Moving the AppProviders into a new Wrapper function that is only for test I don't think will solve my issue. Except the one where I feel a bit uneasy about exporting the client just for testing purposes. I could still make a new Wrapper function in our test environment that then imports our config options. Then I could clear() the test queryClient. This would mean I could remove the export from our app/context.js and instead export only the config options.

I think my issue is, our tests are nested and therefore we do not call render from each it in Jest. We will sometimes call render in a beforeEach to then do a number of assertions on different cases. This way we can resolve or reject the queryFn with specific values to test what the user would see in those cases. (All of our queryFn are unresolved promises to allow us to do this)

The reason why we need the afterEach is so that after each it, the query cache will be cleaned out for the next it. This will allow each it to be run in complete isolation with a new cleared out queryCache.

We have been making some progress with using render in each individual it which would I think solve my problem. But we have years and thousands of jest tests that were originally written in Enzyme that uses the test pattern I mentioned above. It will take us a lot of time to be able to call render on each test to be able to run React Query in isolation using the provided React Testing Library wrapper option. Therefore I need to find a solution that allows us to clear the queryCache after each test run, regardless of how deeply nested the test is.

I've been able to upgrade 4 of our apps by using the technique I mentioned above pretty painlessly. The only weirdness I have seen is that useMutation doesn't seem to like me clearing out the tests after each run if the promise hasn't been resolved (which is probably a good thing for us as it has made us clean up any unresolved promises in our tests lol).

[wtanna]

oh my, I feel silly. After rereading

Creating a queryClient for each test ensures that your tests are truly isolated.

I realized after sipping on my ☕ that I was creating a queryClient for the full suite, not for each test 🤦

Simply moving the new QueryClient into the wrapper solved my issue. Now I have the following:

import {
  render as rtlRender,
  renderWithRouter as rtlRenderWithRouter,
} from "./utils"
import { QueryClient, QueryClientProvider } from "react-query"
import { queryConfig } from "app/context"

function Wrapper({ children }) {
  const queryClient = new QueryClient(queryConfig)

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

function render(ui, renderOptions = {}) {
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

function renderWithRouter(ui, renderOptions = {}) {
  return rtlRenderWithRouter(ui, { wrapper: Wrapper, ...renderOptions })
}

export * from "./utils"
export { render, renderWithRouter }

where the queryConfig is the same as the one the full app uses for it's new QueryClient and everything is green without having to create an afterEach! This also removes the weird errors I was getting with useMutation within the tests!

Thank you @TkDodo and @tannerlinsley!!

[D-Pagey]

For anyone that just wants straight up code, here is my test-utils.tsx that handles routing, providers, MSW and React-Query:

import '@testing-library/jest-dom/extend-expect';
import { FC, ReactNode } from 'react';
import { render } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { MemoryRouter } from 'react-router-dom';

// as per the MSW docs
import { server } from './mocks/server';

type AllTheProvidersProps = {
    children: ReactNode;
    customContext?: AuthContextTypes;
};

const queryClient = new QueryClient();

// Establish API mocking before all tests.
beforeAll(() => server.listen());

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => {
    server.resetHandlers();
    queryClient.clear();
});

// Clean up after the tests are finished.
afterAll(() => server.close());

const AllTheProviders: FC<AllTheProvidersProps> = ({ children, customContext }) => (
    <QueryClientProvider client={queryClient}>
            <MemoryRouter>{children}</MemoryRouter>
    </QueryClientProvider>
);

const customRender = (ui: any, customContext?: any, options?: any) =>
    render(ui, { wrapper: () => <AllTheProviders customContext={customContext}>{ui}</AllTheProviders>, ...options });

// re-export everything
export * from '@testing-library/react';

// override render method
export { customRender as render };

in my test files I can import { render } from 'test-utils' and am good to go

[MelissaPastoreClair]

Thanks for sharing this code - it's super helpful! Not sure if this is the case for all projects, but I was getting the Jest "A worker process has failed to exit gracefully..." error until I moved queryClient.clear() into an afterAll statement vs. an afterEach statement. Just wanted to share in case that's helpful to someone else facing a similar issue.

[iamakshatjain]

This was so helpful @D-Pagey