React testing library differences between clicks using userEvent, fireEvent and regular clicks

In the course of learning TDD with React, I noticed that there are different ways to trigger a click on an element in the test. It can be done through, and

They all work fine. After doing some research, I understood that basically uses fireEvent under the hood, and it is preferable for automated tests (e.g. cypress), while the is more preferable in unit tests.

But I could not find what both userEvent and fireEvent differ from the regular function that can be used.

What benefits do I gain from using them instead of using the regular click function?

1 answer

  • answered 2021-01-15 12:05 Taghi Khavari

    I think the only emits onClick which on the other hand emits all sort of events which when user clicks will happen.

    here is one of the functions which will trigger when a labeled is clicked:

    function clickLabel(label, init, {clickCount}) {
      if (isLabelWithInternallyDisabledControl(label)) return
      fireEvent.pointerDown(label, init)
        getMouseEventOptions('mousedown', init, clickCount),
      fireEvent.pointerUp(label, init)
      fireEvent.mouseUp(label, getMouseEventOptions('mouseup', init, clickCount)), getMouseEventOptions('click', init, clickCount))
      // clicking the label will trigger a click of the label.control
      // however, it will not focus the label.control so we have to do it
      // ourselves.
      if (label.control) focus(label.control)

    so in a nutshell is one the steps that are used in and there are more steps

    you can read the source code here:

    here are some more code from source code which will happen on

    function clickElement(element, init, {clickCount}) {
      const previousElement = getPreviouslyFocusedElement(element)
      fireEvent.pointerDown(element, init)
      if (!element.disabled) {
        const continueDefaultHandling = fireEvent.mouseDown(
          getMouseEventOptions('mousedown', init, clickCount),
        if (
          continueDefaultHandling &&
          element !== element.ownerDocument.activeElement
        ) {
          if (previousElement && !isFocusable(element)) {
            blur(previousElement, init)
          } else {
            focus(element, init)
      fireEvent.pointerUp(element, init)
      if (!element.disabled) {
          getMouseEventOptions('mouseup', init, clickCount),
        ), getMouseEventOptions('click', init, clickCount))
        const parentLabel = element.closest('label')
        if (parentLabel?.control) focus(parentLabel.control, init)