简介

user-event 是测试库的配套库，它通过分派在浏览器中执行交互时会发生的事件来模拟用户交互。

与 `fireEvent` 的区别

fireEvent 分派DOM 事件，而 user-event 模拟完整的交互，这可能会触发多个事件并在途中进行额外的检查。

测试库内置的 fireEvent 是浏览器低级 dispatchEvent API 的一个轻量级包装器，它允许开发人员在任何元素上触发任何事件。问题是浏览器通常会为一次交互触发多个事件。例如，当用户在文本框中输入内容时，该元素必须被聚焦，然后才会触发键盘和输入事件，并且输入内容时会更改元素的选择和值。

user-event 允许您描述用户交互而不是具体的事件。它在途中添加可见性和交互性检查，并像浏览器中的用户交互一样操作 DOM。它会考虑到浏览器例如不会让用户点击隐藏的元素或在禁用的文本框中输入内容。
这就是为什么您应该使用 user-event 来测试与组件的交互。

但是，有些用户交互或这些交互的某些方面还没有实现，因此还不能用 user-event 描述。在这些情况下，您可以使用 fireEvent 来分派软件依赖的具体事件。

请注意，这会使您的组件和/或测试依赖于您对交互具体方面的假设是否正确。因此，如果您已经付出了努力来指定此类交互的正确方面，请考虑为该项目做出贡献，以便 user-event 也能涵盖这些情况。

使用 `userEvent` 编写测试

我们建议在渲染组件之前调用 userEvent.setup()。这可以在测试本身中完成，也可以使用设置函数完成。我们不建议在测试本身之外渲染或使用任何 userEvent 函数 - 例如在 before/after 钩子中 - 原因如 "在测试时避免嵌套" 中所述。

import userEvent from '@testing-library/user-event'

// inlining
test('trigger some awesome feature when clicking the button', async () => {
  const user = userEvent.setup()
  // Import `render` and `screen` from the framework library of your choice.
  // See https://testing-library.node.org.cn/docs/dom-testing-library/install#wrappers
  render(<MyComponent />)

  await user.click(screen.getByRole('button', {name: /click me!/i}))

  // ...assertions...
})

import userEvent from '@testing-library/user-event'

// setup function
function setup(jsx) {
  return {
    user: userEvent.setup(),
    // Import `render` from the framework library of your choice.
    // See https://testing-library.node.org.cn/docs/dom-testing-library/install#wrappers
    ...render(jsx),
  }
}

test('render with a setup function', async () => {
  const {user} = setup(<MyComponent />)
  // ...
})

请注意，虽然直接调用 API（例如 userEvent.click()（将在内部触发 setup））在 v14 中仍然受支持，但此选项是为了简化从 v13 到 v14 的迁移，以及用于简单的测试。我们建议使用 userEvent.setup() 返回的实例上的方法。

与 fireEvent 的区别​

使用 userEvent 编写测试​

与 `fireEvent` 的区别

使用 `userEvent` 编写测试