I am using the range date picker of antd (v4.x).
<StyledDatePicker inputReadOnly={false} value={dateRange} onChange={onChange} />
In my test file I'm doing the following :
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')));
I tried few console logs in between fire events to see if the input actually has the right value, but it's always empty.
I also tried with :
userEvent.type(rtl.getByPlaceHolderText(...), myValue)
It didn't seem to work either. If you guys have any solution to that problem I would be happy to take it.
Thanks.
After few hours.. I figured out a solution.
// 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'));
If you try to change the value of the input without proceeding like that, it will probably not work, keep in mind that inputs are set to read-only by default, whenever you will try to change a value with just typing it will reset the input.