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

使用React测试库时，我们经常需要模拟用户与应用程序的交互，以便测试应用程序的行为和响应。在模拟用户交互方面，我们可以使用两种主要的方法：userEvent.click和fireEvent。

jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';
test('点击按钮会触发回调函数', () => {
  const handleClick = jest.fn(); // 创建一个模拟的回调函数
  render(点击我);
  const button = screen.getByText('点击我'); // 获取按钮元素
  userEvent.click(button); // 模拟用户点击按钮
  expect(handleClick).toHaveBeenCalled(); // 验证回调函数被调用
});

jsx
import { render, screen } from '@testing-library/react';
import { fireEvent } from '@testing-library/react';
import Input from './Input';
test('输入框输入时会触发onChange事件', () => {
  const handleChange = jest.fn(); // 创建一个模拟的事件处理函数
  render();
  const input = screen.getByRole('textbox'); // 获取输入框元素
  fireEvent.change(input, { target: { value: 'hello' } }); // 模拟用户输入
  expect(handleChange).toHaveBeenCalledTimes(1); // 验证事件处理函数被调用
  expect(input.value).toBe('hello'); // 验证输入框的值是否正确
});