الفرق بين المراجعتين لصفحة: «React/testing»

مراجعة 04:33، 26 مارس 2021

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

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

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

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

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

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

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

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

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

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

مصادر إضافية

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

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:نظرة عامة على اختبار مكونات ريآكت }}</noinclude>
-يمكنك إجراء الاختبارات على مُكوِّنات ريآكت بطريقة مشابهة لكيفية اختبار برمجيات جافا سكربت (JavaScript). وتوجد عدّة طرق مختلفة تُستخدم لاختبار تلك المكونات يمكننا تصنيفها بشكل عام إلى أسلوبين رئيسيين:
+يمكنك إجراء الاختبارات على مُكوِّنات ريآكت بطريقة مشابهة لكيفية اختبار برمجيات جافا سكربت ([[JavaScript]]). وتوجد عدّة طرق مختلفة تُستخدم لاختبار تلك المكونات يمكننا تصنيفها عمومًا إلى أسلوبين رئيسيين:
-* تصيير مكوِّن ما مع أبنائه (مكوناته الداخلية) في بيئة اختبار مُبسّطة للتأكد من عرض المكوِّن بالشكل المتوقع.
+* تصيير مكوِّن ما مع أبنائه (مكوناته الداخلية) في بيئة اختبار مُبسّطة للتأكد من عرض المكوِّن كما هو متوقَّع.
-* تشغيل كامل التطبيق على بيئة مُحاكاة افتراضية باستخدام المتصفح. أي ستجري الاختبار على سير عمل التطبيق بأكمله من البداية إلى النهاية.
+* تشغيل كامل التطبيق على بيئة مُحاكاة افتراضية باستخدام المتصفِّح، أيّ ستُجري الاختبار على سير عمل التطبيق بأكمله من البداية إلى النهاية.
-سيُركز هذا القسم من التوثيق على أساليب الاختبار التي تنتمي إلى القسم الأول سابق الذكر. ومع أن اختبار سير العمل لكامل التطبيق (القسم الثاني من أساليب الاختبار) مُفيد للغاية خاصةً عند منع حالات انتكاس تطوير التطبيق إلا أن تلك الاختبارات لا ترتبط بمكونات ريآكت بعينها، لذا فهي خارج نطاق هذا الدليل.
+سيُركِّز هذا القسم من التوثيق على أساليب الاختبار التي تنتمي إلى القسم الأول سابق الذكر. ومع أنّ اختبار سير العمل لكامل التطبيق (القسم الثاني من أساليب الاختبار) مُفيد للغاية خاصةً عند منع حالات انتكاس تطوير التطبيق إلا أنّ تلك الاختبارات لا ترتبط بمكونات ريآكت بعينها، لذا فهي خارج نطاق هذا الدليل.
 == المفاضلة بين المزايا ==
-ستحتاج إلى تحديد المزايا الأكثر أهمية لموضوع الاختبار عند التفكير بشأن أي أدوات الاختبار التي ترغب في استخدامها مما سيضعك في موقف المُفاضلة بين عدّة مزايا:
+ستحتاج إلى تحديد المزايا الأكثر أهميةً لموضوع الاختبار عند التفكير بشأن أيّ أدوات اختبار ترغب في استخدامها، مما سيضعك في موقف المُفاضَلة بين عدّة مزايا:
-* '''استخدام سرعات تكرار أعلى (Iteration speed) أو بيئة مُحاكاة حقيقية''': تقدم بعض أدوات الاختبار سرعات استجابة أعلى للردود (feedback loop) بين إجراء التغييرات وملاحظة النتائج لكن لا يعني ذلك أن تلك النتائج تُترجم سلوك المتصفح بدقة. من ناحية أخرى فإن بعض الأدوات تستخدم بيئة مُحاكاة حقيقية للمتصفح لكن ذلك يتسبب في تقليل سرعة الاستجابة كما يمكنها زعزعة استقرار خادم التكامل المتواصل.
+* '''استخدام سرعات تكرار أعلى (Iteration speed) أو بيئة مُحاكاة حقيقية''': تقدِّم بعض أدوات الاختبار سرعات استجابة أعلى للردود (feedback loop) بين إجراء التغييرات وملاحظة النتائج لكن لا يعني ذلك أنّ تلك النتائج تُترجم سلوك المتصفح بدقة. من ناحية أخرى، تَستخدِم بعض الأدوات بيئة مُحاكاة حقيقية للمتصفِّح، لكن ذلك يتسبب في تقليل سرعة الاستجابة كما يمكنها زعزعة استقرار خادم التكامل المتواصل.
-* '''ما المقدار الذي ترغب في مُحاكاته''': يصعب تمييز الخط الفاصل بين اختبار الوحدة (unit test) واختبار التكامل (integration test) عند اختبار مكوِّنات ريآكت. على سبيل المثال إذا رغبت في اختبار إحدى نماذج التسجيل أو الاشتراك هل ستحتاج إلى اختبار الأزرار أيضًا؟ أيجدر بك إنشاء اختبار منفصل لتلك الأزرار؟ أم قد تتسبب إعادة هيكلة ذلك الاختبار بتعطيله؟
+* '''ما المقدار الذي ترغب في مُحاكاته''': يصعب تمييز الخط الفاصل بين اختبار الوحدة (unit test) واختبار التكامل (integration test) عند اختبار مكوِّنات ريآكت.  فإذا رغبت مثلًا في اختبار إحدى نماذج التسجيل أو الاشتراك هل ستحتاج إلى اختبار الأزرار أيضًا؟ أيجدر بك إنشاء اختبار منفصل لتلك الأزرار؟ أم قد تتسبب إعادة هيكلة ذلك الاختبار بتعطيله؟
-بالطبع ستختلف تلك الإجابات اعتمادًا على المكونات تحت الاختبار وفريق المطورين الذي يُجريها.
+بالطبع ستختلف تلك الإجابات اعتمادًا على المكوذِنات تحت الاختبار وفريق المطورين الذي يُجريها.
 == أدوات الاختبار التي ينصح باستخدامها ==
