اختبار JavaScript: من أين يبدأ المبتدئ في 2024

لماذا اختبار JavaScript ليس مخيفًا بل مفيدًا؟

عندما بدأت الكتابة بلغة JavaScript لأول مرة، كنت أعتقد أن الاختبار هو شيء من فئة السحر العالي. "لماذا؟ أنا أرى أن الكود يعمل!" - كنت أفكر. ثم يأتي يوم الاثنين، أضيف دالة صغيرة واحدة، وينهار كل شيء. هل هذا مألوف؟

اختبار JavaScript هو مثل التأمين على الكود الخاص بك. تكتبه مرة واحدة، وتتحقق من عمله مئات المرات تلقائيًا. وصدقني، عندما ينمو مشروعك إلى 10,000 سطر من الكود، ستشكر من أجبرك على كتابة أول اختبار.

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

أنواع الاختبارات: ما يحتاج المبتدئ معرفته

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

اختبارات الوحدة (Unit tests)

هذه اختبارات لأصغر أجزاء الكود - الدوال، الطرق، الكلاسات. تتحقق من: "هل تعمل هذه الدالة المحددة كما خططت؟". اختبارات الوحدة JavaScript هي الأساس الذي يبدأ منه الجميع.

اختبارات التكامل (Integration tests)

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

اختبارات E2E (End-to-End)

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

للبداية، يكفيك إتقان اختبارات الوحدة. كل شيء آخر سيأتي مع الخبرة.

الأدوات: ماذا يختار المبتدئ؟

سوق أدوات اختبار JavaScript ضخم. لكنني سأذكر ثلاث مجموعات يمكن للمبتدئين استخدامها فعليًا:

• Jest - الإطار الأكثر شهرة. يعمل "مباشرة من الصندوق"، ولا يتطلب إعدادًا معقدًا. مثالي للبداية.
• Mocha + Chai - كلاسيكي. Mocha يشغل الاختبارات، Chai يوفر دوال مريحة للتحقق (assertions).
• Vitest - حديث وسريع، يشبه Jest تقريبًا، لكن للمشاريع على Vite.

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

كتابة أول اختبار: دليل خطوة بخطوة

دعنا نكتب كودًا حقيقيًا. لنفترض أن لدينا دالة بسيطة تجمع رقمين:

// math.jsfunction add(a, b) {  return a + b;}

module.exports = add;

الآن سنثبت Jest. افتح الطرفية في مجلد المشروع ونفذ:

npm init -ynpm install --save-dev jest

أضف في package.json سكريبت لتشغيل الاختبارات:

"scripts": {  "test": "jest"}

أنشئ ملف math.test.js في نفس المجلد. لنكتب الاختبار:

// math.test.jsconst add = require('./math');

test('يجمع 2 + 3 ويحصل على 5', () => {  expect(add(2, 3)).toBe(5);});

test('يجمع أرقامًا سالبة', () => {  expect(add(-1, -1)).toBe(-2);});

test('يجمع صفرًا', () => {  expect(add(0, 0)).toBe(0);});

شغل الاختبارات بالأمر npm test. إذا تم كل شيء بشكل صحيح، سترى علامات خضراء. تهانينا، لقد كتبت للتو أول اختبار JavaScript لك!

كيفية اختبار دوال أكثر تعقيدًا؟

حسنًا، تعلمنا جمع الأرقام. ماذا لو كانت الدالة تعمل مع المصفوفات أو الكائنات؟ دعنا نحلل مثالًا أكثر تعقيدًا.

دالة تصفية المستخدمين حسب العمر:

// users.jsfunction filterAdults(users) {  return users.filter(user => user.age >= 18)