reactjs - 使用 userEvent、fireEvent 和常规点击在点击之间 react 测试库的差异

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)
  }
}