एंजाइम/प्रतिक्रिया परीक्षणों में आपको रेंडर और उथले का उपयोग कब करना चाहिए?

Question

इस प्रश्न को पोस्ट करने से पहले, मैंने एसका स्टैकएक्सचेंज में खोज करने की कोशिश की लेकिन मुझे उथले के बारे में कोई पोस्ट नहीं मिला और वहां प्रस्तुत किया गया, इसलिए मुझे उम्मीद है कि कोई मेरी मदद कर सकता है।

मुझे प्रतिक्रियात्मक घटकों का परीक्षण करने में उथले और प्रस्तुत करने के लिए कब उपयोग करना चाहिए? तो यह 'माता-पिता' घटकों के लिए इस्तेमाल किया जाना चाहिए

1. उथले के बाद से एक इकाई के रूप में घटकों परीक्षण कर रहा है,: Airbnb डॉक्स के आधार पर, मैं कुछ राय दो के अंतर पर कर दिया है। (उदा। टेबल्स, रैपर, आदि)

2. रेंडर बाल घटकों के लिए है।

कारण मैं इस प्रश्न पूछा, कि मैं एक मुश्किल समय यह पता लगाने की जो एक मैं (हालांकि डॉक्स कहते हैं कि वे बहुत समान हैं) का उपयोग करना चाहिए

तो, कैसे हो रही है क्या मुझे पता है कि किसी विशिष्ट परिदृश्य में किस का उपयोग करना है?

Answer 1

एनजाइम docs के अनुसार:

पूर्ण डोम प्रतिपादन के लिए mount(<Component />) उपयोग के मामलों जहां घटक है कि डोम API के साथ बातचीत कर सकते हैं, या पूरी तरह घटक का परीक्षण करने में पूर्ण जीवन चक्र की आवश्यकता हो सकती है के लिए आदर्श है (यानी , componentDidMount आदि)

बनाम

shallow(<Component />) उथला प्रतिपादन के लिए एक इकाई के रूप में एक घटक के परीक्षण करने के लिए अपने आप को सीमित करना है, और सुनिश्चित करें कि आपके परीक्षण परोक्ष रूप से बच्चे के घटकों के व्यवहार पर जोर देते हुए नहीं कर रहे हैं उपयोगी है।

बनाम

render जो स्थिर HTML के घटकों प्रतिक्रिया प्रस्तुत करना और जिसके परिणामस्वरूप HTML संरचना का विश्लेषण किया जाता है।

आप अभी भी एक उथले में अंतर्निहित "नोड्स" देख सकते हैं प्रस्तुत करना तो उदाहरण के लिए, तो आप इस (थोड़ा काल्पनिक) उदाहरण कल्पना धावक के रूप में AVA का उपयोग कर की तरह कुछ कर सकते हैं:

let wrapper = shallow(<TagBox />); 

const props = { 
    toggleValue: sinon.spy() 
}; 

test('it should render two top level nodes', t => { 
    t.is(wrapper.children().length, 2); 
}); 

test('it should safely set all props and still render two nodes', t => { 
    wrapper.setProps({...props}); 
    t.is(wrapper.children().length, 2); 
}); 

test('it should call toggleValue when an x class is clicked', t => { 
    wrapper.setProps({...props}); 
    wrapper.find('.x').last().simulate('click'); 
    t.true(props.toggleValue.calledWith(3)); 
}); 

सूचना है कि प्रतिपादन, सेटिंग और खोजने चयनकर्ताओं और यहां तक ​​कि सिंथेटिक घटनाओं सभी उथले प्रतिपादन द्वारा समर्थित हैं, इसलिए अधिकांश बार आप सिर्फ इतना है कि उपयोग कर सकते हैं सहारा।

लेकिन, आप घटक का पूर्ण जीवन चक्र प्राप्त नहीं कर पाएंगे, इसलिए यदि आप घटकडिडउंट में चीजों की अपेक्षा करते हैं, तो आपको mount(<Component />) का उपयोग करना चाहिए;

यह परीक्षण Sinon का उपयोग करता है पर जासूसी करने के घटक के componentDidMount

test.only('mount calls componentDidMount', t => { 

    class Test extends Component { 
     constructor (props) { 
      super(props); 
     } 
     componentDidMount() { 
      console.log('componentDidMount!'); 
     } 
     render() { 
      return (
       <div /> 
      ); 
     } 
    }; 

    const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount'); 
    const wrapper = mount(<Test />); 

    t.true(componentDidMount.calledOnce); 

    componentDidMount.restore(); 
}); 

ऊपर उथले या प्रतिपादन के साथ पारित नहीं होगा प्रस्तुत करना

render केवल एचटीएमएल के साथ आप प्रदान करेगा, जिससे आप अभी भी इस तरह की चीजें कर सकते हैं:

test.only('render works', t => { 

    // insert Test component here... 

    const rendered = render(<Test />); 
    const len = rendered.find('div').length; 
    t.is(len, 1); 
}); 

उम्मीद है कि यह मदद करता है!