Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

userEvent.click error when parent has inline style pointer-event definition and child css file pointer-event definition

See original GitHub issue

@testing-library/user-event version: 13.1.5

Testing Framework and version: jest 26.6.0
DOM Environment: jsdom 16.4.0

What you did: Upgraded my project to the current version of @testing-library/user-event

What happened: 1 test started throwing an error 'unable to click element as it has or inherits pointer-events set to "none".. Which is related to this commit https://github.com/testing-library/user-event/commit/6b2ce66939bc4f2f3fc6cbef954261b5e3fe89ae.

'unable to click element as it has or inherits pointer-events set to “none”.

Reproduction repository: https://github.com/jarretmoses/user-event-pointer-event-bug

Problem description: In the version of user-event 13.1.3 intentional errors started to be thrown for click events when they infact shouldn’t The bug is occurring when a parent element has pointer-events: none set inline but then the child has pointer-events: auto in a css file. In the actual browser this child element can in fact be clicked but the test is not correctly detecting the child elements computed styles.

Suggested solution: On initial inspection I am honestly not sure. It seems the code at first glance should work as its using getComputedStyles but upon inspecting the output in this instance I do not see my css anywhere. This is a unique situation I’ve not encountered before and perhaps this is exposing an config setup on my end. I thought jest imported css files but maybe I am mistaken?