React/testing

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

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

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

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

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

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

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

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

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

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

مصادر إضافية

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

• الوصفات (Recipes): وهي أنماط الاختبار الشائعة عند تطوير اختبار ما لمكونات React.
• بيئات الاختبار (Environments): وهي ما يجدر بك وضعه في الاعتبار عند إعداد بيئة اختبار لمكونات React.

المصادر

• صفحة Testing Overview من توثيق React الرسمي.