如何通过React自定义useJaime钩子测试？解决返回undefined问题

你的测试失败主要有三个核心问题：没有Mock真实API请求、未处理useQuery的异步状态、断言时机错误。以下是具体修复方案：

1. Mock axios请求，避免调用真实API #

测试时不需要发起真实网络请求，用Jest Mock掉axios的get方法，直接返回预设的测试数据：

// 在测试文件顶部添加
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

2. 调整测试逻辑，处理异步加载流程 #

useQuery是异步钩子，初始状态下jaimeRamirez就是undefined，需要等待请求完成（或Mock的响应返回）后再断言。使用waitFor工具来等待状态更新。

3. 优化测试代码（完整示例） #

import { renderHook, waitFor } from '@testing-library/react';
import { useJaime } from './your-hook-file';
import axios from 'axios';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

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

const infoJaime = {
  nombre: 'Jaime Ramírez',
  compania: 'Microsoft',
  coche: 'Porsche',
};

const createWrapper = () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false, // 关闭重试，避免测试超时
      },
    },
  });
  return ({ children }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

describe('Testando hooks customizados: ', () => {
  test('useJaime 应正确返回数据', async () => {
    // Mock axios返回预设数据
    mockedAxios.get.mockResolvedValue({ data: infoJaime });

    const { result } = renderHook(() => useJaime(), {
      wrapper: createWrapper(),
    });

    // 初始状态断言：正在加载，数据为undefined
    expect(result.current.isLoading).toBe(true);
    expect(result.current.jaimeRamirez).toBeUndefined();

    // 等待异步请求完成，断言最终状态
    await waitFor(() => {
      expect(result.current.isLoading).toBe(false);
      expect(result.current.jaimeRamirez).toEqual(infoJaime);
    });
  });
});

关键修复点说明 #

• Mock axios：确保测试不依赖真实API，完全用预设数据验证逻辑
• 关闭重试：React Query默认会重试失败请求，关闭后避免测试超时或不必要的等待
• waitFor：等待useQuery的异步状态更新，确保数据加载完成后再执行断言
• 分阶段断言：先验证初始加载状态，再验证最终数据状态，让测试逻辑更清晰

内容的提问来源于stack exchange，提问作者Douglas de Brito