如何使用使用 react-query 的 RTL 測試 React 自定義鈎子？

Question

我有一個自定義的 React 鈎子，它在自身中使用 react-query useQuery()：

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

我必須創建一個自定義鈎子，然后在其中使用useQuery()鈎子，因為它具有一些功能並從 react-query 獲取數據！

我試圖用react-hooks-testing-library測試這個鈎子：

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

但我收到此錯誤：

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

為此，我該如何包裝這部分： renderHook(() => useFetchSomething()) with Provider？

Answer 1

renderHook接受options ，其中之一是 包裝器組件，您可以在其中指定一個反應組件來在渲染時包裝測試組件。 這是放置供應商的好地方。

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

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

我的博客中有一個測試反應查詢的深入指南。