Search code examples
clickjsdomtesting-libraryuser-event

fireEvent.click() (form fireEvent) vs element.click() (from JSDOM)

Context: I'm using Testing Library and trying to understand some of the underlying mechanisms.

As JSDOM already provides the handling of the "click" event, I was wondering:

  • Is there a difference between these two ways of managing the event?
  • If not, why fireEvent redefines this event?

If there are differences, I would like to understand what they are and when to use one tool or the other.

(For the second question, I have an idea but I want to confirm: fireEvent provides a global and unified interface for generating events. And the click is a natural part of it.)

Solution

  • HTMLElement.click triggers a click event

    fireEvent.click triggers a click event with event properties of your choice (e.g. detail: 2)

    Straight from the docs:

    Note

    Most projects have a few use cases for fireEvent, but the majority of the time you should probably use @testing-library/user-event.

    userEvent.click triggers all events that should happen in a browser if a user clicks an element (hover, pointerdown, etc.)