如何测试包含多个 useQuery 的 React 自定义 Hook

// TestHook.js
import { useQuery } from "react-query";
import { getTestByUid, getTestStatusesByUid } from "./api"; // 假设 API 在单独的文件中

export const useTest = (uid) => {
  const { data: test } = useQuery(["test", uid], () => getTestByUid(uid));
  const { data: testStatuses } = useQuery(["statuses", uid], () => getTestStatusesByUid(uid));

  return {
    test,
    testStatuses,
  };
};

// api.js
// 这是一个模拟的 API 模块，实际应用中会包含真实的 API 调用逻辑
export const getTestByUid = (uid) => {
  // 实际的 API 调用
  return Promise.resolve({ id: uid, name: "real test data" });
};

export const getTestStatusesByUid = (uid) => {
  // 实际的 API 调用
  return Promise.resolve(["real_status_1", "real_status_2"]);
};

// test-hook.test.js
import * as testApi from './api'; // 引入 API 模块

jest.mock('./api'); // 在文件顶部模拟整个 API 模块

// src/api/test-api.js
// 实际应用中的 API 调用函数
export const getTestByUid = (uid) => {
  // 假设这里是实际的 axios.get(...) 或 fetch(...) 调用
  return Promise.resolve({ id: uid, name: "default test" });
};

export const getTestStatusesByUid = (uid) => {
  // 假设这里是实际的 axios.get(...) 或 fetch(...) 调用
  return Promise.resolve(["default_status_1", "default_status_2"]);
};

// src/hooks/TestHook.js
import { useQuery } from "react-query";
import { getTestByUid, getTestStatusesByUid } from "../api/test-api";

export const useTest = (uid) => {
  const { data: test } = useQuery(["test", uid], () => getTestByUid(uid));
  const { data: testStatuses } = useQuery(["statuses", uid], () => getTestStatusesByUid(uid));

  return {
    test,
    testStatuses,
  };
};

// test/test-hook.test.js
import { renderHook } from "@testing-library/react-hooks";
import { QueryClient, QueryClientProvider } from "react-query";
import { useTest } from "../src/hooks/TestHook";
import * as testApi from "../src/api/test-api"; // 引入 API 模块
import React from "react";

// 在文件顶部模拟整个 API 模块
jest.mock("../src/api/test-api");

// 创建一个 QueryClient 实例，并配置默认选项，例如禁用重试
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false, // 在测试中禁用重试，避免不必要的等待
    },
  },
});

// 创建一个包装器组件，用于提供 QueryClientProvider
const wrapper = ({ children }) => {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

describe("useTestHook", () => {
  it("应该正确返回测试数据和状态", async () => {
    // 为当前测试用例模拟所有相关的 API 调用
    testApi.getTestByUid.mockResolvedValue({ name: "secret test" });
    testApi.getTestStatusesByUid.mockResolvedValue([
      "in_progress",
      "ready_for_approval",
      "rejected",
    ]);

    // 渲染 Hook
    const { result, waitForNextUpdate } = renderHook(
      () => useTest("bb450409-d778-4d57-a4b8-70fcfe2087bd"),
      { wrapper }
    );

    // 等待 Hook 内部的异步操作完成并更新
    await waitForNextUpdate();

    // 断言 Hook 返回的测试数据
    expect(result.current.test).toEqual({ name: "secret test" });
    // 断言 Hook 返回的测试状态
    expect(result.current.testStatuses).toEqual([
      "in_progress",
      "ready_for_approval",
      "rejected",
    ]);
  });

  // 可以添加其他测试用例，例如测试错误状态、加载状态等
  it("应该在 API 调用失败时处理错误", async () => {
    const errorMessage = "Failed to fetch data";
    testApi.getTestByUid.mockRejectedValue(new Error(errorMessage));
    testApi.getTestStatusesByUid.mockResolvedValue([]); // 即使一个失败，另一个也可能成功或被模拟

    const { result, waitForNextUpdate } = renderHook(
      () => useTest("some-uid"),
      { wrapper }
    );

    await waitForNextUpdate();

    // 假设 useQuery 的错误会被 Hook 内部处理或暴露
    // 这里我们只关注 getTestByUid 的错误，testStatuses 可能是默认值或空
    // 实际断言取决于 Hook 如何处理错误
    // expect(result.current.testError).toBeInstanceOf(Error);
    // expect(result.current.testError.message).toBe(errorMessage);
    expect(result.current.test).toBeUndefined(); // 如果 Hook 没有特殊处理，失败的查询数据将是 undefined
    expect(result.current.testStatuses).toEqual([]);
  });
});