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

[jarretmoses]

• @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 6b2ce66.

'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?

[ph-fritsche]

Looks like a problem with the environment

https://codesandbox.io/s/cool-fog-ocs84?file=/src/__tests__/example.test.tsx

[Jayphen]

@jarretmoses If you figure out what is causing this I would be keen to know, as I am experiencing the same.

[jarretmoses]

@Jayphen its happening to me specifically on some antd setups I have. Was convinced it was when a child pointer event was set via css and then a parent via inline style but I couldn’t recreate it on my own so I’m stumped at the moment.

[Jayphen]

I discovered that for me it was a misconfiguration of Fela (css in js lib) in my test harness causing styles to persist between tests.

[WilliamPriorielloGarda]

@Jayphen its happening to me specifically on some antd setups I have. Was convinced it was when a child pointer event was set via css and then a parent via inline style but I couldn’t recreate it on my own so I’m stumped at the moment.

I am also encountering this issue when testing antd components (especially when trying to click on Confirmation dialogues and such)

[elado]

Same issue as @WilliamPriorielloGarda.
Can confirm that downgrading from ^13 to ^12 solves it.
React 17.

[WilliamPriorielloGarda]

@elado I was able to go up to 13.0.16. The changes in 13.1.x is what was problematic on my side. With version 13 we get access to the keyboard API as well.

[eddiemonge]

I think the logic here is faulty somehow 32e9712#diff-a681e050ffe760739876a36e05c9cfb1bb1ce0b6dae27c54152e16b9f6fac2f4

[hyalkaf]

any news on this? as I'm getting this error quite a bit when trying to use the library with antd

[taschetto]

Having the same problem with @material-ui/core buttons.

In my case, it was happening when I tried to click disabled buttons.

[fscgustavo]

In my case, it happened due to the fieldset tag as a parent node.

Div as parent node -> userEvent.click works ✔️

<div><button /></div>

Fieldset as parent node -> user.click does not work and this error appears ❌

fieldset is not disabled

<fieldset>
  <legend>...</legend>
  <button />
  <button />
</fieldset>

[ph-fritsche]

fieldset works too.
https://codesandbox.io/s/userevent-662-fieldset-3js9i?file=/src/App.js

Please consider the possibility that your components or your tests might be flawed and this error just highlights a false assumption.
The most likely mistake is that your component renders with pointer-events: none and changes this after some animation/transition. So when you try to click it immediately after rendering this error occurs.
See #639

As explained on the PR introducing the error message you can wait for the element to be available.

await waitFor(() => userEvent.click(element))

Should you find any bug please create a reproduction at codesandbox.
(Trying to do so often already clears up the situation.)

[fscgustavo]

Thanks for the tip, I will do it in the next issues.

I forgot some details, I just edited the sandbox. I do not know if I still doing something wrong.

https://codesandbox.io/s/userevent-662-fieldset-forked-sdz8w?file=/src/App.js

[ph-fritsche]

@fscgustavo Thanks a lot for adding this.
Turns out there is a bug in jsdom regarding the :disabled pseudo-class. The fieldset is falsely considered :disabled.
As form controls in a disabled fieldset are disabled too, your CSS rule regarding pointer-events is applied.
See jsdom/jsdom#3232

[lexanth]

Looks like a problem with the environment

https://codesandbox.io/s/cool-fog-ocs84?file=/src/__tests__/example.test.tsx

This is a bit strange - this is actually working because of the relatively unusual codesandbox test runner environment. If you download that sandbox and try to run the tests locally (standard CRA jest config), the tests fail.

AFAIK most JSDom-based test environments don't typically include CSS files actually being loaded (e.g. jest's docs suggest you probably don't want to - https://jestjs.io/docs/webpack#handling-static-assets). Codesandbox's test runner is just sending everything to sandpack (their bundler), so it behaves more like webpack and actually loads the styles (sandpack style loader).

In an environment like most people's (I assume), CSS styles probably won't be being actually added to the application, will they? So this problem does exist.

I suppose one could write a different jest transform (or equivalent for other runners) which actually does inject styles like a real loader, although it would probably slow things down for little benefit (given that JSDom doesn't do layout).

So #731 (and related global config) is probably worth it to allow working around this issue without it being as hacky-looking as expect(() => userEvent.click(el)).toThrow()

[wingleungchoi]

waitfor does not work for me.
I set pointer-events to auto to work around it.
Hope it hope.
< HTMLElement >.style['pointer-events'] = 'auto';

[d4niells]

I've just updated @testing-library/user-event to ^14.4.3 and tried it like this: await userEvent.hover(button, { pointerEventsCheck: 0 }); it worked for me.

[skipjack]

I'm seeing a potentially different issue, we're using styled-components and it flags a tr with an ::after element that's styled with pointer-events: none. It's claiming children (e.g. td) will inherit this pointer-events: none and prevent clicks but that's clearly not the case (the click handlers work fine in a real browser).

[rifandani]

I've just updated @testing-library/user-event to ^14.4.3 and tried it like this: await userEvent.hover(button, { pointerEventsCheck: 0 }); it worked for me.

I have encounter similar issue but when using Storybook v8.0.6 interaction testing. The play code looks something like this:

await ctx.step('Clicking "Cancel" or "Continue" should close the dialog', async () => {
      await userEvent.click(parent.getByRole('button', { name: cancel }))
      await expect(alertDialog).toBeNull()
      await userEvent.click(openButton)
      await userEvent.click(parent.getByRole('button', { name: continuee }))
      await expect(alertDialog).toBeNull()
})

It looks like pointerEventsCheck default is PointerEventsCheckLevel.EachCall. Solved by downleveling to PointerEventsCheckLevel.EachTarget:

import { PointerEventsCheckLevel } from '@testing-library/user-event'

await userEvent.click(openButton, { pointerEventsCheck: PointerEventsCheckLevel.EachTarget })

[sajidrsk]

I've just updated @testing-library/user-event to ^14.4.3 and tried it like this: await userEvent.hover(button, { pointerEventsCheck: 0 }); it worked for me.

This works.