How can I test React custom hook with RTL which uses react- query ?

在React项目中，使用React Query库可以高效地处理异步数据，如API调用等。当开发自定义钩子时，结合React Query可以实现数据状态管理和缓存策略。为了保证自定义钩子的可靠性和稳定性，进行适当的测试是非常必要的。在这里，我会介绍如何使用React Testing Library (RTL) 来测试结合了React Query的React自定义钩子。

1. 准备测试环境

首先，你需要安装 @testing-library/react-hooks和 react-query，这样才能在测试环境中使用React Query和React Testing Library。

bash
npm install @testing-library/react-hooks react-query

2. 构建自定义钩子

假设我们有一个自定义钩子 useFetchData，它使用React Query从API获取数据：

javascript
import { useQuery } from 'react-query';

function useFetchData(url) {
  return useQuery('data', () => fetch(url).then(res => res.json()));
}

3. 设置React Query的测试环境

由于React Query依赖于提供者（Provider），我们需要在测试中模拟这一环境。为此，我们可以使用 QueryClient和 QueryClientProvider：

javascript
import { QueryClient, QueryClientProvider } from 'react-query';
import { renderHook } from '@testing-library/react-hooks';

const queryClient = new QueryClient();

const wrapper = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
);

4. 编写测试用例

现在我们可以开始编写测试用例。测试自定义钩子时，我们可以使用 renderHook函数。如果需要模拟API响应，可以使用 jest-fetch-mock来捕获和返回自定义响应：

javascript
import { renderHook } from '@testing-library/react-hooks';
import fetchMock from 'jest-fetch-mock';

fetchMock.enableMocks();

beforeEach(() => {
  fetchMock.resetMocks();
});

it('should fetch data', async () => {
  fetchMock.mockResponseOnce(JSON.stringify({ data: "Test data" }));

  const { result, waitFor } = renderHook(() => useFetchData('https://api.example.com/data'), { wrapper });

  await waitFor(() => result.current.isSuccess);

  expect(result.current.data).toEqual({ data: "Test data" });
});

5. 处理和断言状态

React Query的状态管理包括 isLoading, isError, isSuccess等。这些状态可以用来断言钩子的不同返回情况。在上面的例子中，我们使用了 waitFor函数等待查询状态变为成功，然后对返回的数据进行了断言。

总结

通过以上步骤，我们可以有效地对集成了React Query的自定义钩子进行RTL测试。这种方法不仅可以帮助我们验证钩子的逻辑正确性，还可以确保钩子在实际应用中能够正常工作。测试是确保软件质量的关键步骤，特别是在处理异步数据和外部API时。