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 ?