如何测试依赖工具函数的React组件？（Vitest场景）

一、验证日期格式化效果 #

针对formatDate工具函数的验证，有两种实用思路，按需选择：

1. 直接断言格式化后的日期文本 #

如果要确保组件最终展示的日期符合预期格式，直接测试页面渲染结果即可。前提是你明确formatDate对输入值的输出结果（比如假设"2024-12-24"会被格式化为"2024年12月24日"）：

it("显示格式化后的预订日期", () => {
  const reservation = {
    label: "My reservation",
    startDate: "2024-12-24"
  };
  render(<ReservationCard reservation={reservation} showDetailDialog={() => {}} />);
  
  // 断言格式化后的日期文本存在且可见
  expect(screen.getByText("2024年12月24日")).toBeVisible();
});

2. Mock工具函数，验证调用逻辑 #

如果只想验证组件是否正确调用formatDate并传入了正确参数（工具函数自身的正确性应该单独在utils测试文件中验证），可以用Vitest的mock功能：

import { formatDate } from "./utils";

// Mock整个utils模块
vi.mock("./utils", () => ({
  formatDate: vi.fn(() => "模拟格式化日期")
}));

it("正确调用formatDate处理预订日期", () => {
  const reservation = {
    label: "My reservation",
    startDate: "2024-12-24"
  };
  render(<ReservationCard reservation={reservation} showDetailDialog={() => {}} />);
  
  // 验证formatDate被调用，且参数正确
  expect(formatDate).toHaveBeenCalledWith("2024-12-24");
  // 同时断言页面显示了mock的结果
  expect(screen.getByText("模拟格式化日期")).toBeVisible();
});

二、测试按钮点击与对话框交互 #

需要测试，因为按钮触发对话框是组件的核心交互逻辑，测试粒度分两种场景：

1. 仅验证触发逻辑（对话框由父组件控制） #

如果showDetailDialog是父组件传递的回调，只需验证按钮点击时该回调被调用：

it("点击按钮触发showDetailDialog回调", () => {
  const mockShowDialog = vi.fn();
  const reservation = {
    label: "My reservation",
    startDate: "2024-12-24"
  };
  
  render(<ReservationCard reservation={reservation} showDetailDialog={mockShowDialog} />);
  
  // 模拟点击按钮
  screen.getByText("Open detail").click();
  
  // 验证回调被调用
  expect(mockShowDialog).toHaveBeenCalled();
});

2. 验证对话框渲染与内容（对话框由组件内部控制） #

如果对话框由ReservationCard内部状态控制显示/隐藏，需要测试点击后对话框可见，且传递了正确的预订数据：

it("点击按钮打开详情对话框并显示正确内容", () => {
  const reservation = {
    label: "My reservation",
    startDate: "2024-12-24",
    guestCount: 2 // 假设的详情字段
  };
  
  render(<ReservationCard reservation={reservation} showDetailDialog={() => {}} />);
  
  // 点击按钮
  screen.getByText("Open detail").click();
  
  // 验证对话框可见
  expect(screen.getByRole("dialog")).toBeVisible();
  // 验证对话框内显示正确的详情
  expect(screen.getByText("客人数量: 2")).toBeVisible();
});

注意：DetailDialog自身的细节测试应该放在它的专属测试文件中，ReservationCard的测试只需验证能正确触发对话框显示、传递必要props即可。

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