Test React Component-Methode ruft Funktion übergeben als Prop.

Question

Ich möchte testen, dass beim Aufruf einer Methode aus einer React-Komponente eine Funktion als Komponente an die Komponente als Requisiten übergeben. Das Verfahren ist so etwas wie diese:

customMethod() { 
    // Do something 

    this.props.trackEvent({ 
    category: 'eventCategory', 
    action: 'eventAction', 
    label: 'eventAction', 
    }); 

    // Do something else 
} 

Das Verfahren kann aus verschiedenen Arten aufgerufen werden, so möchte ich nur einen allgemeinen Test machen: wenn customMethod genannt wird, soll mit Daten auslösen this.props.trackEvent.

Gibt es eine Möglichkeit, einen Methodenaufruf mit Jest und/oder Enzym auszulösen? Ich habe darüber gelesen, etwas wie folgt zu tun:

const wrapper = shallow(<AdPage {...baseProps} />); 
wrapper.instance().customMethod(); 

Aber es funktioniert nicht ... irgendwelche Ideen. Ich bin ziemlich neu in der Prüfung, also sollte ich vielleicht einen anderen Ansatz für diese Art von Tests verwenden?

Answer 1

Angenommen, Ihre customMethod ist ein Komponentenmethode, würde ich es wie folgt testen:

(1) Gefälschte Ihre trackEvent prop als jest.fn() wenn Sie den Wrapper erstellen.

(2) Rufen Sie Ihren customMethod mit wrapper.instance().customMethod();

(3) props.trackEvent Stellen Sie sicher, das Argument haveBeenCalledWith Sie erwähnt.

Als Beispiel:

test('customMethod should call trackEvent with the correct argument',() => { 
    const baseProps = { 
    // whatever fake props you want passed to the component 
    // ... 
    trackEvent: jest.fn(), 
    }; 
    const wrapper = shallow(<AdPage {...baseProps} />); 

    wrapper.instance().customMethod(); 

    expect(baseProps.trackEvent).toHaveBeenCalledTimes(1); 

    expect(baseProps.trackEvent).toHaveBeenCalledWith({ 
    category: 'eventCategory', 
    action: 'eventAction', 
    label: 'eventAction', 
    }); 
});