نظرة عامة على اختبار مكونات ريآكت

من موسوعة حسوب
< React
مراجعة 04:10، 26 مارس 2021 بواسطة رقية-بورية (نقاش | مساهمات) (رفع المحتوى)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

يمكنك إجراء الاختبارات على مُكوِّنات ريآكت بطريقة مشابهة لكيفية اختبار برمجيات جافا سكربت (JavaScript). وتوجد عدّة طرق مختلفة تُستخدم لاختبار تلك المكونات يمكننا تصنيفها بشكل عام إلى أسلوبين رئيسيين:

  • تصيير مكوِّن ما مع أبنائه (مكوناته الداخلية) في بيئة اختبار مُبسّطة للتأكد من عرض المكوِّن بالشكل المتوقع.
  • تشغيل كامل التطبيق على بيئة مُحاكاة افتراضية باستخدام المتصفح. أي ستجري الاختبار على سير عمل التطبيق بأكمله من البداية إلى النهاية.

سيُركز هذا القسم من التوثيق على أساليب الاختبار التي تنتمي إلى القسم الأول سابق الذكر. ومع أن اختبار سير العمل لكامل التطبيق (القسم الثاني من أساليب الاختبار) مُفيد للغاية خاصةً عند منع حالات انتكاس تطوير التطبيق إلا أن تلك الاختبارات لا ترتبط بمكونات ريآكت بعينها، لذا فهي خارج نطاق هذا الدليل.

المفاضلة بين المزايا

ستحتاج إلى تحديد المزايا الأكثر أهمية لموضوع الاختبار عند التفكير بشأن أي أدوات الاختبار التي ترغب في استخدامها مما سيضعك في موقف المُفاضلة بين عدّة مزايا:

  • استخدام سرعات تكرار أعلى (Iteration speed) أو بيئة مُحاكاة حقيقية: تقدم بعض أدوات الاختبار سرعات استجابة أعلى للردود (feedback loop) بين إجراء التغييرات وملاحظة النتائج لكن لا يعني ذلك أن تلك النتائج تُترجم سلوك المتصفح بدقة. من ناحية أخرى فإن بعض الأدوات تستخدم بيئة مُحاكاة حقيقية للمتصفح لكن ذلك يتسبب في تقليل سرعة الاستجابة كما يمكنها زعزعة استقرار خادم التكامل المتواصل.
  • ما المقدار الذي ترغب في مُحاكاته: يصعب تمييز الخط الفاصل بين اختبار الوحدة (unit test) واختبار التكامل (integration test) عند اختبار مكوِّنات ريآكت. على سبيل المثال إذا رغبت في اختبار إحدى نماذج التسجيل أو الاشتراك هل ستحتاج إلى اختبار الأزرار أيضًا؟ أيجدر بك إنشاء اختبار منفصل لتلك الأزرار؟ أم قد تتسبب إعادة هيكلة ذلك الاختبار بتعطيله؟

بالطبع ستختلف تلك الإجابات اعتمادًا على المكونات تحت الاختبار وفريق المطورين الذي يُجريها.

أدوات الاختبار التي ينصح باستخدامها

Jest هو إطار اختبار جافا سكربت يُتيح لك الوصول إلى نموذج كائن المستند (DOM) عبر مكتبة jsdom. مع أن مكتبة jsdom تُعد مجرد وسيلة مُحاكاة لكيفية عمل المتصفحات إلا أنها تفي بمتطلبات اختبار مكونات ريآكت. يقدم إطار عمل Jest سرعة تكرار عالية بالتكامل مع مزايا قوية مثل مُحاكاة عمل المُكوِّنات ومؤقت قياس يُتيح لك المزيد من التحكم في كيفية تنفيذ النصوص البرمجية.

هناك أيضًا أداة React Testing Library والتي تضم مجموعة من الأدوات المساعدة التي تُتيح لك اختبار مكونات ريآكت بدون الحاجة إلى الاعتماد على تفاصيل تشغيلها. يُسهل هذا الأسلوب من عمليات إعادة الهيكلة كما يُشجع المطورين على تبنّي ممارسات تعزز من قابلية الوصول في تطبيقاتهم. مع أن هذه الأداة لا توفر طريقة لمعالجة المكونات بدون تضمين المكونات المتفرعة منها إلا أن أدوات تطوير أخرى مثل Jest يمكنها فعل ذلك عبر المُحاكاة.

مصادر إضافية

يتفرع هذا القسم إلى صفحتين منفصلتين:

ترجمة -وبتصرف- للمقال Testing Overview، من توثيق ريآكت