كيفية إعداد Jest and Enzyme لاختبار تطبيقات React Native

تشارك هذه المقالة القصيرة تجاربي في إعداد بيئة الاختبار الخاصة بي لاختبار الوحدة لمكونات التفاعل الأصلية باستخدام Jest and Enzyme.

أدوات الاختبار والبيئة

أول شيء تعلمته هو أن الطريقة والبنية التحتية لكتابة اختبارات الوحدة لتطبيق React Native تشبه إلى حد بعيد اختبارات الوحدة في تطبيق React ... ربما ليس من المستغرب.

ومع ذلك ، في حين أن الأدوات واستخدام مجموعات الاختبار متشابهة جدًا ، يجب إعداد بيئة الاختبار والبنية التحتية بطريقة مختلفة قليلاً . هذا أساسًا لأن تطبيقات React مصممة للعمل مع DOM داخل المتصفح بينما لا تستهدف تطبيقات الأجهزة المحمولة بنية البيانات هذه لتقديمها (فهي تستهدف الوحدات النمطية "الأصلية" الفعلية الموجودة على نظام الهاتف المحمول بدلاً من ذلك).

باستخدام الدعابة

Jest هي مكتبة تستخدم لاختبار تطبيقات JavaScript.

أردت استخدام Jest لعدة أسباب:

أولاً ، تم إنشاؤه والاحتفاظ به بنشاط بواسطة Facebook لتطبيقات React Native الخاصة بهم.

ثانيًا ، يأتي مُعبأًا مسبقًا بإصدار React Native الذي كنت أعمل معه (تم إنشاؤه باستخدام التفاعل الأصلي).

ثالثًا ، Jest هو إطار اختبار "شامل" ويحتوي على مجموعة كاملة من أدوات الاختبار التي احتاجها. على سبيل المثال ، يأتي Jest بمكتبة للتحقق من التأكيدات ، وهو عداء اختبار لتشغيل الاختبارات والأدوات بالفعل للتحقق من تغطية الكود. مع الحلول الأخرى ، يتعين على المرء أن يختار ويجمع المكونات الفردية لمجموعة الاختبار.

باستخدام Jest + Enzyme

كنت أرغب في الجمع بين Jest و Enzyme. هناك الكثير من التعليقات المربكة قليلاً على الويب والتي تقارن "الدعابة مقابل الإنزيم". هذا مضلل بعض الشي. بينما Jest عبارة عن إطار عمل للاختبار ، يمكنك التفكير في Enzyme كمكتبة تسهل تحديد العناصر والاستعلام عنها داخل DOM مقلد. لذلك غالبًا ما يتم استخدامه جنبًا إلى جنب مع Jest لجعل كتابة منطق الاختبارات أكثر نظافة وأسهل في القراءة.

لازلت مشوش؟ إنه مشابه للطريقة التي قدم بها jQuery بناء جملة موجزًا ​​وواضحًا للاستعلام عن العناصر واختيارها في DOM ، بينما لم يكن بناء الجملة باستخدام Vanilla JavaScript (على الأقل عند تقديم jQuery لأول مرة) واضحًا وسهل الاستخدام. ولا يقارن الأشخاص غالبًا "jQuery مقابل JavaScript" ، ما لم يقارنوا طريقة معينة يستخدمها الأسلوبان للاستعلام عن عناصر وتعديلها في DOM.

ملحوظة: يمكنك استخدام Jest بدون إنزيم (أعتقد أن Facebook يقوم بذلك) ولكن Enzyme يجعل اختباراتك أسهل قليلاً في الإنشاء والقراءة. من وجهة نظري ، فإن الجمع بين Enzyme و Jest يتعلق بالراحة.

إعداد Jest + Enzyme

اضطررت للقفز عبر بعض الأطواق لإعداد Jest and Enzyme بنجاح في بيئة React Native الخاصة بي.

تأتي Jest الآن مضمنة في تطبيقات React Native التي تم إنشاؤها باستخدام أداة "التفاعل الأصلي". لذلك يمكنني استخدام Jest خارج الصندوق. رائع!

لكنني واجهت بعض المشكلات في محاولة دمج الإنزيم مع React Native باستخدام وثائقهم. لم أتمكن مطلقًا من الوصول إلى الجزء السفلي من المشكلة الأساسية ، لكنني ظللت أتلقى أخطاء "لم يتم العثور على وحدات" مثل هذه هنا.

حل

في النهاية ، استخدمت حلاً يلخص بشكل أساسي بعض الإعداد في بيئة معبأة مسبقًا باستخدام مكتبة jest-enzyme ثم تأكد من ضبط "الإعدادات المسبقة" الدعائية على "التفاعل الأصلي" في الحزمة الخاصة بي.

لقد اتبعت التعليمات لتثبيت هذه المكتبات:

npm install jest-environment-enzyme jest-enzyme enzyme-adapter-react-16 --save-dev

كما وجهتني الأخطاء عندما حاولت تشغيل اختباراتي إلى تثبيت هذه الأشياء بنفسي بشكل صريح:

npm install --save-dev react-dom enzyme

هذا ما كان عليّ إضافته يدويًا إلى package.json:

// package.json before with react-native init { ... "jest": { "presets": ["react-native"], } ... } // package.json after my manual changes: { ... "jest": { "presets": ["react-native"], // not clear in documentation! "setupTestFrameworkScriptFile": "jest-enzyme", "testEnvironment": "enzyme", "testEnvironmentOptions": { "enzymeAdapter": "react16" } } ... }

يمكنك رؤية الريبو هنا.

إن استخدام مكتبة jest-enzyme بهذه الطريقة يعمل بسهولة بالنسبة لي وهذا يعني أيضًا أن لدي إعدادًا أنظف قليلاً. هذا لأن الطريقة الأخرى (التي لم أتمكن من العمل فيها ، باتباع وثائق الإنزيم) كانت تعني أنه كان علي أيضًا إعداد نص برمجي منفصل لـ "jest config" والحفاظ عليه.

ملخص

يبدو أن كتابة منطق الأعمال داخل اختبارات Jest + Enzyme لـ React Native هو نفس كتابة اختبارات React باستخدام Jest + Enzyme. هذا يعني أن الأمثلة والوثائق المتوفرة عبر الإنترنت لاختبار وحدة React قابلة للنقل بسهولة ، وهو أمر مفيد حقًا. هذه خطوة رائعة نحو رؤية مطوري الويب الذين يمكنهم نقل مهاراتهم بسهولة لإنشاء تطبيقات جوال عبر الأنظمة الأساسية.

ومع ذلك ، لسهولة الاستخدام في مرحلة "كتابة الاختبار" ، دفعت الثمن عند إعداد البنية التحتية والبيئة بحيث تكون الأدوات المختلفة متوافقة مع نظام React Native البيئي.

بالإضافة إلى ذلك ، من خلال مواجهة مشكلات Github في هذا المجال ، يبدو أن هناك الكثير من عدم الاستقرار الصغير بين إصدارات React Native التي تجعل من الصعب حقًا معرفة السبب الأساسي لمشكلة البنية التحتية مثل تلك التي وصفتها أعلاه. لكني أفترض أنه لا يمكننا أن نمتلك المرونة في مساحة سريعة الحركة كهذه دون بعض التحديات.

هنا هو الريبو مع إعداد إنزيم المرح الخاص بي مع بعض الأمثلة على الاختبارات.

أتمنى أن تكون قد وجدت هذا ممتعًا ومفيدًا! لا تتردد في إضافة أي أسئلة أو تعليقات أدناه.