एंजाइम एक ऑन चेंज इवेंट

Question

अनुकरण करता है मैं मोचा और एंजाइम के साथ एक प्रतिक्रिया घटक का परीक्षण कर रहा हूं।

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

और यहाँ परीक्षण किया गया है:: यहाँ घटक (बेशक सादगी के लिए संक्षिप्त) है

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

मैं उम्मीद कर रहा हूँ कि जब <input> गए बॉक्स में उपयोगकर्ता प्रकार पाठ handleChange विधि हो जाएगा बुलाया। ऊपर दिया गया परीक्षण विफल रहता है:

AssertionError: expected false to equal true 
+ expected - actual 

-false 
+true 

at Context.<anonymous> (test/components/new_component_test.js:71:45) 

मैं क्या गलत कर रहा हूं?

संपादित

मैं स्पष्ट करना चाहिए, मेरे उद्देश्य परीक्षण करने के लिए है कि विधि handleChange कहा जाता है। मैं उसे कैसे कर सकता हूँ?

Answer 1

आप प्रोटोटाइप के माध्यम से सीधे विधि में जासूसी कर सकते हैं।

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

वैकल्पिक रूप से, आप उदाहरण की विधि पर जासूसी का उपयोग कर सकते हैं, लेकिन आप क्योंकि घटक पहले से ही माउंट के बाद प्रदान की गई है, कहा जाता है जो onChange का मतलब है पहले से ही अपने मूल के लिए बाध्य है एक मजबूर अद्यतन करना है।

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