اختبار وتصحيح أخطاء تطبيقات React
توقف عن التخمين حول ما إذا كان الكود الخاص بك يعمل. استخدم الاختبار لبناء الثقة.
يتجاهل معظم المطورين الاختبار لأنهم يجدون عملية الإعداد صعبة للغاية. إنهم يتعاملون مع الاختبار كعبء بدلاً من كونه شبكة أمان.
أنت لا تكتب الاختبارات من أجل الكمبيوتر، بل تكتبها من أجل نفسك في المستقبل. عندما تقوم بتغيير دالة في الساعة الثانية صباحاً، ستخبرك الاختبارات فوراً ما إذا كنت قد تسببت في كسر شيء ما.
فكر في الاختبار كأنه هرم:
• Unit Tests: تختبر دالة واحدة أو مكوناً واحداً. وهي سريعة وكثيرة العدد. • Integration Tests: تختبر كيفية عمل الأجزاء معاً. وهي تمنحك ثقة عالية. • E2E Tests: تختبر التطبيق بالكامل في المتصفح. استخدم هذه الاختبارات فقط للمسارات الحرجة مثل تسجيل الدخول أو إتمام عملية الشراء.
القاعدة الذهبية لمكتبة React Testing Library: اختبر ما يراه المستخدم.
لا تختبر متغيرات الحالة (state variables). لا تختبر فئات CSS. لا تختبر المنطق الداخلي. اختبر الأزرار، والنصوص، وحقول الإدخال. إذا لم يكن المستخدم قادراً على رؤيته، فلا تختبره.
اتبع نمط Arrange، Act، Assert:
- Arrange: قم بعمل Render للمكون الخاص بك.
- Act: انقر على زر أو اكتب في حقل ما.
- Assert: تحقق مما إذا كان النص الصحيح يظهر على الشاشة.
بالنسبة للكود غير المتزامن (async) مثل استدعاءات API، استخدم waitFor. يتيح ذلك لاختبارك الانتظار حتى يتم تحميل البيانات قبل التحقق من النتيجة.
إذا تعطل تطبيقك في بيئة الإنتاج (production)، فاستخدم Error Boundaries. فهي تمنع مكوناً واحداً معطلاً من تحويل صفحتك بالكامل إلى شاشة بيضاء، وتوفر بديلاً سلساً لمستخدميك.
قائمة سريعة لتصحيح الأخطاء:
- تحقق من وحدة تحكم المتصفح (browser console) بحثاً عن الأخطاء.
- تحقق من علامة تبويب Network لرؤية استجابات API.
- استخدم React DevTools لفحص الـ props والـ state.
- تحقق مما إذا كنت تقوم بتغيير الحالة (state) مباشرة.
- تحقق من مصفوفات التبعية (dependency arrays) في
useEffect.
ركز على اختبار ما يهم. لست بحاجة إلى تغطية (coverage) بنسبة 100%. أنت بحاجة لتغطية الميزات التي قد يسبب فشلها ضرراً.
المصدر: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334