React-Query使用react-testing-libra

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