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?

TkDodo · Accepted Answer · 2022-06-13 13:33:01Z

12

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.

answered Jun 13, 2022 at 13:33

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

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

1 Comment

ganesh kaspate Over a year ago

Can you please check stackoverflow.com/questions/77787517/…

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related