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

最后编辑于：2025-05-18 10:43:28

© 著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务

喜欢的朋友记得点赞、收藏、关注哦！！！