كيفية إعداد Jest لاختبار التفاعل؟

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

Jest هو إطار اختبار مفتوح المصدر تم إنشاؤه بواسطة Facebook ، وهو مصمم لجعل اختبار كود JavaScript الخاص بك سهلاً وفعالًا قدر الإمكان. إنه سريع ، ويحتوي على واجهة برمجة تطبيقات سهلة الاستخدام ، ويأتي مع عدد من الميزات المضمنة التي تجعل الاختبار أمرًا سهلاً.

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

Jest لاختبار التفاعل

Jest هو إطار اختبار شائع يستخدم لاختبار تطبيقات React. تم إنشاؤه بواسطة Facebook وهو معروف بسهولة الاستخدام ووقت الإعداد السريع. تم تصميم Jest للعمل مع React خارج الصندوق ويوفر العديد من الميزات لتسهيل الاختبار.

فيما يلي بعض الميزات التي تجعل Jest خيارًا شائعًا لاختبار تطبيقات React:

i) اختبار اللقطة: يوفر Jest ميزة اختبار اللقطة التي تسمح لك بمقارنة الإخراج الحالي لمكون مع لقطة مخزنة مسبقًا. هذا يجعل من السهل التحقق مما إذا كان قد تم إجراء أي تغييرات غير مقصودة على إخراج المكون.

ب) السخرية: يوفر Jest إمكانيات مدمجة للسخرية تتيح لك إنشاء وظائف ووحدات نموذجية. يكون هذا مفيدًا عندما تحتاج إلى محاكاة سلوك دالة أو وحدة غير متوفرة بسهولة أو يصعب اختبارها.

3) تغطية الكود: يوفر Jest تقرير تغطية الكود الذي يوضح النسبة المئوية للرمز التي تغطيها اختباراتك. هذا مفيد لتحديد مناطق التعليمات البرمجية الخاصة بك التي لم يتم اختبارها والتي قد تحتاج إلى مزيد من الاهتمام.

4) الاختبار غير المتزامن: يجعل Jest من السهل اختبار التعليمات البرمجية غير المتزامنة من خلال توفير أدوات مساعدة لإدارة التعليمات البرمجية غير المتزامنة. يتيح لك ذلك كتابة الاختبارات التي تنتظر الوعود أو غيرها من التعليمات البرمجية غير المتزامنة لحلها قبل إجراء التأكيدات.

v) إعداد سهل: Jest سهل الإعداد والتهيئة لتطبيق React الخاص بك. يأتي مع تكوين افتراضي يعمل خارج الصندوق ، ولكن يمكن تخصيصه ليناسب احتياجاتك الخاصة.

بشكل عام ، Jest هو إطار اختبار قوي ومرن يجعل من السهل اختبار تطبيقات React. تجعله ميزاته العديدة وإعداده السهل خيارًا شائعًا للمطورين الذين يرغبون في كتابة اختبارات موثوقة لمكونات React الخاصة بهم.

إعداد Jest لاختبار التفاعل

هناك بعض الخطوات التي يجب عليك اتباعها لإعداد Jest لاختبار React في عام 2023.

1) تثبيت Jest

يمكن تثبيت Jest في مشروعك باستخدام npm أو الغزل. فيما يلي خطوات تثبيت Jest باستخدام npm:

i) افتح Terminal أو موجه الأوامر وانتقل إلى دليل المشروع الخاص بك.

ب) قم بتشغيل الأمر التالي لتثبيت Jest كاعتماد تطوير في مشروعك:

npm install –save-dev jest

سيقوم هذا الأمر بتثبيت Jest وإضافته إلى ملف package.json الخاص بمشروعك ضمن قسم devDependencies.

بمجرد اكتمال التثبيت ، يمكنك البدء في كتابة اختباراتك باستخدام Jest. يمكنك إجراء اختباراتك باستخدام الأمر npm test. بشكل افتراضي ، يبحث Jest عن ملفات الاختبار التي تم تسميتها بامتداد .test.js أو .spec.js . ومع ذلك ، يمكنك تكوين Jest للبحث عن الاختبارات ذات الامتدادات الأخرى عن طريق تعديل خاصية testMatch في ملف تكوين Jest.

