React Jest中如何覆盖日期选择器内部useState钩子测试用例？

问题背景 #

开发了一款可复用的日期范围选择器，支持设置startDate/endDate，包含Apply按钮及Today、Tomorrow、This Month等快捷填充选项。Jest覆盖率检测显示，组件内部定义的onStartDateChange函数中setStartAndEndDate行未被覆盖，该函数为组件内部函数（非props传入），组件使用方式为：

<DateRangePicker enableTime onApplyClick={onApplyButtonClickMock} />

需要编写测试用例，覆盖日历选择日期和选择快捷下拉选项两种触发onStartDateChange的场景。

解决方案 #

1. 测试日历选择触发onStartDateChange #

通过React Testing Library定位开始日期输入框，模拟打开日历并选择日期，验证日期更新逻辑是否触发：

import { render, screen, fireEvent } from '@testing-library/react';
import DateRangePicker from './DateRangePicker';

test('calendar selection triggers onStartDateChange', () => {
  // 渲染组件
  render(<DateRangePicker enableTime onApplyClick={jest.fn()} />);

  // 定位并点击开始日期输入框，打开日历面板
  const startDateInput = screen.getByTestId('start-date-input'); // 建议给元素添加data-testid
  fireEvent.click(startDateInput);

  // 定位日历中的目标日期并点击（示例为15号）
  const targetDay = screen.getByText('15');
  fireEvent.click(targetDay);

  // 验证开始日期输入框的值是否更新为选中日期（格式根据组件实际输出调整）
  expect(startDateInput).toHaveValue('2024-05-15');
});

2. 测试快捷下拉选项触发onStartDateChange #

定位快捷选项下拉菜单，模拟选择某一选项（如Today），验证日期是否被自动填充：

test('quick option "Today" triggers onStartDateChange', () => {
  render(<DateRangePicker enableTime onApplyClick={jest.fn()} />);

  // 打开快捷选项下拉菜单
  const quickMenuBtn = screen.getByRole('button', { name: 'Quick Options' });
  fireEvent.click(quickMenuBtn);

  // 选择"Today"选项
  const todayOption = screen.getByText('Today');
  fireEvent.click(todayOption);

  // 验证开始日期输入框的值为当前日期
  const startDateInput = screen.getByTestId('start-date-input');
  const todayDate = new Date().toISOString().split('T')[0]; // 格式化为YYYY-MM-DD
  expect(startDateInput).toHaveValue(todayDate);
});

关键注意事项 #

• 给组件元素添加data-testid属性（如data-testid="start-date-input"），避免依赖文本或样式定位元素，提升测试稳定性。
• 若setStartAndEndDate同时更新endDate（比如选择This Month时自动设置结束日期为月末），需额外验证endDate对应的UI元素值。
• 若使用第三方日期处理库（如date-fns），确保测试中的日期格式与组件内部格式一致。

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