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

问题描述 投票:0回答:1

我有这个测试

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');
但也有同样的问题

unit-testing react-redux tsx
1个回答
0
投票

根据此 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',
    },
  }}
/>
© www.soinside.com 2019 - 2024. All rights reserved.