T
TanStack3y ago
xenial-black

Testing utility function for rendering React Query hook

I am testing React Query hooks and would like to write a function which takes a React Query hook as a prop and returns renderHook(() => props.useQueryHook, {wrapper: createWrapper()} However this doesn't work because because the useQueryHook loses context from the QueryClientProvider returned by the createWrapper function. How is this example different than just calling the renderHook method directly in the test?
4 Replies
fair-rose
fair-rose3y ago
Testing React Query
Let's take a look at how to efficiently test custom useQuery hooks and components using them.
xenial-black
xenial-blackOP3y ago
That's what I was looking at. But I want to take it to another level and create a function to hide the wrapper.
optimistic-gold
optimistic-gold3y ago
If props.useQueryHook is a hook (function) shouldn't it be:
renderHook(() => props.useQueryHook(), {wrapper: createWrapper()}
renderHook(() => props.useQueryHook(), {wrapper: createWrapper()}
(your example is missing "()" after props.useQueryHook).
xenial-black
xenial-blackOP3y ago
Then I get "React hook useQueryHook cannot be called inside a callback" from eslint and when running it I get the same errors about rules of hooks and it missing react context. It might be just not possible 🤷‍♂️

Did you find this page helpful?