How can I test React custom hook with RTL which uses react-query?

Question

I've a custom React hook which uses react-query useQuery() in it-self:

const useFetchSomething = () => {
  const { data, isLoading } = useQuery('key', ....);
  return .......
}

I had to create a custom hook then use the useQuery() hook inside it, because it has some features and gets data from react-query!

I tried to test this hook with react-hooks-testing-library:

const { result } = renderHook(() => useFetchSomething());

but I get this error:

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

for this, how can I wrap this part: renderHook(() => useFetchSomething()) with Provider?

Answer 1

renderHook accepts options, and one of them is the wrapper component, where you can specify a react component to wrap the test component in when rendering. This is a good place to put providers.

const createWrapper = () => {
  const queryClient = new QueryClient()
  return ({ children }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  )
}

const { result } = renderHook(() => useFetchSomething(), {
  wrapper: createWrapper()
});

I have an in-depth guide to testing react query in my blog.