使用 userEvent、fireEvent 和常规点击之间的点击反应测试库差异

Question

在使用 React 学习 TDD 的过程中，我注意到在测试中触发点击元素的方法有很多种。可以通过fireEvent.click()、userEvent.click()和HTML_ELEMENT.click()完成。

它们都工作正常。经过一番研究，我了解到userEvent.click() 基本上在引擎盖下使用了fireEvent，它更适合自动化测试（例如cypress），而fireEvent.click() 更适合单元测试。

但我找不到userEvent 和fireEvent 与可以使用的常规HTML_ELEMENT.click() 函数有何不同。

使用它们而不是使用常规点击功能可以获得什么好处？

Answer 1

我认为fireEvent.click() 只会发出onClick，而userEvent.click() 会发出当用户clicks 发生时会发生的各种事件。

这是点击标签时触发的功能之一：

function clickLabel(label, init, {clickCount}) {
  if (isLabelWithInternallyDisabledControl(label)) return

  fireEvent.pointerDown(label, init)
  fireEvent.mouseDown(
    label,
    getMouseEventOptions('mousedown', init, clickCount),
  )
  fireEvent.pointerUp(label, init)
  fireEvent.mouseUp(label, getMouseEventOptions('mouseup', init, clickCount))
  fireEvent.click(label, 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)
}

简而言之，fireEvent.click 是userEvent.click 中使用的步骤之一，还有更多步骤

你可以在这里阅读源代码：https://github.com/testing-library/user-event/blob/master/src/click.js

这里有更多来自源代码的代码，这些代码将在userEvent.click 上发生

function clickElement(element, init, {clickCount}) {
  const previousElement = getPreviouslyFocusedElement(element)
  fireEvent.pointerDown(element, init)
  if (!element.disabled) {
    const continueDefaultHandling = fireEvent.mouseDown(
      element,
      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) {
    fireEvent.mouseUp(
      element,
      getMouseEventOptions('mouseup', init, clickCount),
    )
    fireEvent.click(element, getMouseEventOptions('click', init, clickCount))
    const parentLabel = element.closest('label')
    if (parentLabel?.control) focus(parentLabel.control, init)
  }
}