مرحباً بك!
بعد أن كتبت أولى اختباراتك لدالتي fizzBuzz و factorial، حان الوقت لتتعلم كيف تتحكم في عملية تشغيل هذه الاختبارات. في هذا الدرس، سنتعمق في سطر أوامر Vitest ونكتشف الطرق المختلفة لتشغيل اختباراتك، مما يمنحك القوة والمرونة اللازمتين لزيادة إنتاجيتك كمطور.
إن معرفة كيفية تشغيل الاختبارات بفعالية لا تقل أهمية عن كتابتها. ستجد نفسك تشغّل الاختبارات مئات المرات في اليوم، لذا فإن إتقان هذه الأوامر سيوفر عليك وقتاً ثميناً.
الأمر الأساسي لتشغيل الاختبارات
لقد أعددنا بالفعل مشروعنا بحيث يمكننا تشغيل الاختبارات بسهولة. إذا نظرت إلى ملف package.json، ستجد سكربت (script) قمنا بإعداده مسبقاً:
// package.json
{
// ... other properties
"scripts": {
"test": "vitest"
}
// ... other properties
}هذا يعني أنه عند تشغيل الأمر npm test في الطرفية (terminal)، سيقوم npm بتنفيذ الأمر vitest بالنيابة عنك. هذه هي الطريقة الصحيحة لتشغيل الأدوات المثبتة محلياً في مشروعك.
لنجرب ذلك. افتح الطرفية في مشروعك وقم بتشغيل:
npm testبمجرد تنفيذ هذا الأمر، سيبدأ Vitest في البحث عن جميع ملفات الاختبار في مشروعك (الملفات التي تنتهي بـ .test.js أو .spec.js) وتشغيلها. من المفترض أن ترى مخرجات شبيهة بالتالي:
✓ tests/fizzBuzz.test.js (2) 5ms
✓ fizzBuzz function (2) 4ms
✓ should return "Fizz" for numbers divisible by 3
✓ should return "Buzz" for numbers divisible by 5
✓ tests/factorial.test.js (3) 6ms
✓ factorial function (3) 5ms
✓ should return 1 for 0
✓ should return 120 for 5
✓ should throw an error for negative numbers
Test Files 2 passed (2)
Tests 5 passed (5)
Start at 10:30:00
Duration 258ms (transform 2ms, setup 0ms, collect 5ms, tests 11ms)
WATCH press h to show help, press q to quitدعنا نحلل هذه المخرجات:
✓ tests/fizzBuzz.test.js (2) 5ms: هذا السطر يخبرك أن جميع الاختبارات في هذا الملف قد نجحت. الرقم(2)يعني وجود اختبارين (test cases) بداخله، وقد استغرق تشغيله 5 ميلي ثانية.✓ should return "Fizz" ...: هذه هي أسماء الاختبارات الفعلية (التي كتبتها داخلit) مسبوقة بعلامة صح خضراء✓للدلالة على نجاحها.- Summary: في الأسفل، يقدم لك Vitest ملخصاً:
Test Files: 2 passedوTests: 5 passed.
وضع المراقبة (Watch Mode): صديقك المفضل
هل لاحظت السطر الأخير في المخرجات WATCH press h to show help, press q to quit؟
بشكل افتراضي، عند تشغيل npm test، يعمل Vitest في وضع المراقبة (Watch Mode). هذا يعني أنه لا يخرج بعد تشغيل الاختبارات، بل يظل يعمل في الخلفية ويراقب أي تغييرات في ملفاتك. بمجرد حفظ أي تغيير في ملف الكود أو ملف الاختبار، سيقوم Vitest تلقائياً بإعادة تشغيل الاختبارات ذات الصلة فقط!
هذه الميزة قوية بشكل لا يصدق وتعتبر حجر الزاوية في سير عمل التطوير السريع والتطوير الموجه بالاختبارات (TDD). فهي توفر لك تغذية راجعة فورية (instant feedback) حول ما إذا كان التغيير الذي أجريته قد تسبب في كسر أي شيء.
جرّب بنفسك
اترك الطرفية التي تعمل في وضع المراقبة مفتوحة. اذهب إلى ملف factorial.js وقم بتغيير if (n === 0) return 1; إلى if (n === 0) return 0;. احفظ الملف، وانظر فوراً إلى الطرفية. ستلاحظ أن Vitest قد أعاد تشغيل اختبارات factorial تلقائياً وستجد أن أحدها قد فشل الآن!
تشغيل الاختبارات لمرة واحدة (Run-Once Mode)
في بعض الأحيان، لا تريد استخدام وضع المراقبة. على سبيل المثال، في بيئات التكامل المستمر (Continuous Integration - CI) مثل GitHub Actions، تريد تشغيل جميع الاختبارات مرة واحدة، والحصول على تقرير النجاح أو الفشل، ثم إنهاء العملية.
لتحقيق ذلك، نضيف الخيار run إلى أمر `vitest`. من الممارسات الجيدة إضافة سكربت خاص بهذا في package.json:
// package.json
{
// ...
"scripts": {
"test": "vitest",
"test:ci": "vitest run"
}
// ...
}ملاحظة
لتشغيل الأوامر التي تبدأ بـ vitest دون إضافة اختصار لها إلى package.json يمكننا استخدام npx. أي أنه يمكننا تشغيل الأمر vitest run بالأمر التالي: npx vitest run
الآن، يمكنك تشغيل الأمر التالي لتنفيذ الاختبارات مرة واحدة فقط:
npm run test:ciسيقوم هذا الأمر بتشغيل جميع الاختبارات تماماً مثل قبل، ولكنه سيخرج من العملية فور انتهائها.
نصيحة احترافية
استخدم npm test أثناء التطوير اليومي للاستفادة من وضع المراقبة، واستخدم npm run test:ci في خط أنابيب النشر (deployment pipeline) للتحقق من سلامة الكود قبل إرساله.
استهداف ملفات أو اختبارات محددة
عندما يكبر مشروعك، قد يصبح تشغيل جميع الاختبارات في كل مرة بطيئاً وغير فعال. يوفر لك Vitest طرقاً لتحديد ما تريد اختباره بدقة.
لتمرير خيارات إضافية إلى `vitest` من خلال `npm`، نستخدم فاصلاً خاصاً هو --. كل ما يأتي بعد هذا الفاصل يتم تمريره مباشرة إلى الأمر الموجود في السكربت (في حالتنا `vitest`).
تشغيل ملف اختبار واحد
إذا كنت تعمل على ميزة معينة وتريد فقط تشغيل الاختبارات الخاصة بها، يمكنك تمرير اسم الملف بعد الفاصل --:
npm test -- tests/fizzBuzz.test.jsسيؤدي هذا إلى تجاهل جميع ملفات الاختبار الأخرى وتشغيل الاختبارات الموجودة في fizzBuzz.test.js فقط.
تشغيل اختبار محدد بالاسم
لنفترض أن لديك اختباراً واحداً يفشل وتريد التركيز عليه فقط. يمكنك استخدام الراية (flag) -t أو --testNamePattern لتصفية الاختبارات بناءً على أسمائها.
على سبيل المثال، لتشغيل الاختبار الذي يحتوي على عبارة "negative numbers" في ملف factorial:
npm test -- -t "negative numbers"سيقوم Vitest بالبحث في جميع ملفات الاختبار عن أي describe أو it يطابق هذا النمط وتشغيله. يمكنك أيضاً دمجه مع اسم ملف لتضييق النطاق أكثر:
npm test -- tests/factorial.test.js -t "negative numbers"واجهة المستخدم الرسومية (UI Mode)
يقدم Vitest ميزة رائعة وهي واجهة مستخدم رسومية تعمل في المتصفح. إنها طريقة تفاعلية ومرئية لاستكشاف نتائج اختباراتك وتشخيص المشاكل.
لتسهيل تشغيلها، من الأفضل إضافة سكربت مخصص لها في `package.json`:
// package.json
{
// ...
"scripts": {
"test": "vitest",
"test:ci": "vitest run",
"test:ui": "vitest --ui"
}
// ...
}الآن يمكنك تشغيل واجهة المستخدم بسهولة عبر الأمر:
npm run test:uiسيفتح هذا الأمر واجهة ويب في متصفحك، تعرض لك جميع ملفات الاختبار وحالاتها. يمكنك النقر على الملفات والاختبارات لرؤية التفاصيل، المخرجات، والأخطاء بشكل منظم وواضح. إنها أداة ممتازة لتصحيح الأخطاء (debugging) والحصول على نظرة عامة على صحة جناح الاختبارات (test suite) الخاص بك.
الخلاصة
لقد قطعت شوطاً كبيراً! أنت الآن لا تعرف فقط كيفية كتابة الاختبارات، بل وكيفية تشغيلها والتحكم فيها كالمحترفين. لنلخص ما تعلمته:
npm test: يشغل Vitest في وضع المراقبة (Watch Mode) للحصول على تغذية راجعة فورية أثناء التطوير.npm run test:ci: يشغل الاختبارات مرة واحدة، وهو مثالي لبيئات CI.npm test -- <filename>: يركز على ملف اختبار واحد لتجنب الضوضاء.npm test -- -t <pattern>: يستهدف اختبارات محددة بالاسم لتصحيح الأخطاء بسرعة.npm run test:ui: يفتح واجهة رسومية تفاعلية لتصور حالة اختباراتك.
جرب هذه الأوامر المختلفة مع الاختبارات التي كتبتها لتعتاد عليها. في الدرس التالي، سنرى كيف يمكن لمحرر الأكواد VSCode أن يجعل التنقل بين اختباراتك أسهل وأسرع.
إرسال تعليق