使用@testing-library/react与user-event测试MUI DateTimePicker遇问题求助

针对你遇到的两个测试问题，给出以下调试和解决思路：

问题1：必须使用skipPointerEventsCheck: true #

skipPointerEventsCheck属于规避性方案，不建议长期依赖，问题根源通常是这两类情况：

• 组件未完成渲染就尝试交互，目标元素还处于不可交互状态
• 时间选择器的下拉层（如Popper/Dialog容器）CSS设置了pointer-events: none，但实际可交互的是内部子元素

可以尝试这两种优化方案：

• 用waitFor等待元素进入可交互状态后再操作：

  await waitFor(() => {
    expect(screen.getByRole('listbox')).toBeEnabled();
  });
  

• 检查是否定位到了真正可点击的元素：部分组件的option仅为视觉容器，实际可交互的是内部按钮或div，可尝试用screen.getByText('20 hours')定位后再执行点击

问题2：选择小时后不切换到分钟界面 #

userEvent.selectOptions是针对原生<select>元素的方法，而自定义的DateTimePicker组件通常不依赖原生select逻辑，用这个方法无法触发组件内部的状态更新。应该模拟真实用户的点击操作：

// 替换selectOptions为click操作
await userEvent.click(screen.getByRole('option', {name: '20 hours'}));
// 等待分钟选择界面渲染完成
const minuteOption = await screen.findByRole('option', {name: '00 minutes'});
await userEvent.click(minuteOption);

另外，记得在测试结束后清理假定时器，避免影响其他测试用例：

afterEach(() => {
  jest.useRealTimers();
});

完整优化后的测试代码示例 #

it('test picker', async () => {
    jest.useFakeTimers().setSystemTime(new Date('2022-12-15T14:03:23Z'));
    render((
        <LocalizationProvider dateAdapter={AdapterDateFns as any}>
            <MyComponentContainingADateTimePicker />
        </LocalizationProvider>
    ));

    // 打开选择器
    await userEvent.click(screen.getByRole('button', {name: 'Choose date'}));
    // 选择当月某一天
    await userEvent.click(screen.getByRole('gridcell', {name: '16'}));
    
    // 等待小时选择界面加载完成并点击
    const hourOption = await screen.findByRole('option', {name: '20 hours'});
    await userEvent.click(hourOption);
    
    // 等待分钟选择界面切换完成并点击
    const minuteOption = await screen.findByRole('option', {name: '00 minutes'});
    await userEvent.click(minuteOption);

    // 可添加断言验证选择结果
    expect(screen.getByRole('button', {name: 'Choose date'})).toHaveTextContent('16 Dec 2022, 20:00');
});

afterEach(() => {
  jest.useRealTimers();
});

关键注意点 #

• 所有异步操作必须加await，确保组件状态更新完成后再执行下一步
• 优先使用findBy*异步查询方法替代getBy*同步方法，避免因组件未渲染完成导致的查询失败
• 模拟真实用户的交互路径（点击而非selectOptions），才能正确触发组件内部的状态切换逻辑

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