带有 React-testing-library 的 Antd Datepicker Jest 未设置输入值

Posted 2023-02-21

【中文标题】带有 React-testing-library 的 Antd Datepicker Jest 未设置输入值

【英文标题】：Antd Date Picker Jests with React-testing-library not setting the input value

【发布时间】：2021-10-17 00:13:47

【问题描述】：

我正在使用 antd (v4.x) 的范围日期选择器。

 <StyledDatePicker inputReadOnly=false value=dateRange onChange=onChange />

在我的测试文件中，我正在执行以下操作：

fireEvent.change(rtl.getByPlaceholderText('Start date'), 
  target:  value: '2020-01-01' ,
);

fireEvent.change(rtl.getByPlaceholderText('End date'), 
  target:  value: '2020-03-03' ,
);

fireEvent.keyPress(rtl.getByPlaceholderText('End date'),  key: 'Enter', code: 13 );

await waitFor(() => fireEvent.click(rtl.getByText('Apply')));

我在触发事件之间尝试了几次控制台登录，以查看输入是否确实具有正确的值，但它始终为空。

我也试过了：

userEvent.type(rtl.getByPlaceHolderText(...), myValue)

它似乎也不起作用。如果你们对这个问题有任何解决方案，我很乐意接受。

谢谢。

【参考方案1】：

几个小时后..我想出了一个解决方案。

// Click on the filter icon 
fireEvent.click(rtl.container.querySelector('th:nth-child(3) .ant-table-filter-trigger'));
// Mouse down on element, to select input and trigger modal opening
fireEvent.mouseDown(rtl.getByPlaceholderText('Start date'));
// Writing the value of the desired date
fireEvent.change(rtl.getByPlaceholderText('Start date'), 
  target:  value: '2020-01-01' ,
);
// If the date format is valid, antd will highligh the written date, so we clicking on that one
fireEvent.click(document.querySelector('.ant-picker-cell-selected'));

如果您尝试更改输入的值而不进行这样的操作，它可能无法正常工作，请记住，输入默认设置为只读，每当您尝试通过键入来更改值时将重置输入。