getting " No QueryClient set, use QueryClientProvider to set one " when testing a react query component with react testing library

Question

I'm getting this error when testing a component that uses react query custom hook: " No QueryClient set, use QueryClientProvider to set one "

this is my hook:

export default () => {
  const loginMutation = useMutation(
    async (payload: LoginDto) => {
      return await MembershipService.login(payload);
    },
    {
      onSuccess: ({ data }: AxiosResponse) => alert(data),
      onError: (error: AxiosError) => {
        console.log(error);
      },
    }
  );

  const signupMutation = useMutation(
    async (payload: SignupDto) => {
      return await MembershipService.signup(payload);
    },
    {
      onSuccess: ({ data }: AxiosResponse) => alert(data),
      onError: (error: AxiosError) => {
        console.log(error);
      },
    }
  );

  return {
    loginMutation,
    signupMutation,
  };
};

and here is my test:

test("should display required error", async () => {
    render(
      <QueryClientProvider client={queryClient}>
        <Signup />
      </QueryClientProvider>
    );
    fireEvent.submit(screen.getByRole("button"));
    expect(await screen.findAllByRole("alert")).toHaveLength(5);
  });

As you can see, I already passed an instance of QueryClient class to wrapper component. And also I'm using axios and axios-mock-adaptor to mocking requests.

Answer 1

For "react query" library use this

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
    const queryClient = new QueryClient()
    export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
}

But if you use '@tanstack/react-query' then

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';    
const queryClient = new QueryClient();
describe('Example page', () => {
<QueryClientProvider client={queryClient}>
          <Example />
        </QueryClientProvider>
});