react如何模拟事件
模拟事件的基本方法
在React中模拟事件通常用于测试组件的行为或触发特定交互。可以通过ReactTestUtils或@testing-library/react等工具实现。
安装@testing-library/react：
npm install --save-dev @testing-library/react使用@testing-library/react模拟点击事件
通过fireEvent方法触发DOM事件：
import { render, fireEvent } from '@testing-library/react';
test('button click triggers handler', () => {
const handleClick = jest.fn();
const { getByText } = render(<button onClick={handleClick}>Click</button>);
fireEvent.click(getByText('Click'));
expect(handleClick).toHaveBeenCalledTimes(1);
});模拟表单输入事件
对于输入框变化事件的模拟：
test('input change updates state', () => {
const { getByPlaceholderText } = render(<input placeholder="Name" />);
const input = getByPlaceholderText('Name');
fireEvent.change(input, { target: { value: 'John' } });
expect(input.value).toBe('John');
});模拟键盘事件
触发键盘相关交互：
test('Enter key submits form', () => {
const handleSubmit = jest.fn();
const { getByRole } = render(
<input type="text" onKeyDown={(e) => e.key === 'Enter' && handleSubmit()} />
);
fireEvent.keyDown(getByRole('textbox'), { key: 'Enter' });
expect(handleSubmit).toHaveBeenCalled();
});使用jest.fn()创建模拟函数
验证事件处理函数是否被调用：
const mockFn = jest.fn();
render(<Component onClick={mockFn} />);
fireEvent.click(screen.getByRole('button'));
expect(mockFn).toHaveBeenCalled();模拟复杂事件对象
需要传递特定事件属性时：
fireEvent.change(getByTestId('file-input'), {
target: {
files: [new File(['content'], 'test.png', { type: 'image/png' })],
},
});注意事项
- 事件模拟不会完全复制浏览器原生行为，仅触发React的事件系统
- 对于合成事件（SyntheticEvent），需确保传递正确的事件对象结构
- 测试异步事件时需配合
waitFor或act使用
