Enzim bir onChange olayını simüle eder

Question

Mocha ve Enzim ile bir tepki bileşenini test ediyorum. Burada

class New extends React.Component { 

    // shortened for simplicity 

    handleChange(event) { 
    // handle changing state of input 

    const target = event.target; 
    const value = target.value; 
    const name = target.name 
    this.setState({[name]: value}) 

    } 


    render() { 
    return(
     <div> 
     <form onSubmit={this.handleSubmit}> 
      <div className="form-group row"> 
      <label className="col-2 col-form-label form-text">Poll Name</label> 
      <div className="col-10"> 
       <input 
       className="form-control" 
       ref="pollName" 
       name="pollName" 
       type="text" 
       value={this.state.pollName} 
       onChange={this.handleChange} 
       /> 
      </div> 
      </div> 

      <input className="btn btn-info" type="submit" value="Submit" /> 
     </form> 
     </div> 
    ) 
    } 
} 

Ve Test edilir: Burada bileşen (tabii basitlik için kısaltılmış) 'dir

it("responds to name change", done => { 
    const handleChangeSpy = sinon.spy(); 
    const event = {target: {name: "pollName", value: "spam"}}; 
    const wrap = mount(
    <New handleChange={handleChangeSpy} /> 
); 

    wrap.ref('pollName').simulate('change', event); 
    expect(handleChangeSpy.calledOnce).to.equal(true); 
}) 

ben bekliyorum <input> kutuya kullanıcı türleri metin handleChange yöntem olacaktır zaman o aradı. Yukarıdaki sınama başarısız: Ne yapıyorum?

açıklamam gerektiğini

DÜZENLEME, benim objektif yöntemi handleChange denir test etmektir. Bunu nasıl yapabilirim?

Answer 1

Doğrudan prototip yoluyla bu yönteme casusluk yapabilirsiniz.

it("responds to name change", done => { 
    const handleChangeSpy = sinon.spy(New.prototype, "handleChange"); 
    const event = {target: {name: "pollName", value: "spam"}}; 
    const wrap = mount(
    <New /> 
); 
    wrap.ref('pollName').simulate('change', event); 
    expect(handleChangeSpy.calledOnce).to.equal(true); 
}) 

Alternatif olarak, örneğinin yöntemine casus kullanabilirsiniz, ancak zaten montaj sonrasında oluşturulur bileşeni zaten orijinaline bağlı Değiştiğinde anlamına gelen denir, çünkü zorunlu güncelleme yapmak zorundayız.

it("responds to name change", done => { 
    const event = {target: {name: "pollName", value: "spam"}}; 
    const wrap = mount(
    <New /> 
); 
    const handleChangeSpy = sinon.spy(wrap.instance(), "handleChange"); 
    wrap.update(); // Force re-render 
    wrap.ref('pollName').simulate('change', event); 
    expect(handleChangeSpy.calledOnce).to.equal(true); 
})