كيفية إعداد Jest & Enzyme كأنه مدرب

تصوير داود زويعة على Unsplash

عندما بدأت في كتابة اختبارات تطبيق React الخاص بي ، استغرق الأمر مني بعض المحاولات قبل معرفة كيفية إعداد بيئة الاختبار الخاصة بي باستخدام Jest & Enzyme. يفترض هذا البرنامج التعليمي أن لديك بالفعل تطبيق React تم إعداده باستخدام webpack & babel. سوف نستمر من هناك.

هذا جزء من سلسلة من المقالات التي كتبت. أنا أتحدث عن كيفية إعداد تطبيق React للإنتاج بالطريقة الصحيحة والسهلة.

  • الجزء 1 كيفية الجمع بين Webpack 4 و Babel 7 لإنشاء تطبيق React رائع (محادثات حول إعداد حزمة الويب مع babel ، إلى جانب دعم .scss)
  • الجزء 2 - ستساعدك هذه الأدوات في كتابة رمز نظيف (محادثات حول أتمتة التعليمات البرمجية الخاصة بك ، بحيث تكون جميع الشفرات التي تكتبها رمزًا جيدًا)
  • هذا هو الجزء 3 الذي سأتحدث فيه عن إنشاء Jest مع الإنزيم.

قبل أن نبدأ ، إذا شعرت عالقة في أي وقت ، فلا تتردد في التحقق من مستودع الشفرة. العلاقات العامة هي موضع ترحيب كبير إذا كنت تشعر بأن الأمور يمكن تحسينها.

المتطلبات المسبقة

تحتاج إلى تثبيت العقدة من أجل استخدام npm (مدير حزمة العقدة).

أول الأشياء أولاً ، قم بإنشاء مجلد باسم التطبيق ، ثم افتح الجهاز الخاص بك وانتقل إلى مجلد التطبيق هذا واكتب:

npm init -y

سيؤدي هذا إلى إنشاء ملف package.json لك. في ملف package.json الخاص بك ، أضف ما يلي:

ثانيًا ، أنشئ مجلدًا باسم src في مجلد التطبيق. src / app / folder هو المكان الذي يوجد به كل رمز React إلى جانب اختباره. ولكن قبل ذلك دعونا نفهم لماذا فعلنا ما فعلناه في ملف package.json الخاص بنا.

سأتحدث عن النصوص في بعض الشيء (الوعد). ولكن قبل ذلك دعونا نتعلم لماذا نحتاج إلى التبعيات التالية. أريدك أن تعرف ما الذي يحدث داخل الحزمة الخاصة بك. لذلك دعونا نبدأ.

@ babel / core بما أننا عمومًا نستخدم webpack لتجميع كود التفاعل الخاص بنا. بابل هي تبعية رئيسية تساعد في إخبار webpack عن كيفية ترجمة الشفرة. هذا هو اعتماد الأقران لاستخدام Jest كذلك.

@ babel / polyfil Jest يتطلب شيئًا يُسمى regenerator-runtime ، و @ babel / polyfill يأتي مدمج معها وبعض الميزات الرائعة الأخرى.

@ babel / preset-env & @ babel / preset-react هو لميزات مثل ES6 و React ، لذلك أثناء كتابة اختبارات الوحدة يعرف Jest عن بناء الجملة ES6 و JSX.

babel-core هذا هو في الغالب تبعية لـ Jest ، حيث نحتاج إلى babel-core لكي يعمل Jest.

babel-jest سوف يساعد بابل على فهم الكود الذي نكتبه في Jest

إنزيم هذه مكتبة تأكيد تسهل عملية إخراج مكونات React Components الخاصة بك والتعامل معها وتجاوزها.

enzyme-adapter-react-16 محول / أداة وسط لمساعدة Jest على الاتصال بالإنزيم

jest Jest هي مكتبة الاختبار التي سنجري اختباراتنا عليها.

يمكنك إلقاء نظرة على مثال بسيط للغاية للعظام من قِبل الأشخاص البارعين في مزاح. يستخدم بابل لإجراء اختبار بسيط هنا.

وأيضًا إذا كنت ترغب في إعداد حزمة الويب لـ React ، فهذه مقدمة مفصلة حول كيفية القيام بذلك. أو يمكنك ببساطة الاطلاع على قاعدة الشفرة بأكملها التي تستخدم بنية العظام الأساسية لما ستحتاج إليه عند إعداد تطبيق React الخاص بك جنبًا إلى جنب مع jest / enzyme (أداة بدء التشغيل هنا).

بعد ذلك ، دعنا ننشئ ملفًا باسم jest.config.js في مجلد التطبيق الرئيسي لدينا وأضف الكود التالي إليه. سأتحدث عما يفعله هذا قليلاً.

ثانياً ، قم بإنشاء ملف يسمى enzyme.config.js في مجلد التطبيق الرئيسي الخاص بك وأضف الكود التالي إليه.

دعونا نتحدث أولاً عن jest.config.js

يقوم clearMocks بمسح جميع أنواع mocks ، بحيث لا يتغير الاختبار المقلد في الاختبار nth أو يؤثر عليه في الموضع n + 1.

