So testen Sie PanResponder in React Native?

Question

Ich arbeite an einer React Native Komponente, die Gesten über PanResponder handhabt.

Ich möchte testen, dass, wenn bestimmte dx, dy Werte an die Methode onPanResponderRelease übergeben werden, wird erwartet Aktion ausgeführt werden. Nachfolgend finden Sie ein Beispiel dafür, was ich testen möchte:

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

Gibt es eine einfache Möglichkeit, um Unit-Test folgendes mit Jest?

Answer 1

Ich tendiere dazu, den Verdrahtungscode zu testen, da das Testen eines PanResponders einen UI-Test beinhaltet, der schwer zu schreiben ist, normalerweise flockig ist und wenig Wert hat.

Sie können die Ereignisbehandlungsfunktion extrahieren und unabhängig testen.

In diesem Fall wäre der Test sehr einfach, da Sie nur den Handler im Test aufrufen müssen und sehen, dass Sie bekommen, was Sie erwartet haben.