React 测试库使用 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)
  }
}