1

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.

Hiimdjango
  • 431
  • 5
  • 21

1 Answers1

2

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.

Hiimdjango
  • 431
  • 5
  • 21