PanResponder单元测试：如何通过fireEvent正确传递GestureState的dx值

在React Native的MyComponent组件中，_g.dx无法接收单元测试用例传递的dx值，尝试多种通过fireEvent触发responderGrant和responderMove的方式均未解决问题。

组件代码 #

const MyComponent: React.FC<Props> = (props) => {
  const { onStart, onMove,} = props;
  
  function onPanResponderStart() { onStart && onStart()}

  const onPanMove = useCallback(
    async (_: any, _g: PanResponderGestureState) => {
      _g.dx > 0 && onMove && onMove()
    },[],
  );

  const panResponder = useCallback(
    PanResponder.create({
      onStartShouldSetPanResponder: (e: any, s: any) => true,
      onStartShouldSetPanResponderCapture: (e: any, s: any) => true,
      onMoveShouldSetPanResponder: (e: any, s: any) => true,
      onMoveShouldSetPanResponderCapture: (e: any, s: any) => true,
      onShouldBlockNativeResponder: (e: any, s: any) => true,
      onPanResponderGrant: onPanResponderStart,
      onPanResponderMove: onPanMove,
      onPanResponderRelease: (e: any, s: any) => true,
    }) as any,
    [props],
  );

  return (
    <Animated.View {...panResponder.panHandlers} testID="TestAnimView">
      <View><Text>USK</Text></View>
    </Animated.View>
  );
};

测试代码（MyComponent.test.tsx） #

it("should trigger onMove", () => {
  const onMoveFn = jest.fn();
  
  const { getByTestId } = render(
    <MyComponent onMove={onMoveFn} />,
  );

  const animView = getByTestId("TestAnimView");

  fireEvent(animView, "responderGrant", {
      nativeEvent: { touches: [{ clientX: 0 }] },
  });

  fireEvent(animView, "responderMove", {
      nativeEvent: { touches: [{ clientX: 100 }] },
      gestureState: { dx: 100, dy: 0, vx: 0, vy: 0, numberActiveTouches: 1 },
  });

  expect(onMoveFn).toHaveBeenCalled();
});

上述测试失败，尝试以下两种解决方案均未成功传递dx值：

解决方案2（无效）

// Simulate the start of the gesture
fireEvent(animView, 'responderGrant', {
  nativeEvent: { touches: [{ pageX: 0, pageY: 0 }] },
  touchHistory: { touchBank: [] },
});

// Simulate the movement during the gesture
fireEvent(animView, 'responderMove', {
  nativeEvent: { touches: [{ pageX: 250, pageY: 0 }] }, 
  touchHistory: { touchBank: [] },
});

解决方案3（无效）

fireEvent(animView, 'responderGrant', {
  nativeEvent: {
    touches: [{ pageX: 0, pageY: 0 }], // Initial touch position
    changedTouches: [],
    target: animView,
    identifier: 1,
  },
  touchHistory: { touchBank: [] },
});

// Simulate the movement during the gesture
fireEvent(animView, 'responderMove', {
  nativeEvent: {
    touches: [{ pageX: 250, pageY: 0 }], // Swipe 
    changedTouches: [],
    target: animView,
    identifier: 1,
  },
  touchHistory: { touchBank: [] },
  gestureState: {
    dx: 250, // Horizontal distance moved
    dy: 0,   // Vertical distance moved
    vx: 0,   // Horizontal velocity
    vy: 0,   // Vertical velocity
    numberActiveTouches: 1,
  },
});

注：已知应将回调逻辑提取到工具函数或Hook中单独测试，现需解决当前测试中GestureState的dx值传递问题。

内容的提问来源于stack exchange，提问作者Uday Sravan K