Removing default cache in v3 presents problems in tests

[galkn]

We use react-query in a number of different places in my company, and have unit tests for specific components.

With the removal of the default cache in version 3, we are facing having to wrap every component in test with a QueryClientProvider. It also seems there is no other way other than using this context to provide it. This is needless to say a major headache for us, and requires refactoring of hundreds of tests.

I wish there was an option to configure react-query in test to keep providing a default cache for cases like this. The removal of the default cache feels like a very drastic move on part of the library developers and I'm wondering if more tips can be provided in the migration guide.

[TkDodo]

I think importing the queryCache directly was deprecated with v2.19.0 in favour of creating your own QueryCacheProvider (which then became QueryClientProvider in v3).

if you are using testing-library, there is the option of rendering with a wrapper. the advantage is that every test would get their own Provider and thus their own cache, so you don't need to worry about cleanup / concurrent running tests because they are all isolated:

import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { renderHook } from "@testing-library/react-hooks";
export function useCustomHook() {
  return useQuery("customHook", () => "Hello");
}

const createWrapper = () => {
  const queryClient = new QueryClient();
  const wrapper = ({ children }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );

  return wrapper;
};

test("should work", async () => {
  const { result, waitFor } = renderHook(() => useCustomHook(), {
    wrapper: createWrapper()
  });

  await waitFor(() => result.current.isSuccess);

  expect(result.current.data).toEqual("Hello");
});