Was genau sollte ich beim Aufruf von React's this.props.onClick (this) in Jest testen?

Question

Ich habe Tests für alle meine Ereignisse geschrieben (und natürlich alles andere), aber ich weiß nicht, wie ich testen kann, dass this.props.onClick (this) für eine untergeordnete Komponente aufgerufen wurde.

Mein Kind-Komponente hat den folgenden Code:

closeModal: function() { 
    this.props.onClick(this); 
}, 

render: function() { 
    return (
    <i className="close-icon" onClick={this.closeModal}></i> 
) 
} 

und die Eltern es hört, wie so:

onCloseModal: function() { 
    this.replaceState({ 
    modalStatus: 'hidden' 
    }); 
}, 

render: function() { 
    return (
    <QuestionModal modalStatus={this.state.modalStatus} onClick={this.onCloseModal} /> 
) 
} 

Ich weiß, wie das Click-Ereignis der Eltern zu testen, und ich weiß, wie man Rufen Sie in den Tests auch das Klickereignis des Kindes an, aber ich bin mir nicht sicher, was ich genau testen sollte.

Wenn ich Sinon und Jasmine verwendet, würde ich die Methode closeModal stub und überprüfen, dass es aufgerufen wurde. Kann ich das mit Jest machen und wenn ja wie genau?

UPDATE

Ich habe versucht, Antwort einen Test basiert Schreiben auf @ PhilVarg ist, aber ich bin nicht sehr weit bekommen, da ich nicht in der Lage bin closeModal zu verspotten.

Hier ist mein Test:

 var closeIcon, 
      myMock = jest.genMockFunction(); 

     form = TestUtils.renderIntoDocument(
     <QuestionForm /> 
    ); 
     form.closeModal = myMock; 

     closeIcon = TestUtils.findRenderedDOMComponentWithClass(form, 'close-icon'); 

     TestUtils.Simulate.click(closeIcon); 

     expect(form.closeModal).toBeCalled(); 

Die Testfehler mit erwartete Funktion aufgerufen werden. und closeModal ist nicht verspottet, aber läuft immer noch (ich habe eine Konsole loggen Sie sich im Moment). Ich war den ganzen Nachmittag dabei, konnte es aber nicht herausfinden. Jede Hilfe wäre sehr willkommen.

Answer 1

Dank einiger der Vorschläge von Phil, habe ich es endlich herausgefunden. Was ich testen möchte ist, dass closeModal aufgerufen wird, wenn ich auf das Symbol klicke. Ich habe bereits getestet, dass sich die Elternkomponente wie erwartet verhält, aber ich konnte nicht herausfinden, wie man closeModal mockt, weil ich diese spezifische Komponente teste und das ist der einzige Jest, der nicht für mich vortäuscht. Ich könnte es manuell tun, aber das wollte irgendwie nicht funktionieren.

Was ich jetzt getan habe, ist dies zu verspotten.props.onKlicke innerhalb von closeModal und ich überprüfe, ob es ausgelöst wird.

Hier ist, wie das in Code aussieht:

describe('QuestionForm', function() { 
    var onClickFunc, 
     form; 

    beforeEach(function() { 
    onClickFunc = jest.genMockFunction(); 

    form = TestUtils.renderIntoDocument(
     <QuestionForm onClick={onClickFunc} /> 
    ); 
    }); 

    it('should call closeModal when the icon is clicked', function() { 
    var closeIcon = TestUtils.findRenderedDOMComponentWithClass(form, 'close-icon'); 

    TestUtils.Simulate.click(closeIcon); 

    expect(onClickFunc).toBeCalled(); 
    }); 

}); 

Ich denke, ausreichend, dass Prüfungen, dass closeModal wie erwartet verhält.

Answer 2

Wenn Sie überprüfen möchten, ob die Funktion aufgerufen wird, möchten Sie die toBeCalled Funktion von jest verwenden (oder toBeCalledWith). Angenommen, Sie haben einige gesetzt getan, um die Komponenten zu instanziiert, renderIntoDocument und simulieren das Click (Kasse the tutorial wenn nicht)

describe('#closeModal', function(){ 
    beforeEach(function(){ 
    // setup in here to instantiate/render component 
    // and simulate the click if the i tag 
    }) 
    it('is called on click', function(){ 
    expect(questionModal.closeModal).toBeCalled() 
    }) 
}) 

EDIT: Ok, also mit ihm nach bastelt, konnte ich eine vorübergehende bekommen Testen Sie etwas, das Ihrer ursprünglichen Struktur ähnelt. Ich habe eine Mock-Funktion erstellt, aber anstatt form.closeModal = mock auszuführen, habe ich den Mock als onClick-Prop in die Frage gestellt und geprüft, ob er aufgerufen wurde.

Answer 3

Sie könnten einen asynchronen Test verwenden. Sie müssen done() in Ihrem onClick Handler aufrufen. Wenn alles in Ordnung ist, ruft der Hundeführer done() an und der Test wird bestanden. Wenn der Handler nicht aufgerufen wird, schlägt der Test nach einiger Zeit fehl, da Jasmine den Vorgang nicht beenden kann.

Kein Stubbing oder Spott.

it('should click', function(done) { 
    function onClick() { 
    done(); 
    } 
    var instance = TestUtils.renderIntoDocument(
    <Component onClick={onClick} /> 
); 
    var button = TestUtils.findRenderedDOMComponentWithTag(instance, 'button'); 
    var buttonDOM = React.findDOMNode(button); 
    React.addons.TestUtils.Simulate.click(buttonDOM); 
});