React Apps টেস্টিং এবং ডিবাগিং
আপনার কোড কাজ করছে কি না তা নিয়ে অনুমান করা বন্ধ করুন। আত্মবিশ্বাস বাড়াতে টেস্টিং ব্যবহার করুন।
বেশিরভাগ ডেভেলপার টেস্টিং এড়িয়ে যান কারণ তারা সেটআপ করা খুব কঠিন মনে করেন। তারা টেস্টিংকে একটি সেফটি নেট (safety net) হিসেবে না দেখে একটি বাড়তি কাজ হিসেবে গণ্য করেন।
আপনি কম্পিউটারের জন্য টেস্ট লেখেন না। আপনি আপনার ভবিষ্যতের নিজের জন্য টেস্ট লেখেন। রাত ২টায় যখন আপনি কোনো ফাংশন পরিবর্তন করবেন, তখন টেস্ট আপনাকে সাথে সাথে জানিয়ে দেবে যে আপনি কিছু ভেঙে ফেলেছেন কি না।
টেস্্টিংকে একটি পিরামিড হিসেবে ভাবুন:
• Unit Tests: একটি ফাংশন বা কম্পোনেন্ট টেস্ট করুন। এগুলো দ্রুত এবং সংখ্যায় অনেক বেশি হয়। • Integration Tests: বিভিন্ন অংশ কীভাবে একসাথে কাজ করে তা টেস্ট করুন। এগুলো আপনাকে উচ্চ মাত্রার আত্মবিশ্বাস দেয়। • E2E Tests: ব্রাউজারে সম্পূর্ণ অ্যাপটি টেস্ট করুন। এগুলো শুধুমাত্র লগইন বা চেকআউটের মতো গুরুত্বপূর্ণ কাজের (critical paths) জন্য ব্যবহার করুন।
React Testing Library-এর গোল্ডেন রুল: ইউজার যা দেখে তা-ই টেস্ট করুন।
State variables টেস্ট করবেন না। CSS classes টেস্ট করবেন না। ইন্টারনাল লজিক টেস্ট করবেন না। বাটন, টেক্সট এবং ইনপুটগুলো টেস্ট করুন। ইউজার যদি তা দেখতে না পায়, তবে সেটি টেস্ট করবেন না।
Arrange, Act, Assert প্যাটার্ন অনুসরণ করুন:
- Arrange: আপনার কম্পোনেন্ট রেন্ডার করুন।
- Act: একটি বাটনে ক্লিক করুন বা কোনো ফিল্ডে টাইপ করুন।
- Assert: স্ক্রিনে সঠিক টেক্সট দেখা যাচ্ছে কি না তা যাচাই করুন।
API কলের মতো async কোডের জন্য waitFor ব্যবহার করুন। এটি আপনার টেস্টকে ফলাফল যাচাই করার আগে ডেটা লোড হওয়ার জন্য অপেক্ষা করতে সাহায্য করে।
যদি প্রোডাকশনে আপনার অ্যাপ ক্র্যাশ করে, তবে Error Boundaries ব্যবহার করুন। এগুলো একটি ত্রুটিপূর্ণ কম্পোনেন্টকে আপনার পুরো পেজটিকে একটি সাদা স্ক্রিনে পরিণত হওয়া থেকে রক্ষা করে। এগুলো আপনার ইউজারদের জন্য একটি সুন্দর ফলব্যাক (fallback) প্রদান করে।
দ্রুত ডিবাগিং করার চেকলিস্ট:
- এরর (errors) দেখার জন্য ব্রাউজার কনসোল চেক করুন।
- API রেসপন্স দেখার জন্য Network ট্যাব চেক করুন।
- props এবং state ইনস্পেক্ট করতে React DevTools ব্যবহার করুন।
- আপনি সরাসরি state মিউটেশন করছেন কি না তা পরীক্ষা করুন।
- আপনার
useEffectdependency array যাচাই করুন।
যা গুরুত্বপূর্ণ তা টেস্ট করার দিকে মনোযোগ দিন। আপনার ১০০% কভারেজ প্রয়োজন নেই। আপনার সেই ফিচারগুলো কভার করা প্রয়োজন যা ব্যর্থ হলে বড় সমস্যা তৈরি করতে পারে।
উৎস: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334