No QueryClient set in unit test with react-testing-library

[fredericbahr]

After an upgrade to a newer version of react query i always receive the error No QueryClient set, use QueryClientProvider to set one.

I currently use the following versions:

• @tanstack/react-query: ^4.29.19
• @testing-library/react: ^14.0.0,

My unit test looks like this:

ui-test-utils/renderer.ts

export const Wrapper = ({ children }: IProps) => {
  const { ToastContainer } = createStandaloneToast();

  const defaultQueryClient = new QueryClient({});

  return (
    <>
      <ColorModeScript initialColorMode={customTheme.config.initialColorMode} />
      <ChakraProvider theme={customTheme}>
        <QueryClientProvider client={defaultQueryClient}>
          <BrowserRouter>{children}</BrowserRouter>
          <ToastContainer />
        </QueryClientProvider>
      </ChakraProvider>
    </>
  );
};

export function render(
  ui: React.ReactElement,
  options: RenderOptions = {},
): ReturnType<typeof rtlRender> & { user: ReturnType<typeof userEvent.setup> } {
  const user = userEvent.setup();

  const result = rtlRender(ui, {
    wrapper: Wrapper,
    ...options,
  });

  return { user, ...result };
}

tests/test-file.ts

import { render } from "ui-test-utils";
[...]
  describe("Header", () => {
    it("should render the header", () => {
      render(
        <AuthProvider auth={mockedAuth}>
          <AppointmentCreate />
        </AuthProvider>,
      );

      expect(screen.getAllByText(new RegExp("Termin erstellen"))[0]).toBeInTheDocument();
    });
  });

If i change the test file to include an QueryClientProver inside the render function it works:

  describe("Header", () => {
    it("should render the header", () => {
      const queryClient = new QueryClient({})
      render(
        <QueryClientProvider client={queryClient} >
          <AuthProvider auth={mockedAuth}>
            <MyComponentToTest/>
          </AuthProvider>
         </QueryClientProver>
       );

      expect(screen.getAllByText(new RegExp("Termin erstellen"))[0]).toBeInTheDocument();
    });
  });

MyComponentToTest uses an custom hook which uses useQueryClient to access the client.

I want to abstract the QueryClientProvider as setting it on every testcase would require me to update over 500 tests.
Is there any changes to react-query that disables this kind of abstraction?

HINT:
i tried to add contextSharing={true} to the QueryClientProvider, but it did not fix my issue.

Thanks in advance
Freddy