react如何模拟事件
模拟事件的基本方法
在React中模拟用户事件（如点击、输入等）通常使用@testing-library/react或enzyme等测试工具。以下是常见事件的模拟方式：
点击事件模拟
import { render, screen, fireEvent } from '@testing-library/react';
test('click event', () => {
const handleClick = jest.fn();
render(<button onClick={handleClick}>Click</button>);
fireEvent.click(screen.getByText('Click'));
expect(handleClick).toHaveBeenCalledTimes(1);
});输入变更模拟
test('input change', () => {
const handleChange = jest.fn();
render(<input onChange={handleChange} />);
fireEvent.change(screen.getByRole('textbox'), {
target: { value: 'new value' }
});
expect(handleChange).toHaveBeenCalledWith(
expect.objectContaining({
target: { value: 'new value' }
})
);
});复合事件模拟
对于更复杂的事件序列，可以组合多个事件：
test('form submission', () => {
const handleSubmit = jest.fn(e => e.preventDefault());
render(
<form onSubmit={handleSubmit}>
<input name="username" />
<button type="submit">Submit</button>
</form>
);
fireEvent.change(screen.getByRole('textbox'), {
target: { name: 'username', value: 'test' }
});
fireEvent.click(screen.getByText('Submit'));
expect(handleSubmit).toHaveBeenCalled();
});自定义事件模拟
创建自定义事件对象时，需要符合浏览器事件规范：
const mockEvent = {
target: {
value: 'custom value',
files: [new File(['content'], 'test.png')]
},
persist: jest.fn()
};
fireEvent.change(screen.getByTestId('file-upload'), mockEvent);键盘事件模拟
模拟键盘交互需要指定正确的键位：
fireEvent.keyDown(document.activeElement, {
key: 'Enter',
code: 'Enter'
});异步事件处理
测试异步事件时需要结合async/await：
test('async click', async () => {
const asyncAction = () => new Promise(resolve => {
setTimeout(() => resolve('done'), 100);
});
render(<button onClick={asyncAction}>Async</button>);
fireEvent.click(screen.getByText('Async'));
await waitFor(() => expect(screen.queryByText('done')).toBeInTheDocument());
});注意事项
- 确保事件模拟后组件状态已更新，可使用
act包裹 - 对于受控组件，需要同时模拟事件和状态变更
- 文件上传等特殊事件需要构造符合接口的事件对象
- 鼠标移动等连续事件可能需要使用
fireEvent.mouseMove等特定API
