react如何模拟事件
模拟事件的方法
在React中模拟事件通常用于测试或触发特定交互行为。以下是几种常见方法：
使用fireEvent（React Testing Library）
import { render, fireEvent } from '@testing-library/react';
test('button click', () => {
const handleClick = jest.fn();
const { getByText } = render(<button onClick={handleClick}>Click</button>);
fireEvent.click(getByText('Click'));
expect(handleClick).toHaveBeenCalledTimes(1);
});使用simulate（Enzyme）
import { shallow } from 'enzyme';
test('input change', () => {
const wrapper = shallow(<input onChange={() => {}} />);
wrapper.simulate('change', { target: { value: 'test' } });
});手动创建事件对象
const event = new MouseEvent('click', {
bubbles: true,
cancelable: true,
});
element.dispatchEvent(event);合成事件测试 对于React合成事件的特殊属性测试：
const event = {
preventDefault: jest.fn(),
stopPropagation: jest.fn()
};
component.instance().handleClick(event);
expect(event.preventDefault).toHaveBeenCalled();注意事项
- 合成事件会自动冒泡，需在测试中模拟
bubbles: true - 异步事件需配合
await或act处理 - 表单事件需完整模拟
target.value等属性 - 键盘事件需指定
keyCode或key属性
