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

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

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

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.)

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

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.

@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.

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

@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 https://github.com/jsdom/jsdom/issues/3232

I think the logic here is faulty somehow https://github.com/testing-library/user-event/commit/32e971226e41c8bb458d6f56982f3e603152cffc#diff-a681e050ffe760739876a36e05c9cfb1bb1ce0b6dae27c54152e16b9f6fac2f4

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

@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.

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 https://github.com/testing-library/user-event/pull/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()

Looks like a problem with the environment

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