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

المراجعة الحالية بتاريخ 16:22، 11 أبريل 2021

يمكنك إجراء الاختبارات على مُكوِّنات 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 الرسمي.

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