Getting Error : No QueryClient set, use QueryClientProvider using React testing Library

128 Views Asked by At

I have a react component which I am trying to test it using the RTL.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const renderWithQueryClient = (ui, queryClientOptions = {}, route) => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: false,
        ...queryClientOptions,
      },
    },
  });

  const Wrapper = ({ children }) => (
      <QueryClientProvider client={queryClient}>
        <MemoryRouter initialEntries={[route]} initialIndex={0}>
          <ModalProvider>
            <AlertProvider>{children}</AlertProvider>
          </ModalProvider>
        </MemoryRouter>
      </QueryClientProvider>
  );

  return render(ui, { wrapper: Wrapper });
};

Following is the hook

export const useUsers = (teamid) =>
  useQuery({
    queryKey: ["users", teamid],
    queryFn: () => fetchUsers(teamid),
    enabled: !!teamid,
  });

Below is the test case :

const teamid = "abc";

const server = setupServer(...handlers);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe("Assign Team", () => {
  const wrapper = renderWithQueryClient(
    <UserContext.Provider value={teamid}>
      <AssignTeam />
    </UserContext.Provider>,
    {},
    "/team"
  );

  test("calls an API", async () => {
    const { result, waitFor } = renderHook(() => useUsers("111"), wrapper);
    console.log("results", result);
  });
});
Here I am providing the queryclient as well. But still , I am getting the error that

No QueryClient set, use QueryClientProvider

How do I fix this error ?

0

There are 0 best solutions below