Performance regression: hasPointerEvents increases click time

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

• Testing Framework and version: jest@27.0.2
• DOM Environment: jest-environment-jsdom@26.6.2

Relevant code or config

import userEvent from "@testing-library/user-event";
userEvent.click(await app.findByText("Test"));

What you did:

Clicked an element using @testing-library/user-event

What happened:

Went slower than expected

Problem description:

I upgraded to a newer version of this library that contains the following PR: https://github.com/testing-library/user-event/pull/631

More specifically it contains the following LOC: https://github.com/testing-library/user-event/blob/673c2257ef63f69dd46b9fe2d4bbc3146db1426b/src/utils/misc/hasPointerEvents.ts#L11

If I understand correctly it loops over the tree and using window.getComputedStyle(el) on every one. In our tests this seems to be quite costly depending on what you are clicking and how much you are rendering.

Below is an earlier version of user-event (13.0.0, before the PR had been merged). We do a bunch of clicks and every click clocks in about 10-40ms. The aggregated time for this specific test lands in about 500ms.

Below is the version we are using: 13.2.1. As you can see every click has increased and differs a bit of course but around 150-200ms for each click. And it is because of the checking of pointer-events. In my case over a large set of tests it adds minutes.

Solution description:

I do not know how to solve this. The pointer-events check is a good check to have but is there a more effecient way to check it?

[kentcdodds]

I think we should add a flag as well as a global configuration option which someone could flip on/off manually to make sure things are good and then switch back to have faster tests

[ph-fritsche]

@jesperorb A PR would be great.

https://github.com/testing-library/user-event/blob/673c2257ef63f69dd46b9fe2d4bbc3146db1426b/src/click.ts#L116-L120

The third parameter could be extended to clickOptions & PointerOptions.

interface PointerOptions {
  skipPointerEventsCheck?: boolean
}

PointerOptions should then be used by all our pointer APIs.

For the configuration across multiple calls: This should be handled when resolving #714 .