如何用React Testing Library的user-event在图片指定坐标模拟点击？

核心方案 #

你的React组件通过MouseEvent.clientX/clientY处理点击坐标，直接用@testing-library/user-event的click方法或pointer系列方法就能模拟带坐标的点击，无需复杂操作。

具体实现步骤 #

1. 导入并初始化user-event
   确保使用v14+版本的user-event，先初始化用户实例：

   import userEvent from '@testing-library/user-event';
   import { render, screen } from '@testing-library/react';
   import SarahsMessGame from './SarahsMessGame';
   
   const user = userEvent.setup();
   

2. 获取目标图片元素
   通过测试库的查询方法定位房间图片：

   render(<SarahsMessGame />);
   const roomImage = screen.getByAltText('Sarah的房间');
   

3. 模拟指定坐标点击
   分两种场景选择实现方式：

   • 直接使用视口坐标：如果知道目标在视口中的绝对位置，直接传入clientX/clientY：

     // 模拟在视口(150, 220)位置点击图片
     await user.click(roomImage, {
       clientX: 150,
       clientY: 220,
     });
     

   • 使用图片相对坐标：如果需要基于图片内部的相对位置计算，先获取元素的视口位置再转换：

     const imageRect = roomImage.getBoundingClientRect();
     // 图片内部(60, 90)的位置，转换为视口坐标
     await user.click(roomImage, {
       clientX: imageRect.left + 60,
       clientY: imageRect.top + 90,
     });
     

4. 断言测试结果
   验证点击后是否触发了正确的游戏逻辑，比如找到玩具后的提示：

   expect(screen.getByText('找到Sarah的玩具啦！')).toBeInTheDocument();
   

注意事项 #

• 避免使用fireEvent，user-event的方法更贴近真实用户交互流程，能自动触发完整的事件链（比如pointerDown→pointerUp→click）
• 如果需要模拟更复杂的指针操作（比如拖拽），才需要手动调用user.pointer()方法分别触发pointerDown/pointerMove/pointerUp事件

内容的提问来源于stack exchange，提问作者wavesinaroom