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

Posted 2023-02-19

【中文标题】React 测试库：何时使用 userEvent.click 以及何时使用 fireEvent

【英文标题】：React Testing Library: When to use userEvent.click and when to use fireEvent

【发布时间】：2021-01-08 09:06:07

【问题描述】：

我目前正在学习 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);

提前感谢您的澄清。

【参考方案1】：

在幕后，userEvent 使用fireEvent。您可以将fireEvent 视为低级api，而userEvent 设置动作流。

Here is the code for userEvent.click

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

【讨论】：

一个很好的例子是，当您使用 fireEvent.click 在按钮上触发点击事件时，该按钮将不会获得焦点。按钮未聚焦。但是使用 userEvent.click()，这个按钮将被聚焦。 useEvent 可以更好地反映用户的真实行为。