Regression: Click event suddenly stopped working (Reactstrap / Popper.js 1.x)

• @testing-library/user-event version: 13.1.1

• Testing Framework and version: Jest 26.6.3.
• DOM Environment: JSDOM 16.4.0, node 12.19.0

Relevant code or config

This code opens a modal that contains some buttons and clicks on them. The modal is provided by Reactstrap (8.9.0).

    it('can discard and apply a filter selection', () => {
        render(
            <TestRootContainer initialState={mockStore}>
                <BookingsFilter />
            </TestRootContainer>,
        );

        // open filter popover
        user.click(
            screen.getByRole('button', {
                name: 'cmb-web.filter.filter-by',
            }),
        );

        // expect filter apply button
        screen.getByRole('button', { name: 'cmb-web.filter.apply' });
        // expect no filters set
        screen.getByText('cmb-ui-core.active-filter-items.no-active-filters');
        // expect no reset button
        expect(screen.queryByRole('button', { name: 'cmb-web.filter.reset' })).toBe(null);

        // select a byType filter
        user.click(screen.getByRole('button', { name: 'cmb-ui-core.account-detail-filter.credit' }));
       //^^^^^^^^^^^^^
       //Here the code execution just stops. The onclick handler on the button is never called.

        // The test failed here because the button does not appear.
        user.click(screen.getByRole('button', { name: 'cmb-web.filter.reset' }));


        // Expect popover to have closed
        expect(screen.queryByRole('button', { name: 'cmb-web.filter.apply' })).toBe(null);

What you did: This test failed after an upgrade of user-events from 12.6.3 to 13.1.1. It worked again when I downgraded back to 12.6.3.

What happened: The test failed at the marked spot. Adding async / await did not help. Also using the bound getByRole did not help.

When run with the debugger the context never switched back to the React component after the click on the button. The flow went straight to the next line in the test.

The test then failed in the next line since the button click handler had not been called the UI never updated.

Reproduction repository:

I’ll try to find time to create a minimal repo that can reproduce the issue. But I hope that maybe you have an idea what could be the reason for this regression.

Problem description: The modal component does register some event listeners on document that close it when the user clicked outside of it. Could this be the reason?

If it helps, I can go through every release in between and try to see where the regression happened.

[acherkashin]

If somebody still has this problem skipPointerEventsCheck option was introduced and can be used in the following way:

userEvent.click(await screen.findByText('Zoom'), {}, { skipPointerEventsCheck: true });

[vicrep]

Cool! I’ll try get something up next week 😃