Question

我正在研究通过PanResponder处理手势的React Native组件。

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

是否有任何直接的方式使用Jest对以下单元进行单元测试？

Answer 1

我倾向于测试接线代码，因为测试实际的PanResponder涉及难以编写的UI测试，通常不稳定，并且没什么价值。

您可以做的是提取事件处理功能，并独立测试。

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

如何在React Native中对PanResponder进行单元测试？

1 个答案: