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

Question

我用的是antd的range date picker(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'));

如果您尝试更改输入的值而不像那样继续操作，它可能不会起作用，请记住输入默认设置为只读，无论何时您将尝试仅使用输入它将重置输入。

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

Antd Date Picker Jests with React-testing-library not setting the input value

reactjs

jestjs

antd

react-testing-library

react-testing