CODEWITHSUNDEEP
reactjsdatepickerantdreact-testing-library
Rohit Kumar
Rohit Kumar

Reputation: 105

Reset date value in antd datepicker(react-testing-library)

I want to test the functionality of clicking on the clear icon that appears on hovering on the antd datepicker but it's not working for me.

it('should clear start date', async () => {
        render(<Component />)
        const startDate = screen.getByPlaceholderText('SEARCH_START_DATE_PLACEHOLDER')
        // startDate.focus()
        fireEvent.mouseOver(startDate)
        const closeIcon = screen.getAllByRole('img', { name: 'close-circle' })[0]
        await act(async () => {
            await fireEvent.click(closeIcon)
        })
        console.log(startDate.getAttribute('value'), 'value')
        const endDate = screen.getByPlaceholderText("SEARCH_END_DATE_PLACEHOLDER");
        await fireEvent.mouseDown(endDate);
        await fireEvent.change(endDate, { target: { value: "2022-05-03" } });
        await act(async () => {
            fireEvent.click(document.querySelectorAll(".ant-picker-cell-selected")[0]);
        })
    })

Any help would be appreciated.

Upvotes: 0

Views: 1256

Answers (2)

Hula Hula
Hula Hula

Reputation: 26

First, You should select the container of the icon, not the icon itself.

Change:

const closeIcon = screen.getAllByRole('img', { name: 'close-circle' })[0]

To:

const closeIcon = (screen.getAllByRole('img', { name: 'close-circle' })[0]).parentElement

Then, use mouseUp event instead of click event.

Change:

await fireEvent.click(closeIcon)

To:

await fireEvent.mouseUp(closeIcon)

Upvotes: 1

Clem
Clem

Reputation: 28

When you say it's not working for you, what do you mean exactly? Is the clear button showing off but does nothing, or you cannot see the clear button at all? I think for the clear button to appear you must specify a defaultValue property on your DatePicker component.

Upvotes: 0

Related Questions