如何在React Native中进行单位测试泛滥器？

Question

，

dy

值传递给

onPanResponderRelease方法时，将执行预期操作。请在下面找到我想测试的示例：

export default class MyComponent extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this._panResponder = this._initPanResponder();
  }

  _initPanResponder(): PanResponder {
    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null,
        { dx: this._animation.x, dy: this._animation.y }
      ]),
      onPanResponderRelease: (e, gestureState) => {
        const { dx, dy } = gestureState;

        if (dy > 100) {
          doSomething(); // <---- what I would like to unit test
        }
      }
    });
    return panResponder;
  }
}

有任何直接的方法可以用嘲笑测试以下操作？

I倾向于将测试代码排除在外，因为测试实际的panResponder涉及一个难以编写的UI测试，通常是片状的，并且具有很少的价值。

您可以做什么，是提取事件处理功能，然后独立测试。 在这种情况下，测试将非常简单，因为您需要做的就是调用测试中的处理程序，并看到您得到了您的预期。

Answer 1

如果您想测试用户与组件的交点，应以某种方式将作为params的函数转发到

PanResponder

到

PanResponder.create

panHandlers

返回的方式。

Answer 2

这些方式，当您在处理锅的视图中传播时，您可以按照文件中的设置方式访问功能。

panHandlers

，最后，单位测试将是类似的

// pan-handling-component.tsx

const Component: React.FC = () => {
...

  const panResponder = React.useRef(
      PanResponder.create({
        ...
        onPanResponderMove: (_, gestureState) => {
          Animated.event([slideAnim], { useNativeDriver: false })(
            gestureState.moveY
          );
        },
        onPanResponderTerminationRequest: () => true,
        onPanResponderRelease: () => {
          // @ts-ignore
          const currentValue = slideAnim._value;

          if (currentValue < 0) {
            slideIn();
          } else if (currentValue > height - 300) {
            handleClose();
          }
        },
      })
    ).current;

...

    return (

      <View
         testID={DRAWER_WRAPPER_TESTID}
         {...panResponder.panHandlers}
      > 
        ...
      </View>

    );

总的来说，您应该按照Kraylog提到的逻辑提取逻辑并测试。但是，如果您处于单位测试中使用gesturestate

进行vandresponder回调的情况，则可以做到这一点。

原始问题的代码看起来已经过时。因此，我为答案编写了这两个文件。

// pan-handling-component.test.tsx

...

    const panHandler = instance.root.findByProps({
      testID: DRAWER_WRAPPER_TESTID,
    });

    act(() => {
      panHandler.props.onPanResponderMove(eventMock, gestureStateMOck);
      panHandler.props.onPanResponderRelease();
    });


...

MyComponent.tsx

Answer 3

  import React, { useCallback } from "react";
  import { Animated, PanResponder, PanResponderGestureState, Text, View,} from "react-native";
  
  interface Props {
    onStart?: () => void;
    onMove?: () => void;
  }
  
  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()
      },[],
    );
  
    function onPanRelease(_e: any, _g: PanResponderGestureState) {}
  
    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: onPanRelease,
      }) as any,
      [props],
    );
  
    return (
      <Animated.View {...panResponder.panHandlers} testID="TestAnimView">
        <View><Text>USK</Text></View>
      </Animated.View>
    );
  };
  
  export default MyComponent;
  

MyComponent.test.tsx

没有任何文档都没有帮助。因此，经过激烈的调试，我找到了一种与Gesturestate一起测试Panresponder回调的方法。我希望有人发现它有帮助。