React单元测试报错：无法找到指定data-testid的DatePicker元素

MUI的DatePicker是复合组件，直接给组件本身添加data-testid，这个属性会挂载到组件的根容器DOM上，而非实际可输入的<input>元素上——而你的测试代码要定位和操作的是输入框，所以会出现找不到元素的错误。

1. 修正data-testid的挂载位置 #

将data-testid从DatePicker组件移到slotProps.textField属性中，因为实际的输入框是由TextField插槽渲染的。同时顺便修正textField的id与label的htmlFor值一致（原代码中label的htmlFor="effectiveDate"，但slotProps.textField.id设为了expiryDate，这会导致表单关联失效）：

<LocalizationProvider dateAdapter={AdapterMoment}>
  <DatePicker
    format="DD/MM/YYYY"
    onChange={date => handleEffectiveDateOnChange(date)}
    value={effectiveDate}
    sx={{
      width: '100%',
      '& .MuiInputBase-input': {
        padding: '6px 12px',
      },
      '& .MuiInputBase-root': {
        borderRadius: 'var(--bs-border-radius)',
        color: 'var(--bs-body-color)',
      },
    }}
    slotProps={{
      textField: {
        id: 'effectiveDate', // 与label的htmlFor值保持一致
        variant: 'standard',
        'data-testid': 'effectiveDateinput' // 将testid移到输入框对应的属性中
      },
    }}
  />
  {errors.effectiveDate && <ErrorBar errorMsg={errors.effectiveDate} />}
</LocalizationProvider>

2. 优化测试代码 #

移除不必要的act包裹——@testing-library/user-event的异步方法会自动处理React状态更新，手动包裹act属于冗余操作。同时使用findByTestId（结合await）确保等待元素渲染完成：

describe('Effective Date', () => {
  test('User select or key in valid date', async () => {
    // 务必确保测试前已渲染包含DatePicker的目标组件
    // render(<YourFormComponent />);
    
    debug(); // 此时可通过debug输出确认输入框已带有目标data-testid
    const effectiveDate = await screen.findByTestId('effectiveDateinput');
    await userEvent.type(effectiveDate, '01/01/2023');
    expect(effectiveDate).toHaveValue('01/01/2023');
  });
})

额外排查技巧 #

如果问题依旧，执行测试时可以通过screen.debug()输出当前DOM结构，确认data-testid="effectiveDateinput"是否出现在<input>元素上，以此验证属性是否挂载正确。

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