Testing Bauteilverhalten (click) in React-Mutter mit Jest

Question

Angenommen habe ich diese Komponente:

import React, { Component } from 'react'; 
import { Text, TouchableWithoutFeedback, View } from 'react-native'; 

class MyComp extends Component { 
    onRowPress() { 
    this.myCoolFunction(); 
    } 

    myCoolFunction() { 
    console.log('hi'); 
    } 

    render() { 
    return (
     <TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}> 
     <View> 
      <Text>Hello World</Text> 
     </View> 
     </TouchableWithoutFeedback> 
    ); 
    } 
} 

export default MyComp; 

Wie gehe ich über die Simulation von 1 Klick auf den ‚TouchableWithoutFeedback‘ und dafür sorgen, dass ‚myCoolFunction‘ genannt wurde genau 1 mal?

Wenn es kein Muss ist, dann würde ich es vorziehen, nicht mehr Abhängigkeiten andere als ‚reagieren-dom‘ und ‚reagieren-addons-Test-utils‘ hinzuzufügen.

Ich habe viele Guides gesehen, die behaupten, dies und das zu sein, aber ich fürchte, sie sind veraltet und ich möchte sicher sein, dass ich keine unnötigen Workarounds durchhalte und meinen Code aufgebläht habe.

Ich habe Scherz/reagieren/reagieren nativer in ihren neuesten Versionen.

Edit: In Jest's official documentation heißt es, dass DOM-Tests entweder mit Enzym oder TestUtils durchgeführt werden können. Wie kann ich dies mit den TestUtils erreichen?

Answer 1

Ich weiß, Sie wollen nicht andere Abhängigkeiten hinzufügen, aber es gibt eine Funktion in der Bibliothek underscoreonce

Erstellt eine Version der Funktion aufgerufen, die nur einmal aufgerufen werden kann. Wiederholte Aufrufe der geänderten Funktion haben keine Auswirkungen und geben den Wert des ursprünglichen Aufrufs zurück.

Auf diese Weise werden Sie sicher sein, es einmal genannt wurde.

Answer 2

Ich weiß, diese Antwort nicht auf Ihre Anforderung nicht anpassen der keine zusätzlichen Abhängigkeiten, aber ich glaube nicht, dass nur mit Jest und Enzyme tun können. Jest bietet Ihnen den Runner, Assertion-Funktionen und Snapshot-Tests und Enzyme führt alle DOM-Manipulationen und Event-Simulationen durch. Um jedoch zu wissen, dass Ihre Funktion genau einmal aufgerufen wurde, benötigen Sie etwas anderes (d. H. Einen Spion). Wir verwenden sinon dafür, etwa so:

... 
const onButtonClick = sinon.spy() 
const wrapper = shallow(<MyComponent onButtonClick={onButtonClick}/>) 
wrapper.find(`img`).first().simulate(`click`) 
wrapper.find(`img`).first().simulate(`click`) 
expect(onButtonClick.calledTwice).toBe(true) 
...