Che cosa dovrei testare esattamente quando chiami React's this.props.onClick (this) in Jest?

Question

Ho scritto test per tutti i miei eventi (e tutto il resto ovviamente) ma non riesco a verificare che questo.props.onClick (questo) sia stato chiamato su un componente figlio.

mio componente figlio ha il seguente codice:

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

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

e il genitore sta ascoltando in questo modo:

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

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

so come testare evento click del genitore e so come richiama anche l'evento click del pulsante del bambino nei test, ma non sono sicuro di cosa dovrei testare esattamente.

Se ho usato Sinon e Jasmine, avrei stubato il metodo closeModal e controllato che fosse chiamato. Posso farlo con Jest e se sì, come esattamente?

UPDATE

ho provato a scrivere un test basato su di @ PhilVarg risposta, ma non sto ottenendo molto lontano come io non sono in grado di prendere in giro closeModal.

Ecco la mia prova:

 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(); 

Gli errori di test con Funzione Dovrebbe essere chiamato. e closeModal non sono presi in giro ma vengono comunque eseguiti (al momento è presente un registro della console). Ci sono stato tutto il pomeriggio ma non sono stato in grado di capirlo. Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Grazie ad alcuni dei suggerimenti di Phil, ho finalmente capito. Quello che voglio testare è che CloseModal viene chiamato quando faccio clic sull'icona. Ho già provato che il componente genitore si comporta come previsto ma non riesco a capire come si possa chiudere closeModal perché sto testando questo specifico componente e, per impostazione predefinita, questo è l'unico che Jest non prende in giro per me. Potrei spegnerlo manualmente ma in qualche modo non volevo lavorare.

Quello che ho fatto ora è prendere in giro questo.props.onFai clic su closeModal e controllerò che si attivi.

Ecco come che sembra in codice:

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

}); 

Credo che a sufficienza test che closeModal si comporta come previsto.

Answer 2

Se si desidera verificare che la funzione venga chiamata, si desidera utilizzare la funzione toBeCalled di jest (o toBeCalledWith). Supponendo che hai fatto un po 'istituito per istanziare i componenti, renderIntoDocument, e simulare il click (checkout the tutorial se non)

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, quindi dopo armeggiare con esso, sono stato in grado di ottenere un passaggio prova a fare qualcosa di simile alla tua struttura originale. Ho creato una funzione fittizia, ma invece di fare form.closeModal = mock, ho passato il mock alla domanda come puntello onClick, e controllato se è stato chiamato.

describe('#closeModal', function(){ 
    var mock, form, closeIcon; 

    beforeEach(function(){ 
    mock = jest.genMockFunction(); 
    form = TestUtils.renderIntoDocument(
     <QuestionForm onClick={ mock } /> 
    ); 
    closeIcon = TestUtils.findRenderedDOMComponentWithClass(form, 'close-icon'); 
    TestUtils.Simulate.click(closeIcon); 
    }) 

    it('is called on click', function(){ 
    expect(mock).toBeCalled() 
    }) 
}) 

Answer 3

È possibile utilizzare un test asincrono. Devi chiamare done() nel tuo gestore onClick. Se tutto va bene, il gestore chiama lo done() e passa il test. Se il gestore non viene chiamato, il test fallisce dopo un po 'di tempo perché Jasmine non può terminarlo.

Nessuna necessità di stub o di derisione.

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