React's this.props.onClick (this) Jest'te arama yaparken tam olarak ne test etmeliyim?

Question

Tüm etkinliklerim için testler yapıyorum (ve tabii ki diğer her şey), ancak testin nasıl yapıldığına dair bir kayıp yaşıyorum bu.props.onClick (bu) bir alt bileşende çağrıldı.

Çocuğum bileşeni aşağıdaki kodu vardır:

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

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

ve ebeveyn şöyle kendisine dinliyor:

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

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

Ben ebeveynin click olayını nasıl test bende biliyoruz nasıl Testlerde de çocuğun düğme tıklatma olayını çağırın, ancak tam olarak neyi test ettiğimi bilmiyorum.

Eğer Sinon ve Jasmine kullansaydım, closeModal yöntemini koyar ve çağrıldığını kontrol ederdim. Bunu Jest ile yapabilir miyim ve eğer öyleyse tam olarak nasıl?

GÜNCELLEME

Ben @ PhilVarg en yanıta göre testi yazma denedim ama closeModalalay etmek mümkün değilim çok uzak alamıyorum. çağrılacak Beklenen Fonksiyonu ile

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

testi hataları:

İşte benim test. ve closeModal alaylı değil ama hala çalışıyor (Şu anda bir konsol günlüğüm var). Bütün öğleden sonra üzerinde çalıştım ama anlayamadım. Herhangi bir yardım çok takdir edilecektir.

Answer 1

Phil'in önerileri sayesinde, sonunda anladım. Test etmek istediğim, simgeyi tıkladığımda closeModal'ın çağrılması. Ebeveyn bileşeninin beklendiği gibi davrandığını zaten test ettim ama closeModal ile nasıl çalışacağımı bilemedim çünkü bu özel bileşeni test ediyorum ve varsayılan olarak, bu Jest'in benim için alay etmediği tek şey bu. Manuel olarak kolayabiliyordum ama bir şekilde çalışmak istemiyordu.

Şu an yaptığım şey bununla dalga geçmek.props.onraki closeModal içinde ve onu kontrol ettiğimi kontrol ediyorum. İşte

bu kodu nasıl göründüğü:

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

}); 

Ben yeterince beklendiği gibi closeModal davrandığını test düşünüyorum.

Answer 2

Eğer işlevin çağrıldığını kontrol etmek istiyorsanız, jest'in toBeCalled işlevini (veya toBeCalledWith) kullanmak istersiniz. Bazı klik (ödeme the tutorial değilse)

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

DÜZENLEME, renderIntoDocument bileşenlerini örneğini ve simüle etmek için kurulmuş yaptık varsayarak: Tamam, onunla müdahalesi sonra ben bir geçer elde edebildi bu yüzden Orijinal yapınıza benzer bir şey testi yapın. Sahte bir işlev oluşturdum, ancak form.closeModal = alayını yapmak yerine, aClick'i onClick prop olarak sorguya aktardım ve arandığını kontrol ettim.

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

Asenkron bir test kullanabilirsiniz. onClick işleyicinizde done() numaralı telefonu aramanız gerekiyor. Her şey yolundaysa, işleyici done()'u arayacak ve test geçecektir. İşleyici aramayacaksa, bir süre sonra test başarısız olur, çünkü Jasmine bunu bilemez.

Saplama veya alay etmeye gerek yoktur.

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