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




meteor reactjs (2)

उथले () और माउंट () के बीच का अंतर यह है कि उथले () माउंट किए गए बच्चे के घटकों से अलगाव में घटकों का परीक्षण करता है (माउंट) और गहराई में जाता है और एक घटक के बच्चों का परीक्षण करता है। उथले () के लिए इसका मतलब है कि यदि मूल घटक किसी अन्य घटक को प्रस्तुत करता है जो रेंडर करने में विफल रहता है, तो माता-पिता पर एक उथले () रेंडरिंग अभी भी पास होगा।

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

मुझे उथले का उपयोग कब करना चाहिए और परीक्षण घटकों में रेंडर करना चाहिए? Airbnb डॉक्स के आधार पर, मैंने दो के अंतर पर कुछ राय दी है:

  1. चूंकि उथला एक घटक के रूप में घटकों का परीक्षण कर रहा है, इसलिए इसका उपयोग 'मूल' घटकों के लिए किया जाना चाहिए। (पूर्व सारणी, आवरण, आदि)

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

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

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


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

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

बनाम

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 पर जासूसी करने के लिए Sinon का उपयोग करता है

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 आपको केवल html render करेगा, इसलिए आप अभी भी इस तरह से सामान कर सकते हैं:

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

    // insert Test component here...

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

उम्मीद है की यह मदद करेगा!





enzyme