एंजाइम डॉक्स के अनुसार :
mount(<Component />) फुल डोम रेंडरिंग उन मामलों के लिए आदर्श है जहां आपके पास ऐसे घटक हैं जो DOM एपिस के साथ बातचीत कर सकते हैं, या पूरी तरह से घटक का परीक्षण करने के लिए पूर्ण जीवनचक्र की आवश्यकता हो सकती है (यानी, घटकडिमाउंट आदि)
बनाम
shallow(<Component />) उथले प्रतिपादन के लिए एक इकाई के रूप में एक घटक का परीक्षण करने के लिए खुद को विवश करने के लिए उपयोगी है, और यह सुनिश्चित करने के लिए कि आपके परीक्षण अप्रत्यक्ष रूप से बाल घटकों के व्यवहार पर जोर नहीं दे रहे हैं।
बनाम
renderजिसका उपयोग स्थिर HTML में प्रतिक्रिया घटकों को प्रस्तुत करने और परिणामस्वरूप HTML संरचना का विश्लेषण करने के लिए किया जाता है ।
आप अभी भी एक उथले रेंडर में अंतर्निहित "नोड्स" देख सकते हैं, इसलिए उदाहरण के लिए, आप एवीए का उपयोग कर इस तरह से कुछ (थोड़ा आकस्मिक) उदाहरण दे सकते हैं :
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 />);
इस परीक्षण में घटक की जासूसी करने के लिए सिनॉन का उपयोग किया जाता है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 आपको केवल html प्रदान करेगा, इसलिए आप अभी भी इस तरह से सामान कर सकते हैं:
test.only('render works', t => {
// insert Test component here...
const rendered = render(<Test />);
const len = rendered.find('div').length;
t.is(len, 1);
});
उम्मीद है की यह मदद करेगा!