如何使用使用react-query的RTL测试React自定义hook？

Question

我有一个自定义的 React 钩子，它本身使用了react-query useQuery()：

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

我必须创建一个自定义挂钩，然后使用useQuery()其中的挂钩，因为它有一些功能并从反应查询获取数据！

我尝试用以下方法测试这个钩子react-hooks-testing-library：

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

但我收到此错误：

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

为此，我该如何包装这部分：renderHook(() => useFetchSomething())与提供者？

Answer 1

renderHook接受options，其中之一是包装组件，您可以在其中指定一个 React 组件来在渲染时将测试组件包装在其中。这是放置提供者的好地方。

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

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

我的博客中有一份关于测试 React 查询的深入指南。