Unable to test with DateRangePicker

[xereda]

react-dates version
21.8.0

Describe the bug
I use the "DateRangePicker" component in a project and I need to test the user flow with the Testing Library. The problem is that when I do the first click (userEvent.click()), on the first date, the modal is closed, not waiting for the selection of the second date.

 "@testing-library/react": "^14.0.0",
 "@testing-library/user-event": "^14.4.3",
 "react-dates": "^21.8.0",

Source code (including props configuration)
Steps to reproduce the behavior:

    <DateRangePicker
      noBorder
      minimumNights={0}
      startDate={startDate}
      startDateId="start-date-id"
      endDate={endDate}
      endDateId="end-date-id"
      onDatesChange={handleDatesChange}
      focusedInput={focusedInput}
      onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
      isOutsideRange={isOutsideRange}
      onClose={handleOnClose}
      withPortal={true}
      customInputIcon={label}
      hideKeyboardShortcutsPanel={true}
    />

[ljharb]

We recommend testing with enzyme, but in particular, no testing solution's event simulations (enzyme and RTL included) are actually true matches of browser behavior - they just invoke props - so they're not very useful.

The click you want doesn't go on the picker directly, it goes on one of the smaller elements contained within it.

[xereda]

@ljharb Thanks for the answer.
I use the Testing Library to test cover the entire application. At the moment there are more than 600 test scenarios. Many of them simulating user interaction and working perfectly. It is not an option to switch to Enzyme. The only issue we had was with the DateRangePicker.

[ljharb]

Understood, but I'm trying to convey that "simulating user interaction" with either RTL or with enzyme doesn't actually give you value, even if it seems to "work", because it doesn't actually match user interaction.

At any rate, the issue at hand is likely that your .click() isn't targeting the right element. If you can make a codesandbox that can reproduce the problem I'm happy to take a look.

[xereda]

I got the elements for the start and end date through the getByRole method. Note below:

    const firstDate = screen.getByRole('button', {
      name: /choose terça-feira, 1 de agosto de 2023 as your check-in date. it’s available./i,
    });
    const lastDate = screen.getByRole('button', {
      name: /choose terça-feira, 22 de agosto de 2023 as your check-in date. it’s available./i,
    });

[ljharb]

Sounds like an issue with RTL then; i'm not sure how getByRole works.

[xereda]

@ljharb

https://github.com/xereda/datepicker-test

In this repository I managed to reproduce the problem.

[xereda]

Sounds like an issue with RTL then; i'm not sure how getByRole works.

getByRole

The getByRole method from the Testing Library provides a way to select an element by its accessible role. This query is recommended because it encourages developers to write tests that rely on the accessibility information of elements, which ultimately leads to more accessible applications.

https://testing-library.com/docs/queries/byrole/

[xereda]

@ljharb

https://github.com/xereda/datepicker-test

In this repository I managed to reproduce the problem.

src/components/Datepicker/Datepicker.test.js

https://github.com/xereda/datepicker-test/blob/main/src/components/Datepicker/Datepicker.test.js

yarn test:watch

Note that the modal is closed on the first click.