يخبر collectCoverageFrom jest بجمع تغطية الرمز من جميع ملفات .js في src / folder. تخبرك التغطية بالنسبة المئوية من الشفرة التي تغطيها حالات الاختبار الخاصة بك.

يقوم CoverDirectory بإخبار Jest بأنه يجب تسمية دليل التغطية بأنه تغطية في التطبيق / المجلد الرئيسي.

يأخذ moduleFileExtensions مجموعة من الملحقات التي تخبر Jest عن الملفات التي يمكنه اختبارها. نقول ذلك لاختبار جميع ملفات .js | .jsx | .json.

هذا أمر مهم حقًا ، لأنه يخبر Jest المسار من حيث يمكنه الحصول على تكوينات للإنزيم (المزيد حول هذا لاحقًا)

تحدد testEnvironment البيئة التي ستعمل عليها Jest ، حيث إننا نقوم باختبار تطبيق ويب. لقد قمت بتعيين البيئة إلى jsdom

يخبر testMatch Jest الملفات التي سيتم اختبارها. أقوم بتمرير تكوينين هنا ، أحدهما يختبر كل الملفات في أي مجلد باسم __tests__ أو اختبر جميع الملفات التي تنتهي بـ spec.js | .jsx أو test.js | .jsx

testPathIgnorePatterns لا أريد أن يقوم Jest بإجراء اختبارات داخل مجلد node_modules الخاص بي. لذلك لقد تجاهلت هذه الملفات هنا.

testURL يقوم هذا الخيار بتعيين عنوان URL لبيئة jsdom. ينعكس في خصائص مثل location.href

convertIgnorePatterns مجموعة من سلاسل نقش regexp المطابقة لكل مسارات الملفات المصدر ، الملفات المتوافقة ستتخطى عملية التحول. أنا هنا أعطيها واحدة فقط ل node_modules

مطول إذا كان صحيحا يمنحك سجل التفاصيل جدا عند تشغيل الاختبارات. لا أريد أن أرى ذلك ، وأركز فقط على جوهر اختباراتي. لذلك لقد قمت بتعيين قيمتها إلى false

دعونا نتحدث عن enzyme.config.js

أقوم بتمرير مسار enzyme.config.js في ملف الإعداد الخاص بي في تكوينات Jest. عندما يتعلق الأمر بهذا الملف ، فإن Jest يأخذ تكوينات الإنزيم. وهذا يعني أن جميع الاختبارات سيتم تشغيلها على Jest. لكن التأكيدات وكل شيء آخر سوف يتم عن طريق الإنزيم.

مع هذا في المكان ، تتم تكوينات لدينا. دعونا نتحدث عن البرامج النصية:

"نصوص": {
    "اختبار": "مزاح" ،
    "test: watch": "jest --watch" ،
    "اختبار: التغطية": "jest --coverage --colors"،
}،

تشغيل اختبار npm هذا سوف يعمل Jest وتنفيذ جميع الاختبارات

اختبار تشغيل npm: ستعمل الساعة على إجراء جميع الاختبارات وتستمر في وضع المراقبة ، بحيث عندما نقوم بإجراء أي تغييرات على حالات الاختبار الخاصة بنا ، سيتم تنفيذ حالات الاختبار هذه مرة أخرى.

اختبار تشغيل npm: ستنشئ التغطية تقرير تغطية بناءً على جميع الاختبارات التي تنفذها ، وتعطيك تقرير تغطية مفصل في مجلد التطبيق / التغطية.

قبل إجراء الاختبار ، نحتاج إلى إنشاء اختبار. دعنا نبدأ. في التطبيق / src / المجلد الخاص بك ، قم بإنشاء ملف يسمى WelcomeMessage.js.

في نفس المجلد ، قم بإنشاء ملف يسمى WelcomeMessage.test.js

من بين الأشياء التي يجب ملاحظتها هنا أنك لن تتمكن من تشغيل ملف WelcomMessage.js فعليًا لأنك لم تقم بإعداد حزمة الويب مع babel. إذا كنت تبحث عن طريقة لإعداد ذلك ، فتحقق من البرنامج التعليمي الخاص بي حول كيفية الجمع بين Webpack 4 و Babel 7 لإنشاء تطبيق React الرائع. أيضًا إذا كنت تريد فقط شفرة المصدر لهذا البرنامج التعليمي ، فإليك مستودع الأكواد. لديها بالفعل إعداد Jest & Enzyme. لا تتردد في عمل شوكة وبدء اللعب باستخدام قاعدة الكود.

بالعودة إلى الكود الذي كتبناه للتو ، في اختبار تشغيل npm من النوع الطرفي الخاص بك. سيتم تنفيذ برنامج نصي والعثور على جميع الملفات التي تنتهي بـ * .test.js وتنفيذها. بعد تنفيذها ، سترى رسالة مثل هذا:

أجنحة اختبار: 1 مرت ، 1 المجموع
الاختبارات: 1 مرت ، 1 المجموع

الآن أعرف أن هذا ليس اختبارًا عمليًا للوحدة ، لكنني أردت أن يركز هذا البرنامج التعليمي على إعداد Jest & Enzyme بحت.

مرة أخرى هنا هو شفرة المصدر لهذا البرنامج التعليمي.