如何使用使用 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()
});

我的博客中有一个测试反应查询的深入指南。