هذا كل شيء! لديك الآن Jest مثبتًا في مشروعك ويمكنك البدء في كتابة الاختبارات لتطبيقك.

2) إنشاء ملف التكوين

لإنشاء ملف تكوين لـ Jest ، يمكنك إنشاء ملف باسم jest.config.js في الدليل الجذر لمشروعك. سيحتوي هذا الملف على خيارات التكوين التي يجب أن تستخدمها Jest عند تشغيل الاختبارات.

فيما يلي مثال لملف التكوين:

module.exports = {

// يشير إلى أنواع الملفات التي يجب اعتبارها ملفات اختبار.

testMatch: [

'** / __ tests __ / ** / *. js؟ (x)' ،

'** /؟ (*.) + (spec | test) .js؟ (x)'

] ،

// قائمة بالمسارات إلى الدلائل التي يجب أن تستخدمها Jest للبحث عن الملفات في.

الجذور: ['<rootDir> / src']،

// خريطة من التعبيرات العادية إلى المسارات إلى المحولات.

تحول: {

'^. + \\. (js | jsx | ts | tsx) $': 'babel-jest'

} ،

// أنماط الكرة الأرضية التي يستخدمها Jest لاكتشاف ملفات الاختبار.

testPathIgnorePatterns: [

"<rootDir> / node_modules /" ،

"<rootDir> / بناء /"

] ،

// قائمة بأسماء المراسلين الصحفيين التي يستخدمها Jest عند كتابة تقارير التغطية.

coverReporters: ['json'، 'text'، 'html']،

// مجموعة من امتدادات الملفات التي تستخدمها الوحدات النمطية الخاصة بك.

moduleFileExtensions: ['js'، 'json'، 'jsx']

} ؛

يحدد ملف التكوين هذا المثال الخيارات التالية:

أ) testMatch: يحدد النمط المستخدم لتحديد ملفات الاختبار.

ب) root: يحدد الدلائل التي يجب أن يبحث فيها Jest عن الملفات.

ج) التحويل: يحدد التحويلات التي يجب أن تطبقها Jest على الملفات قبل تشغيل الاختبارات.

د) testPathIgnorePatterns: يحدد الأنماط التي يجب تجاهلها عند البحث عن ملفات الاختبار.

ه) التغطية Reporters: تحدد المراسلين الذين يجب أن يستخدمهم Jest لإنشاء تقارير التغطية.

f) moduleFileExtensions: يحدد امتدادات الملفات التي يجب أن يبحث عنها Jest عند البحث عن الملفات.

يمكنك تعديل ملف التكوين هذا ليناسب احتياجات مشروعك. بمجرد إنشاء ملف التكوين الخاص بك ، سيستخدمه Jest تلقائيًا عند تشغيل الاختبارات في مشروعك.

3) اكتب الاختبارات الخاصة بك

بمجرد تثبيت Jest وإعداد ملف التكوين ، يمكنك البدء في كتابة الاختبارات لتطبيق React الخاص بك. فيما يلي خطوات إنشاء ملف اختبار وكتابة اختبار:

ط) أنشئ ملفًا جديدًا بالملحق .test.js أو .spec.js . سيكون هذا ملف الاختبار الخاص بك.

ب) في ملف الاختبار ، قم باستيراد المكون أو الوظيفة التي تريد اختبارها:

استيراد {مبلغ} من "./myFunctions" ؛

ج) اكتب الاختبار الخاص بك. الاختبار هو دالة تستخدم Jest API للتحقق من أن المكون أو الوظيفة تعمل كما هو متوقع:

وصف ('sum'، () => {

test ('تضيف 1 + 2 لتساوي 3' ، () => {

توقع (مجموع (1 ، 2)). toBe (3) ؛

}) ؛

}) ؛

