为什么我的代码在单元测试渲染时没有正确反映

Question

我有这个测试

describe('Effective Date', () => {
  test('User select or key in valid date', async () => {
    debug();
    const effectiveDate = screen.getByTestId('effectiveDateinput');
    await act(async () => {
      await userEvent.type(effectiveDate, '01/01/2023');
    });
    expect(effectiveDate).toHaveValue('01/01/2023');
  });
})

我正在测试正确的输入

const handleEffectiveDateOnChange = date => {
    if (date === null || date === undefined) {
      setErrors(prevErrors => ({
        ...prevErrors,
        effectiveDate: 'Please fill in the field above',
      }));
    } else if (!validateDateFormat(date)) {
      setErrors(prevErrors => ({
        ...prevErrors,
        effectiveDate: 'Please enter the date in DD/MM/YYYY format',
      }));
    } else {
      setErrors(prevErrors => ({
        ...prevErrors,
        effectiveDate: '',
      }));

      setEffectiveDate(date);
    }
  };

它说

 TestingLibraryElementError: Unable to find an element by: [data-testid="effectiveDateinput"]

但是当我返回我的页面查看时，我有这个

data-testid="effectiveDateinput"

作为我的生效日期

<div className="col-md-3">
                  <label className={`user-details-label`} htmlFor="effectiveDate">
                    Effective Date<span style={{ color: 'red' }}>*</span>
                  </label>

                  <LocalizationProvider dateAdapter={AdapterMoment}>
                    <DatePicker
                      format="DD/MM/YYYY"
                      onChange={date => handleEffectiveDateOnChange(date)}
                      value={effectiveDate}
                      data-testid="effectiveDateinput"
                      sx={{
                        width: '100%',
                        '& .MuiInputBase-input': {
                          padding: '6px 12px',
                        },
                        '& .MuiInputBase-root': {
                          borderRadius: 'var(--bs-border-radius)',
                          color: 'var(--bs-body-color)',
                        },
                      }}
                      slotProps={{
                        textField: {
                          id: 'expiryDate',
                          variant: 'standard',
                        },
                      }}
                    />
                    {errors.effectiveDate && <ErrorBar errorMsg={errors.effectiveDate} />}
                  </LocalizationProvider>
    </div>

我测试错了吗？

更新： 尝试使用await

 const effectiveDate = await screen.getByTestId('effectiveDateinput');

但也有同样的问题

Answer 1

根据此 GitHug issue，似乎并非所有无关的 props 都会传递到实际的 DOM 元素。 “修复”是使用自定义输入（

customInput

属性）并传递所有其他属性，然后指定

data-x

（和任何其他）属性。

示例：

const CustomInput = React.forwardRef((props, ref) => (
  <input ref={ref} type="text" {...props} />
));

<DatePicker
  format="DD/MM/YYYY"
  onChange={handleEffectiveDateOnChange}
  value={effectiveDate}
  customInput={<CustomInput data-testid="effectiveDateinput" />} // <--
  sx={{
    width: '100%',
    '& .MuiInputBase-input': {
      padding: '6px 12px',
    },
    '& .MuiInputBase-root': {
      borderRadius: 'var(--bs-border-radius)',
      color: 'var(--bs-body-color)',
    },
  }}
  slotProps={{
    textField: {
      id: 'expiryDate',
      variant: 'standard',
    },
  }}
/>