React 测试库：何时使用 userEvent.click 以及何时使用 fireEvent

Question

我目前正在学习 React-Testing-Library。

我想测试鼠标与元素的交互。目前我有点不清楚 userEvent.click(element) 和 fireEvent.click(element) 之间的区别。两者都被推荐使用，在下面的示例中它们是否被正确实施？

const mockFunction = jest.fn(() => console.info('button clicked'));
const { getByTestId } = render(<MyAwesomeButton onClick={mockFunction} />);
const myAwesomeButton = getByTestId('my-awesome-button');

// Solution A
fireEvent(myAwesomeButton)
expect(mockFunction.toHaveBeenCalledTimes(1);

// Solution B
userEvent.click(myAwesomeButton);
expect(mockFunction).toHaveBeenCalledTimes(1);

在此先感谢您的澄清。

Answer 1

在幕后，userEvent 使用 fireEvent。您可以将 fireEvent 视为 low-level api，而 userEvent 设置一系列操作。

Here is the code for userEvent.click

您可以看到，根据您尝试单击的元素，userEvent 将执行一组不同的操作（例如，如果它是标签或复选框）。

Answer 2

根据 Docs，您应该使用 user-event 来测试与您的组件的交互。

fireEvent 准确地分派您告诉它的事件，并且只分派那些 - 即使这些确切的事件从未在浏览器的真实交互中分派过。

另一方面，

User-event 会像用户与文档交互时发生的那样调度事件。这可能会导致您之前直接根据 fireEvent 发送相同的事件，但它也可能会捕获导致用户无法触发所述事件的错误。

React 测试库：何时使用 userEvent.click 以及何时使用 fireEvent

React Testing Library: When to use userEvent.click and when to use fireEvent

javascript

reactjs

react-testing-library