如何通过弹药弹药的弹药来通过妊娠panresponder单位测试

Question

_g.dx

没有从测试用例中获得

dx

值。如何正确传递它？

  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} />,
    );

    // Get the AnimateView element
    const animView = getByTestId("TestAnimView");

    // Simulate the start of the gesture
    fireEvent(animView, "responderGrant", {
        nativeEvent: { touches: [{ clientX: 0 }] },
    });

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

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

Above测试失败。因此，在下面尝试过的解决方案，但它们都没有将

dx

值传递给mycomponents中的回调。

solution2

不起作用

// 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: [] },
  });

solution3

不起作用

  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,
    },
  });

尝试了许多其他解决方案，但它们都没有起作用。

P.S：

我同意我们不应在单位测试中测试手势。我们应该将回调的逻辑提取到助手或钩子上，然后分别测试。

在花费大量时间进行调试之后。这是对我有用的解决方案。

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

    // Simulate the movement during the gesture
    fireEvent(animView, "responderMove", {
      touchHistory: {
        mostRecentTimeStamp: "1",
        touchBank: [
          {
            touchActive: true,
            currentTimeStamp: 1,
            currentPageX: 10, // This will be gestureState.dx
            previousPageX: 0,
          },
        ],
        numberActiveTouches: 1,
        indexOfSingleActiveTouch: 0, // for touchBank[0]
      },
    });

Answer 1

您必须相应地调整值，以根据您的回调中的逻辑模拟正确的手势值。

季节：

孕期是由通过

touchHistory

和

touchBank

提供的值在内部确定的。