1 min read

Fix testing error for React Query component

import { useQuery, useQueryClient } from "react-query";

export default function Home() {
  const queryClient = useQueryClient();

  return <div></div>;

import { screen, render } from '@testing-library/react';

test('home', () => {

If you're testing your React component with Jest and React Testing Library, and the component is using React Query, you may come across this test error:

Error: Uncaught [Error: No QueryClient set, use QueryClientProvider to set one]

To fix, use renderWithClient to wrap your component in a QueryClientProvider:

import React from 'react';
import { render } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from 'react-query';

export function renderWithClient(client: QueryClient, ui: React.ReactElement) {
  const { rerender, ...result } = render(
    <QueryClientProvider client={client}>{ui}</QueryClientProvider>
  return {
    rerender: (rerenderUi: React.ReactElement) =>
        <QueryClientProvider client={client}>{rerenderUi}</QueryClientProvider>

Source: TanStack/query