react如何模拟事件
React 模拟事件的方法
在 React 中模拟事件通常用于测试或触发组件的行为。以下是几种常见的方法：
使用 fireEvent 从 @testing-library/react
fireEvent 是 React Testing Library 提供的工具，用于模拟用户交互。
import { render, fireEvent } from '@testing-library/react';
test('button click triggers event', () => {
const handleClick = jest.fn();
const { getByText } = render(<button onClick={handleClick}>Click</button>);
fireEvent.click(getByText('Click'));
expect(handleClick).toHaveBeenCalledTimes(1);
});使用 userEvent 从 @testing-library/user-event
userEvent 提供了更接近真实用户行为的模拟方式。
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
test('input change triggers event', async () => {
const handleChange = jest.fn();
const { getByPlaceholderText } = render(
<input placeholder="Name" onChange={handleChange} />
);
await userEvent.type(getByPlaceholderText('Name'), 'React');
expect(handleChange).toHaveBeenCalledTimes(5); // 'R', 'e', 'a', 'c', 't'
});直接调用事件处理函数
如果不需要模拟 DOM 交互，可以直接调用事件处理函数。
test('directly call event handler', () => {
const handleSubmit = jest.fn();
const event = { preventDefault: jest.fn() };
handleSubmit(event);
expect(handleSubmit).toHaveBeenCalledWith(event);
expect(event.preventDefault).toHaveBeenCalled();
});使用 jest.fn() 模拟事件对象
在测试中，可以用 jest.fn() 模拟事件对象的方法。
test('simulate event object', () => {
const handleKeyDown = jest.fn();
const event = {
key: 'Enter',
preventDefault: jest.fn(),
stopPropagation: jest.fn()
};
handleKeyDown(event);
expect(handleKeyDown).toHaveBeenCalledWith(event);
});在组件中手动触发事件
对于非测试场景，可以通过 ref 手动触发事件。
import { useRef } from 'react';
function Button() {
const buttonRef = useRef();
const triggerClick = () => {
buttonRef.current.click();
};
return (
<>
<button ref={buttonRef} onClick={() => console.log('Clicked')}>
Click
</button>
<button onClick={triggerClick}>Trigger Click</button>
</>
);
}注意事项
- 使用
fireEvent时，事件名称需与 DOM 事件名一致（如click、change）。 userEvent更适合模拟复杂的用户交互（如连续输入、拖拽）。- 直接调用事件处理函数时，需确保事件对象的模拟足够真实。
- 避免过度依赖模拟事件，尽量测试用户实际行为。
