如何在React Native中进行单位测试Panresponder

Question

我正在通过panresponder处理反应本机组件处理手势。

我想测试，当某些 dx ， 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;
  }
}

是否有任何直接的方法可以用开玩笑测试以下操作？

Answer 1

i倾向于将测试打出接线代码，因为测试实际的panResponder涉及的UI测试很难编写，通常是片状的，并且几乎没有值。

>

您能做的就是提取事件处理功能，然后独立测试。

在这种情况下，测试将非常简单，因为您需要做的就是调用测试中的处理程序，并看到您得到了您的预期。

Answer 2

如果要测试用户与组件的交出，应该以某种方式将作为params as as params的函数转发到 PanResponder.create到 panHandlers to CC_4返回。

。

// setup-tests.ts
jest.doMock('react-native', () => {
  return Object.setPrototypeOf(
      PanResponder: {
        ...ReactNative.PanResponder,
        create: (config: any) => ({ panHandlers: config }),
      },
    },
    ReactNative
  );
});

tha Way，当您在处理锅的视图中传播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>
    );

，最后，单位测试将是这样的

// pan-handling-component.test.tsx
...
    const panHandler = instance.root.findByProps({
      testID: DRAWER_WRAPPER_TESTID,
    });
    act(() => {
      panHandler.props.onPanResponderMove(eventMock, gestureStateMOck);
      panHandler.props.onPanResponderRelease();
    });

...