What happens differently between user.click and element.click?

[angrybacon]

I understand that the documented and recommended way seems to be the following:

const user = userEvent.setup()
render(...);
await user.click(screen.getByRole('button'));

I still have many tests written that way though:

render(...);
screen.getByRole('button').click();

But struggle to see any practical difference in my tests, and while the documentation covers well fireEvent vs. userEvent already, it doesn't mention the element click method. What would be the preferred option when dealing with simple click events eg. test that callbacks aren't called on disabled buttons, called otherwise, etc

[official-burak]

element.click() fires one click event. user.click() is a pointer interaction: hover (unless skipHover), then pointerdown/mousedown, focus, pointerup/mouseup, then click.

Native click skips two checks that matter for the disabled-button case:

1. pointer-events: none throws (assertPointerEvents).
2. Disabled form controls skip mouseup and click (isDisabled in the mouse up path). The handler is not called.

jsdom's HTMLElement.click() often still dispatches click on a disabled button. A real user cannot do that, and user.click() will not fire the callback.

Use user.click() for those tests. Keep element.click() only when you want a single synthetic click with no pointer checks.

[snowystinger]

More info here: https://testing-library.com/docs/user-event/convenience/
https://testing-library.com/docs/user-event/pointer