-[https://facebook.github.io/jest/ Jest] هو إطار اختبار جافا سكربت يُتيح لك الوصول إلى نموذج كائن المستند (DOM) عبر مكتبة [[#header-undefined|jsdom]]. مع أن مكتبة jsdom تُعد مجرد وسيلة مُحاكاة لكيفية عمل المتصفحات إلا أنها تفي بمتطلبات اختبار مكونات ريآكت. يقدم إطار عمل Jest سرعة تكرار عالية بالتكامل مع مزايا قوية مثل مُحاكاة عمل المُكوِّنات ومؤقت قياس يُتيح لك المزيد من التحكم في كيفية تنفيذ النصوص البرمجية.
+[https://facebook.github.io/jest/ Jest] هو إطار اختبار جافا سكربت يُتيح لك الوصول إلى نموذج كائن المستند (DOM) عبر مكتبة [[#header-undefined|jsdom]]. مع أنّ مكتبة jsdom تُعَدّ مجرد وسيلة مُحاكاة لكيفية عمل المتصفِّحات، إلا أنها تفي بمتطلبات اختبار مكونات ريآكت. يقدم إطار عمل Jest سرعة تكرار عالية بالتكامل مع مزايا قوية، مثل: مُحاكاة عمل المُكوِّنات، ومؤقٍّت قياس، يُتيح لك المزيد من التحكم في كيفية تنفيذ النصوص البرمجية.
-هناك أيضًا أداة [https://testing-library.com/react React Testing Library] والتي تضم مجموعة من الأدوات المساعدة التي تُتيح لك اختبار مكونات ريآكت بدون الحاجة إلى الاعتماد على تفاصيل تشغيلها. يُسهل هذا الأسلوب من عمليات إعادة الهيكلة كما يُشجع المطورين على تبنّي ممارسات تعزز من قابلية الوصول في تطبيقاتهم. مع أن هذه الأداة لا توفر طريقة لمعالجة المكونات بدون تضمين المكونات المتفرعة منها إلا أن أدوات تطوير أخرى مثل Jest يمكنها فعل ذلك عبر المُحاكاة.
+هناك أيضًا أداة [https://testing-library.com/react React Testing Library] والتي تَضُمّ مجموعةً من الأدوات المساعدة التي تُتيح لك اختبار مكوِّنات ريآكت بدون الحاجة إلى الاعتماد على تفاصيل تشغيلها. يُسهِّل هذا الأسلوب من عمليات إعادة الهيكلة، كما يُشجع المطورين على تبنّي ممارسات تعززِّ من قابلية الوصول في تطبيقاتهم. مع أنّ هذه الأداة لا توفِّر طريقةً لمعالجة المكوِّنات بدون تضمين المكوِّنات المتفرِّعة منها، إلّا أنّ أدوات تطوير أخرى مثل Jest يمكنها فعل ذلك عبر المُحاكاة.
 == مصادر إضافية ==