How to mock react-query useQuery in jest

当我们在使用 React Query 的 useQuery 钩子时，进行单元测试或集成测试通常需要模拟请求和响应，以确保组件在各种数据状态下的行为正确。Jest 提供了多种方式来模拟这些异步请求，确保我们的测试既准确又可靠。下面是模拟 useQuery 的一种常见方法：

1. 安装必要的库

首先，确保你的项目中安装了 jest 和 @testing-library/react-hooks，后者是专门用来测试 React 钩子的。

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

2. 设置模拟

对于 useQuery 的模拟，我们通常需要模拟整个 react-query 库，因为 useQuery 是从该库导入的。你可以使用 Jest 的 jest.mock() 方法来实现。

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

jest.mock('react-query', () => ({
  useQuery: jest.fn()
}));

3. 配置模拟的行为

在设置模拟后，我们可以定义 useQuery 应该如何响应。这通常取决于我们想要测试的具体场景。例如，你可能想测试加载状态、成功状态和错误状态。

javascript
// 设置 useQuery 模拟返回数据
useQuery.mockImplementation((queryKey, queryFn) => ({
  isLoading: false,
  isError: false,
  data: { items: ['item1', 'item2'] },
  error: null
}));

// 或者模拟一个加载状态
useQuery.mockImplementation(() => ({
  isLoading: true,
  isError: false,
  data: undefined,
  error: null
}));

// 或者模拟一个错误状态
useQuery.mockImplementation(() => ({
  isLoading: false,
  isError: true,
  data: undefined,
  error: new Error('Fetching error')
}));

4. 测试你的组件或钩子

使用 @testing-library/react-hooks 的 renderHook 函数来渲染你的钩子并进行测试。

javascript
const { result, waitForNextUpdate } = renderHook(() => useQuery('fetchData', fetchDataFn));

expect(result.current.isLoading).toBe(true);  // 检查是否处于加载状态

await waitForNextUpdate();  // 等待异步操作完成

expect(result.current.data).toEqual({ items: ['item1', 'item2'] });  // 检查数据是否正确

5. 结束测试和清理

在每次测试后，重置所有模拟以确保测试间的独立性。

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

通过上述步骤，你可以有效地模拟 useQuery 钩子，以便在不同的测试场景中验证你的组件或自定义钩子的行为。这种方式对于保持测试的可控性和预测性非常有帮助。