如何测试React Native Slider组件并模拟滑动手势

基于React Native Slider开发的滑块组件做测试时，React Native Testing Library内置的fireEvent默认仅提供三类手势触发能力：

• fireEvent.Press

• fireEvent.changeText

• fireEvent.scroll
  无法直接满足滑动手势模拟需求，可通过以下三种可行方案实现：

• 方案1：手动拼接触控事件流模拟完整滑动
  滑动手势本质是连贯的触控事件序列，可直接通过fireEvent按真实交互顺序派发对应触控事件，不需要依赖封装好的专用事件方法：

  1. 先拿到渲染后的滑块元素
  2. 触发触控开始事件：fireEvent(slider, 'touchStart', { nativeEvent: { locationX: 滑动起点X坐标, locationY: 0 } })，对应滑块的onSlidingStart回调触发
  3. 按需多次触发触控移动事件：fireEvent(slider, 'touchMove', { nativeEvent: { locationX: 过程点X坐标, locationY: 0 } })，对应滑块拖动过程中的onValueChange连续回调
  4. 触发触控结束事件：fireEvent(slider, 'touchEnd', { nativeEvent: { locationX: 滑动终点X坐标, locationY: 0 } })，对应滑块的onSlidingComplete回调触发
     注意：传入的X坐标需要结合滑块渲染后的实际宽度，换算为对应滑块值的坐标位置，才能正确触发预期的数值变更。

• 方案2：使用配套的用户事件模拟工具
  可以直接使用React Native Testing Library生态配套的@testing-library/user-event工具，它内置了贴近真实用户行为的交互模拟逻辑，不需要手动拼接事件序列，直接调用专用的滑块滑动API即可：

  import userEvent from '@testing-library/user-event';
  
  const user = userEvent.setup();
  // 拿到可调节角色的滑块元素
  const sliderEle = screen.getByRole('adjustable');
  // 模拟用户滑动到指定目标值
  await user.slide(sliderEle, 目标滑块值);
  

  该方法会自动按真实交互的时序派发所有底层事件，不需要手动计算坐标，测试代码更简洁，稳定性也更高。

• 方案3：Mock第三方滑块组件验证业务逻辑
  如果测试目标是自己封装滑块组件的业务逻辑，而非第三方Slider组件本身的交互实现（第三方组件自身已经完成完备测试），可以直接在测试中mock掉React Native Slider组件，手动触发组件传入的onValueChange、onSlidingComplete等回调属性，传入模拟的滑动值即可。这种方案测试执行速度最快，也不会出现原生事件模拟的兼容性问题。

注意：不要尝试用fireEvent.scroll模拟滑块滑动，React Native Slider内部没有绑定滚动事件监听，触发scroll事件不会产生任何交互效果。

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