reactjsjestjsantdreact-testing-libraryreact-testing

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


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.


Solution

  • 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.