اختبار مكونات التفاعل باستخدام Jest ومكتبة اختبار التفاعل

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

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

يمكنك بسهولة كتابة الاختبارات في React باستخدام Jest ومكتبة اختبار React.

ما الذي يجب عليك اختباره في React؟

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

بدلاً من ذلك ، يجب عليك اختبار تطبيق المستخدم النهائي فقط. هذا يعني اختبار كيفية استخدام المستخدم النهائي لتطبيقك بدلاً من اختبار الإجراءات الداخلية لتطبيقك.

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

عند تحديد ما سيتم اختباره ، هناك شيء واحد يجب مراعاته وهو عدم اختبار الوظيفة التي تتعامل معها React بنفسها. على سبيل المثال ، بدلاً من اختبار صلاحية الخاصيات ، يمكنك استخدام React PropTypes.

اختبار مكون الزر

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

قم بإنشاء ملف جديد بتنسيق src مجلد يسمى Button.js وأضف الكود التالي.

وظيفةزر({القيمة}) {
إرجاع (
<زر>{القيمة}</button>
 )
}
يصدّرإفتراضي زر

يقبل Button.js خاصية تسمى القيمة ويستخدمها كقيمة زر.

كتابة الاختبار الأول الخاص بك

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

قم بإنشاء ملف جديد يسمى Button.test.js في مجلد src. بشكل افتراضي ، يحدد Jest الملفات الملحقة بـ .test.js كملفات اختبار وتشغيلها تلقائيًا. خيار آخر هو إضافة ملفات الاختبار الخاصة بك إلى مجلد يسمى __الاختبارات _.

أضف التعليمات البرمجية التالية في Button.test.js لإنشاء الاختبار الأول.

يستورد { يجعل } من "@ test-library / رد فعل" ؛
يستورد زر من '../زر'؛
يصف('مكون الزر', () => { 
 اختبار('يجسد مكون الزر دون أن يتعطل', () => {
 يجعل(<زر />);
 }); 
})

يحدد هذا الاختبار أولاً ما يدور حوله الاختبار باستخدام كتلة الوصف المقدمة من Jest. هذه الكتلة مفيدة لتجميع الاختبارات ذات الصلة. هنا ، تقوم بتجميع الاختبارات لمكون Button.

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

في هذا المثال ، يجب أن يعرض الاختبار مكون Button دون تعطل. تقوم طريقة التصيير من مكتبة React Testing Library بإجراء الاختبار الفعلي. يتحقق مما إذا كان مكون Button يتم عرضه بشكل صحيح. إذا حدث ذلك ، ينجح الاختبار ، وإلا فإنه يفشل.

استخدام الأدوار للعثور على الزر

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

screen.getByRole ('زر')

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

getByRole () هي واحدة من بين العديد من الاستعلامات التي يمكنك استخدامها لتحديد عناصر في أحد المكونات. تحقق من أنواع الاستعلامات الأخرى في The مكتبة اختبار التفاعل دليل "أي استعلام يجب أن أستخدمه". أيضًا بخلاف دور "الزر" ، معظم عناصر HTML الدلالية لها أدوار ضمنية يمكنك استخدامها لتنفيذ استفساراتك. ابحث عن قائمة الأدوار من مستندات MDN.

أضف ما يلي إلى كتلة الاختبار للتحقق من عرض المكون.

اختبار('يجسد الزر دون أن تتحطم', () => {
 يجعل(<قيمة الزر ="اشتراك" />);
 توقع (screen.getByRole ('زر')). toBeInTheDocument ()
});

يتحقق المطابق toBeInTheDocument () من وجود عنصر الزر في المستند.

توقع أن يتم عرض الزر بشكل صحيح

يقبل مكون الزر قيمة الخاصية ويعرضها. لكي يتم عرضه بشكل صحيح ، يجب أن تكون القيمة التي يعرضها هي نفس القيمة التي مررتها.

قم بإنشاء كتلة اختبار جديدة وأضف الكود التالي.

اختبار('يعرض الزر بشكل صحيح', () => {
 يجعل(<قيمة الزر ="تسجيل الدخول" />);
 توقع (screen.getByRole ('زر')). toHaveTextContent ("تسجيل الدخول")
})

لاحظ أنك لست بحاجة إلى إجراء عمليات تنظيف بعد الاختبارات عند استخدام مكتبة اختبار React. في الإصدارات السابقة ، ستحتاج إلى إجراء التنظيف يدويًا كما يلي:

afterEach (تنظيف)

الآن ، تقوم مكتبة الاختبار بإلغاء تحميل المكونات تلقائيًا بعد كل عملية تصيير.

إنشاء اختبارات لقطة

حتى الآن ، لقد اختبرت سلوك مكون Button. اكتب اختبارات لقطة لاختبار ما إذا كان إخراج المكون لا يزال كما هو.

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

تعد اختبارات اللقطة مفيدة للغاية عندما تريد التأكد من أن واجهة المستخدم الخاصة بك لا تتغير بشكل غير متوقع.

يختلف اختبار اللقطة عن اختبارات الوحدة نظرًا لأنك بحاجة إلى كود يعمل بالفعل لإنشاء اللقطة.

ستستخدم طريقة العارض من حزمة npm رد فعل-اختبار-عارض. لذلك ، قم بتنفيذ الكود التالي لتثبيته.

npm تثبيت تتفاعل-اختبار-العارض

في Button.test.js ، اكتب اختبار اللقطة على النحو التالي:

اختبار('لقطة المباريات', () => {
 شجرة const = renderer.create (<قيمة الزر ="تسجيل الدخول" />) .toJSON () ؛
توقع(شجرة).toMatchSnapshot();
})

لا توجد لقطات حالية لمكون Button ، لذا فإن تشغيل هذا الاختبار سيؤدي إلى إنشاء ملف لقطة بجانب ملف الاختبار:

زر
└─── __الاختبارات__
│ │ زر.tests.js
│ └─── __لقطه __
│ │ زر.اختبار.js.يفرقع، ينفجر
│ 
└─── زر.js

الآن ، عند إجراء الاختبار التالي ، ستقارن React اللقطة الجديدة التي تولدها مع اللقطة المخزنة.

اكتب اختبارات المكونات الأكثر استخدامًا

علمك هذا البرنامج التعليمي كيفية كتابة اختبارات DOM واللقطات في React عن طريق اختبار مكون Button. قد تكون اختبارات الكتابة لجميع المكونات التي تقوم بإنشائها مملة. ومع ذلك ، توفر لك هذه الاختبارات الوقت الذي كنت ستقضيه في تصحيح أخطاء التعليمات البرمجية التي تم نشرها بالفعل.

لا تحتاج إلى تحقيق تغطية اختبارية بنسبة 100 في المائة ولكن تأكد من كتابة الاختبارات للمكونات الأكثر استخدامًا والأكثر أهمية.