"No QueryClient set, use QueryClientProvider to set one" error when trying to test customized hook with useQuery

Question

I am trying to test a customized hook using Jest, but when I try to render it using renderHook, it keeps returning me the "No QueryClient set, use QueryClientProvider to set one" error, even though I have already provided a query client using the QueryClientProvider in the index of my project.

useJamie

import { useQuery } from 'react-query'
import axios from 'axios'

export const retrieveData = async () => {
  const response = await axios.get('http://localhost:8080/jaime/')
  console.log(response)
  return response.data
}

export function useJaime() {
  const {
    data: jaimeRamirez,
    error,
    isLoading,
  } = useQuery('DadosDoJaime', retrieveData)

  return { jaimeRamirez, error, isLoading }
}

My test:

describe('Testando hooks customizados: ', () => {
  const { result } = renderHook(useJaime)
  //   console.log(result)
})

The error: No QueryClient set, use QueryClientProvider to set one

And how I provide query client:

import { QueryClient, QueryClientProvider } from 'react-query'

const queryClient = new QueryClient()

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <React.StrictMode>
        <RouterSwitch />
      </React.StrictMode>
    </QueryClientProvider>
  </Provider>,
)

I have tried to test my customized hook that uses the useQuery hook, but it keeps returning me the "No QueryClient set, use QueryClientProvider to set one" error even though I have already provided it before. I know it is something related to the useQuery that I must provide it to it, but I don't know how since I'm supposedly already providing it.

Answer 1

You still must provide the necessary context providers/etc to code you are unit testing, your test code is running units of code in isolation, so they are not using your index.js file for anything.

In React-Hooks-Testing-Library you can create wrapper components to provide these.

Example:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

export const Providers = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
);

import { Providers } from '../path/to/Providers';

describe('Testando hooks customizados:', () => {
  it("should render useJaime hook and do something?", () => {
    const { result } = renderHook(useJaime, {
      wrapper: Providers,
    });

    // ... other code and assertions
  });
});