React-Query使用react-testing-library进行测试

1.测试react-query首先我们必须得拥有queryClient，所以我们初始化queryClient，因为默认是重试三次，这意味着如果想测试错误的查询，测试可能会超时。所以可以在初始化时关闭

const createWrapper = () => {const queryClient = new QueryClient({defaultOptions: {queries: {retry: false,},},});return ({ children }) => <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
};

2.网上很多还要引入依赖@testing-library/react-hook，因为请求是异步的， 上面这个库提供了waitFor等待数据返沪，但是目前@testing-library/react也已经提供。使用方法如下

it('testing product detail query', async () => {const { result } = renderHook(() => useQueryProductDetail(''), {wrapper: createWrapper(),});await waitFor(() => expect(result.current.isSuccess).toBe(true));});

3.正常测试使用react-query的组件时，也需要创建queryClient，具体代码如下

it('test render search detail', async () => {const queryClient = new QueryClient();const { debug, findByText, findByRole } = await render(<QueryClientProvider client={queryClient}><SearchDetail /></QueryClientProvider>);//debug(await findByRole('qwe'));});

建议读读该文章，更详细的讲述了如何进行ReactQuery的测试https://tkdodo.eu/blog/testing-react-query