如何使用RTL测试React自定义钩子(使用react query)？

Question

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

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

我必须创建一个自定义钩子，然后在其中使用useQuery()钩子，因为它有一些特性，并从react查询中获取数据！

我试着用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()
});

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