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.

similar question, maybe you could find your answer here : stackoverflow.com/questions/65590195/… — Vahid
– Vahid, Commented Mar 2, 2022 at 9:25
I got it while I was testing with jest and react-testing-library, and I did not have any issues during development or building — Erfan Chegini
– Erfan Chegini, Commented Mar 2, 2022 at 9:39
duplicate of this one? stackoverflow.com/questions/65694015/… you're also not showing where the queryClient is created, and how the Signup component uses it — TkDodo
– TkDodo, Commented Mar 3, 2022 at 19:28

Alexandru Asaftei · Accepted Answer · 2024-05-17 08:06:49Z

6

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>
});

answered May 17, 2024 at 8:06

Alexandru Asaftei

1153 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related