我有这个测试
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');
但也有同样的问题
根据此 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',
},
}}
/>