এনজাইম ডক্স অনুসারে :
mount(<Component />) সম্পূর্ণ ডিওএম রেন্ডারিং ব্যবহারের ক্ষেত্রে আদর্শ যেখানে আপনার এমন উপাদান রয়েছে যা ডিওএম এপিসের সাথে ইন্টারেক্ট করতে পারে, বা উপাদানটি সম্পূর্ণরূপে পরীক্ষা করার জন্য পুরো জীবনচক্রের প্রয়োজন হতে পারে (যেমন, উপাদানডিডমন্ট ইত্যাদি))
বনাম
shallow(<Component />) কারণ অগভীর রেন্ডারিং নিজেকে ইউনিট হিসাবে কোনও উপাদানকে পরীক্ষা করার ক্ষেত্রে সীমাবদ্ধ রাখতে এবং আপনার পরীক্ষাগুলি অপ্রত্যক্ষভাবে শিশু উপাদানগুলির আচরণের উপর জোর দিচ্ছে না তা নিশ্চিত করার জন্য দরকারী।
বনাম
renderযা স্থির এইচটিএমএলে প্রতিক্রিয়া উপাদানগুলি রেন্ডার করতে এবং ফলস্বরূপ 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 আপনাকে কেবল এইচটিএমএল সরবরাহ করবে, সুতরাং আপনি এখনও এই জাতীয় জিনিসগুলি করতে পারেন:
test.only('render works', t => {
const rendered = render(<Test />);
const len = rendered.find('div').length;
t.is(len, 1);
});
আশাকরি এটা সাহায্য করবে!