如何对 TanStack 的 queryClient 进行单元测试

在进行单元测试时，我们通常关注的是代码的功能是否符合预期，同时希望能够在隔离的环境中测试，以避免依赖项或外部因素的干扰。对于 TanStack Query（以前称为 React Query）的 queryClient，我们可以通过以下几个步骤来实现单元测试：

1. 设置测试环境

首先，确保你的项目中安装了相关的测试库，如 Jest 和 React Testing Library，这些工具可以帮助我们渲染组件并执行单元测试。

bash
npm install --save-dev jest @testing-library/react

2. 创建一个测试用的 QueryClient 实例

在测试中，我们通常会创建一个独立的 QueryClient 实例，以确保每个测试之间的隔离，防止状态共享导致测试结果互相影响。

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

const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: {
      retry: false, // 关闭重试，以减少不确定因素
    },
  },
});

3. 编写测试用例

依据你要测试的功能点编写测试用例。假设我们想测试 QueryClient 是否能正确地拉取数据并缓存，我们可以使用 mock 的 API 响应来模拟整个数据拉取过程。

javascript
import { renderHook } from '@testing-library/react-hooks';
import { useQuery } from 'react-query';
import axios from 'axios';

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

test('使用 queryClient 获取数据', async () => {
  const queryClient = createTestQueryClient();
  const wrapper = ({ children }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );

  // 模拟 API 响应
  mockedAxios.get.mockResolvedValue({ data: 'test data' });

  const { result, waitFor } = renderHook(() => useQuery('testQuery', () => axios.get('fakeurl')), { wrapper });

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

  expect(result.current.data).toEqual('test data');
  expect(queryClient.getQueryData('testQuery')).toEqual('test data');
});

4. 清理和重置

每个测试运行后，应该清理和重置 mock 或创建的 QueryClient 实例状态，以确保测试的独立性。

javascript
afterEach(() => {
  jest.resetAllMocks();
  queryClient.clear();
});

通过上述步骤，我们可以有效地对 TanStack 的 queryClient 进行单元测试，确保其功能的正确性和稳定性。