في هذا المثال ، نختبر دالة جمع بسيطة تجمع رقمين. وصف مجموعات الوظائف ذات الصلة بالاختبارات معًا ، بينما تحدد وظيفة الاختبار حالة اختبار واحدة. تتحقق دالة التوقع من أن دالة المجموع ترجع القيمة المتوقعة.

4) قم بإجراء الاختبارات الخاصة بك عن طريق تنفيذ الأمر npm test في دليل المشروع الخاص بك. سيبحث Jest عن ملفات الاختبار في مشروعك وينفذ أي اختبارات يعثر عليها.

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

من خلال كتابة اختبارات لتطبيق React الخاص بك ، يمكنك التأكد من أن التعليمات البرمجية الخاصة بك تعمل على النحو المتوقع وتجنب إدخال الانحدارات أثناء إجراء تغييرات على قاعدة التعليمات البرمجية الخاصة بك.

4) قم بإجراء الاختبارات الخاصة بك

لإجراء اختباراتك باستخدام Jest ، يمكنك استخدام الأمر npm test في دليل المشروع. سيكتشف Jest تلقائيًا ويشغل أي ملفات اختبار في مشروعك تطابق النمط المحدد في ملف تكوين Jest الخاص بك.

عند تشغيل اختبار npm ، ستخرج Jest نتائج اختباراتك في وحدة التحكم. إذا نجحت جميع الاختبارات ، فستعرض Jest ملخصًا لنتائج الاختبار:

تمرير src / المكونات / Example.test.js

✓ يُعرض بدون تحطم (21 مللي ثانية)

مجموعات الاختبار: 1 ناجح ، 1 إجمالي

الاختبارات: 1 ناجح ، 1 إجمالي

لقطات: 0 المجموع

الوقت: 3.204 ثانية ، يقدر بـ 4 ثوان

تم تشغيل جميع أجنحة الاختبار.

إذا فشلت أي اختبارات ، فستعرض Jest رسالة خطأ تصف الفشل وموقع الاختبار الفاشل:

FAIL src / المكونات / Example.test.js

• عنصر المثال ›يتم عرضه دون تعطل

TypeError: لا يمكن قراءة الخاصية 'map' من undefined

10 | يجعل() {

11 | const {items} = this.props؛

> 12 | return items.map (item => <div key = {item.id}> {item.name} </div>) ؛

| ^

13 | }

14 | }

15 |

في example.render (src / element / Example.js: 12: 17)

في ReactTestRenderer.render (node_modules / رد فعل-اختبار-عارض / cjs / رد فعل-اختبار-عرض تقديمي. تطوير.جس: 1052: 32)

في الكائن. <مجهول> (src / المكونات / Example.test.js: 9:16)

مجموعات الاختبار: فشل 1 ، إجمالي 1

الاختبارات: فشل 1 ، إجمالي 1

لقطات: 0 المجموع

الوقت: 3.537 ثانية ، يقدر بـ 4 ثوان

تم تشغيل جميع أجنحة الاختبار.

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

تغليف

LambdaTest عبارة عن منصة اختبار قوية قائمة على السحابة يمكن استخدامها مع Jest لاختبار تطبيقات React. من خلال الاستفادة من قابلية التوسع في البنية التحتية المستندة إلى السحابة الخاصة بـ LambdaTest ، يمكنك إجراء اختبارات Jest الخاصة بك بسرعة وكفاءة على مجموعة واسعة من المتصفحات والأجهزة ، مما يضمن أن تطبيقك يعمل كما هو متوقع عبر بيئات مختلفة.

في هذه المدونة ، غطينا الخطوات المطلوبة لإعداد Jest لاختبار تطبيقات React. تعلمنا أيضًا كيفية تكوين Jest لاستخدام LambdaTest كبيئة اختبار ، وكتابة الاختبارات باستخدام Jest ، وتنفيذ الاختبارات على البنية التحتية القائمة على السحابة في LambdaTest.

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

لذلك ، إذا كنت تتطلع إلى تبسيط سير عمل اختبار React ، ففكر في استخدام LambdaTest و Jest معًا لتحقيق اختبار شامل وقابل للتطوير وفعال لتطبيقات React الخاصة بك.