Jest测试中按日期切换时段数组长度异常问题求助

你的测试失败核心原因有两个：

1. 错误的事件触发方式：你用fireEvent.focus来设置日期值，但React DatePicker（以及Formik的表单字段）是通过onChange事件来更新值的，focus事件不会触发表单值的更新，自然不会触发时间选项的重新渲染。
2. 未等待组件异步更新：Formik的状态更新是异步的，修改日期后组件需要重新渲染，你直接在触发事件后立即断言，拿到的还是初始渲染的时间选项。

修正后的测试用例 #

test('time options are updating depending on the date selected', async () => {
    render(<BookingForm />);

    const dateInput = screen.getByLabelText('Date');
    
    // 触发change事件更新日期值，注意格式要和组件期望的一致
    fireEvent.change(dateInput, { target: { value: '09/30/2024' } });

    // 等待组件重新渲染，获取更新后的时间选项
    await waitFor(() => {
        const availability = screen.getAllByTestId('time-option');
        expect(availability).toHaveLength(15);
    });

    // 验证日期值是否正确设置
    expect(dateInput).toHaveValue('09/30/2024');
    expect(screen.getByText('Select Time')).toHaveValue('Select Time');
});

额外注意事项 #

• 确认你的React DatePicker组件是否接受字符串格式的日期值，如果组件内部期望的是Date对象，可能需要调整事件触发的参数：

  fireEvent.change(dateInput, { target: { value: new Date('2024-09-30') } });
  

• 确保dayOfWeek的计算是在组件渲染时实时进行的（你的现有代码已经做到了，函数组件每次渲染都会重新计算dayOfWeek和availabilityForDay）。

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