reactjs - Antd Date Picker Jests with React-testing-library 没有设置输入值

Question

我正在使用 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)

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

谢谢。

Answer 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'));

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