एंजाइम का उपयोग करते हुए मोचा में रिएक्ट घटक के पूर्ण प्रस्तुत करने के लिए कैसे प्रतीक्षा करें?

Question

मेरे पास Parent घटक है जो Child घटक प्रस्तुत करता है। Child घटक पहले 'नाम' जैसे अद्वितीय प्रोप प्रस्तुत करता है और फिर अभिभावक घटक 'प्रो' जैसे सामान्य प्रोप प्रस्तुत करता है और React.Children.map का उपयोग करके Child घटक में प्रोप इंजेक्ट करता है।

मेरी समस्या यह है कि एंजाइम Section घटक द्वारा प्रदान किए जाने वाले सामान्य प्रोपों का पता लगाने में सक्षम नहीं है, इसलिए मैं प्रभावी रूप से परीक्षण नहीं कर सकता कि आम प्रोप जोड़े जा रहे हैं या नहीं।

परीक्षण:

 const wrapper = shallow(
 
     <Parent title="Test Parent"> 
 
      <div> 
 
      <Child 
 
       name="FirstChild" 
 
      /> 
 
      </div> 
 
     </Parent> 
 
    ) 
 
//  console.log(wrapper.find(Child).node.props) <- returns only "name" in the object 
 
     expect(wrapper.find(Child)).to.have.prop("commonPropOne") 
 
     expect(wrapper.find(Child)).to.have.prop("commonPropTwo") 
 
     expect(wrapper.find(Child)).to.have.prop("commonPropThree")

आम रंगमंच की सामग्री इंजेक्शन लगाने के लिए कोड:

const Parent = (props) => (
 
    <div 
 
    className="group" 
 
    title={props.title} 
 
    > 
 
    { React.Children.map(props.children, child => applyCommonProps(props, child)) } 
 
    </div> 
 
)

Answer 1

आप एंजाइम 012 का उपयोग करना होगा।

mount आपको पूर्ण डोम प्रतिपादन देता है जब आपको केवल shallow जैसे एकल नोड को प्रस्तुत करने के बजाय घटकों को प्रस्तुत करने के लिए घटकों की प्रतीक्षा की आवश्यकता होती है।

Answer 2

आप एक ऐसा ईवेंट सेट करने के लिए टाइमर का उपयोग कर सकते हैं जो किसी ईवेंट को खींच लेगा जो दूसरों के बाद होगा। आपको इस विधि का उपयोग करके मैन्युअल रूप से किया जाना है।

describe('<MyComponent />',() => { 
    it('My test.', (done) => { 
    const wrapper = mount(<MyComponent />); 

    setTimeout(() => { 
     expect(wrapper).toMatchSnapshot(); 
     done(); 
    }, 1); 
    }); 
}); 

React: Wait for full render in snapshot testing