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

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

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

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

Answer 2

在幕后，userEvent使用fireEvent. 你可以考虑fireEvent做一个底层的api，同时userEvent设置一个动作流。

这是代码 userEvent.click

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

Answer 3

fireEvent和之间的另一个值得一提的区别userEvent是，默认情况下 fireEvent 包装在act函数内，当用户执行某些操作并且此操作将导致组件更新和重新渲染时，这很有用。相反，如果我们使用userEvent可能会注意到"not wrapped in act(...)" warning控制台中出现的错误。

act(() => {
  userEvent.type(input, 'inputValue')
})

这里我们不需要 act 函数，因为它已经包裹在 fireEvent 上

fireEvent.change(input, {target: {value: 'inputValue'}})

这篇很棒的文章演示了这个概念 React 测试库的常见错误