Tengo un gancho React personalizado que usa react-query useQuery() en sí mismo:
const useFetchSomething = () => { const { data, isLoading } = useQuery('key', ....); return ....... } Tuve que crear un gancho personalizado y luego usar el gancho useQuery() dentro de él, porque tiene algunas características y obtiene datos de la consulta de reacción.
Traté de probar este gancho con react-hooks-testing-library :
const { result } = renderHook(() => useFetchSomething());pero me sale este error:
Error: Uncaught [Error: No QueryClient set, use QueryClientProvider to set one] para esto, ¿cómo puedo envolver esta parte: renderHook(() => useFetchSomething()) con Provider?
renderHook acepta options , y una de ellas es el componente contenedor , donde puede especificar un componente de reacción para envolver el componente de prueba al renderizar. Este es un buen lugar para poner proveedores.
const createWrapper = () => { const queryClient = new QueryClient() return ({ children }) => ( <QueryClientProvider client={queryClient}> {children} </QueryClientProvider> ) } const { result } = renderHook(() => useFetchSomething(), { wrapper: createWrapper() });Tengo una guía detallada para probar la consulta de reacción en mi blog.