如何使用React Testing Library为useMutation编写覆盖onSuccess、onError的测试用例

1. 前置依赖确认 #

确保你已经安装以下测试依赖：

• React 18+ 直接使用@testing-library/react（已内置renderHook能力），低版本React需额外安装@testing-library/react-hooks
• 对应版本的React Query（v3包名为react-query，v4+包名为@tanstack/react-query）
• 你接口请求用到的依赖（比如axios）

2. 测试代码实现 #

测试核心逻辑是：

• 为每个测试用例创建独立的React Query上下文，避免缓存互相干扰
• Mock接口请求的返回结果，分别模拟成功、失败场景
• 等待异步回调触发后断言对应逻辑是否执行

import { renderHook, act, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import axios from 'axios';
import useSubmitform from './useSubmitform'; // 替换为你自定义Hook的实际路径

// 全局mock请求依赖和console.log
jest.mock('axios');
const mockConsoleLog = jest.spyOn(console, 'log').mockImplementation(() => {});

describe('useSubmitform 测试', () => {
  let queryClient;
  let wrapper;

  // 每个用例执行前重置状态
  beforeEach(() => {
    // 关闭默认重试逻辑，避免测试超时
    queryClient = new QueryClient({
      defaultOptions: {
        mutations: {
          retry: false,
        }
      }
    });
    // 给Hook包裹React Query上下文，否则useMutation会报错
    wrapper = ({ children }) => (
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    );
    jest.clearAllMocks();
  });

  // 测试onSuccess回调场景
  it('提交成功时触发onSuccess，打印返回数据', async () => {
    // 模拟接口成功返回
    const mockResData = { code: 200, message: '提交成功' };
    axios.post.mockResolvedValueOnce({ data: mockResData });

    const { result } = renderHook(() => useSubmitform(), { wrapper });

    // 调用提交方法
    act(() => {
      result.current({ username: 'test', content: '测试内容' });
    });

    // 等待异步回调执行完成再断言
    await waitFor(() => {
      expect(axios.post).toHaveBeenCalledTimes(1);
      expect(mockConsoleLog).toHaveBeenCalledWith(mockResData);
    });
  });

  // 测试onError回调场景
  it('提交失败时触发onError，打印错误信息', async () => {
    // 模拟接口失败返回
    const mockError = new Error('参数校验不通过');
    axios.post.mockRejectedValueOnce(mockError);

    const { result } = renderHook(() => useSubmitform(), { wrapper });

    // 调用提交方法
    act(() => {
      result.current({ username: '', content: '' });
    });

    // 等待异步回调执行完成再断言
    await waitFor(() => {
      expect(axios.post).toHaveBeenCalledTimes(1);
      expect(mockConsoleLog).toHaveBeenCalledWith(mockError);
    });
  });
});

注意事项 #

如果你的mutation内不是直接调用axios.post，替换成对应你封装的请求方法做mock即可；如果你使用的是React Query v3版本，只需要把导入包从@tanstack/react-query改成react-query即可，其余逻辑完全兼容。

内容的提问来源于stack exchange，提问作者Meenakshi