الفرق بين المراجعتين لصفحة: «React/testing»
< React
رقية-بورية (نقاش | مساهمات) ط مراجعة |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:نظرة عامة على اختبار مكونات | <noinclude>{{DISPLAYTITLE:نظرة عامة على اختبار مكونات React}}</noinclude> | ||
يمكنك إجراء الاختبارات على مُكوِّنات | يمكنك إجراء الاختبارات على مُكوِّنات React بطريقة مشابهة لكيفية اختبار برمجيات [[JavaScript]]. وتوجد عدّة طرق مختلفة تُستخدم لاختبار تلك المكونات يمكننا تصنيفها عمومًا إلى أسلوبين رئيسيين: | ||
* تصيير مكوِّن ما مع أبنائه (مكوناته الداخلية) في بيئة اختبار مُبسّطة للتأكد من عرض المكوِّن كما هو متوقَّع. | * تصيير مكوِّن ما مع أبنائه (مكوناته الداخلية) في بيئة اختبار مُبسّطة للتأكد من عرض المكوِّن كما هو متوقَّع. | ||
* تشغيل كامل التطبيق على بيئة مُحاكاة افتراضية باستخدام المتصفِّح، أيّ ستُجري الاختبار على سير عمل التطبيق بأكمله من البداية إلى النهاية. | * تشغيل كامل التطبيق على بيئة مُحاكاة افتراضية باستخدام المتصفِّح، أيّ ستُجري الاختبار على سير عمل التطبيق بأكمله من البداية إلى النهاية. | ||
سيُركِّز هذا القسم من التوثيق على أساليب الاختبار التي تنتمي إلى القسم الأول سابق الذكر. ومع أنّ اختبار سير العمل لكامل التطبيق (القسم الثاني من أساليب الاختبار) مُفيد للغاية خاصةً عند منع حالات انتكاس تطوير التطبيق إلا أنّ تلك الاختبارات لا ترتبط بمكونات | سيُركِّز هذا القسم من التوثيق على أساليب الاختبار التي تنتمي إلى القسم الأول سابق الذكر. ومع أنّ اختبار سير العمل لكامل التطبيق (القسم الثاني من أساليب الاختبار) مُفيد للغاية خاصةً عند منع حالات انتكاس تطوير التطبيق إلا أنّ تلك الاختبارات لا ترتبط بمكونات React بعينها، لذا فهي خارج نطاق هذا الدليل. | ||
== المفاضلة بين المزايا == | == المفاضلة بين المزايا == | ||
| سطر 11: | سطر 11: | ||
ستحتاج إلى تحديد المزايا الأكثر أهميةً لموضوع الاختبار عند التفكير بشأن أيّ أدوات اختبار ترغب في استخدامها، مما سيضعك في موقف المُفاضَلة بين عدّة مزايا: | ستحتاج إلى تحديد المزايا الأكثر أهميةً لموضوع الاختبار عند التفكير بشأن أيّ أدوات اختبار ترغب في استخدامها، مما سيضعك في موقف المُفاضَلة بين عدّة مزايا: | ||
* '''استخدام سرعات تكرار أعلى (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] هو إطار اختبار | [https://facebook.github.io/jest/ Jest] هو إطار اختبار [[JavaScript]] يُتيح لك الوصول إلى نموذج كائن المستند (DOM) عبر مكتبة [[React/testing environments#محاكاة المعالجة|jsdom]]. مع أنّ مكتبة jsdom تُعَدّ مجرد وسيلة مُحاكاة لكيفية عمل المتصفِّحات، إلا أنها تفي بمتطلبات اختبار مكونات React. يقدم إطار عمل Jest سرعة تكرار عالية بالتكامل مع مزايا قوية، مثل: مُحاكاة عمل المُكوِّنات، ومؤقٍّت قياس، يُتيح لك المزيد من التحكم في كيفية تنفيذ النصوص البرمجية. | ||
هناك أيضًا أداة [https://testing-library.com/react React Testing Library] والتي تَضُمّ مجموعةً من الأدوات المساعدة التي تُتيح لك اختبار مكوِّنات | هناك أيضًا أداة [https://testing-library.com/react React Testing Library] والتي تَضُمّ مجموعةً من الأدوات المساعدة التي تُتيح لك اختبار مكوِّنات React بدون الحاجة إلى الاعتماد على تفاصيل تشغيلها. يُسهِّل هذا الأسلوب من عمليات إعادة الهيكلة، كما يُشجع المطورين على تبنّي ممارسات تعززِّ من قابلية الوصول في تطبيقاتهم. مع أنّ هذه الأداة لا توفِّر طريقةً لمعالجة المكوِّنات بدون تضمين المكوِّنات المتفرِّعة منها، إلّا أنّ أدوات تطوير أخرى مثل Jest يمكنها فعل ذلك عبر المُحاكاة. | ||
== مصادر إضافية == | == مصادر إضافية == | ||
| سطر 26: | سطر 26: | ||
يتفرع هذا القسم إلى صفحتين منفصلتين: | يتفرع هذا القسم إلى صفحتين منفصلتين: | ||
* | * [[React/testing recipes|الوصفات (Recipes)]]: وهي أنماط الاختبار الشائعة عند تطوير اختبار ما لمكونات React. | ||
* | * [[React/testing environments|بيئات الاختبار (Environments)]]: وهي ما يجدر بك وضعه في الاعتبار عند إعداد بيئة اختبار لمكونات React. | ||
== المصادر == | |||
* [https://reactjs.org/docs/testing.html صفحة Testing Overview من توثيق React الرسمي.] | |||
[[تصنيف: React]] | [[تصنيف: React]] | ||
[[تصنيف: 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.