إعداد Jest والاختبارات الأساسية
ثبّت Jest، واكتب اختبارات describe/it/expect، واستخدم المطابقات مثل toBe وtoEqual، وشغّل الاختبارات في وضع المراقبة أثناء التطوير.
إعداد Jest والاختبارات الأساسية درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا نختبر كود الواجهة الأمامية؟
تكشف الاختبارات التراجعات عند تغيير الكود. كما توثّق السلوك المتوقع، وتمنحك الثقة لإعادة الهيكلة. ومن دون اختبارات، يصبح كل تغيير مجازفة باحتمال تعطل شيء آخر.
تثبيت Jest
في مشروع Vite + React، استخدم Vitest (مشغّل اختبارات متوافق مع Jest ومصمم أصلاً لـ Vite). أما في الإعدادات الأخرى، فثبّت Jest مع babel-jest أو ts-jest لاختبار TypeScript.
# Vitest (preferred for Vite projects):
npm install -D vitest
# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jestتسمية ملفات الاختبار
ضع ملفات الاختبار بجوار المصدر: Button.test.ts وutils.spec.ts. أو ضعها في مجلد __tests__/. يعثر Jest على الملفات المطابقة للنمط *.test.* أو *.spec.*.
describe وit وexpect
نظّم الاختبارات باستخدام كتل describe (للتجميع) ودوال it/test (للاختبارات الفردية). واستخدم expect للتحقق من النتائج.
import { add, formatCurrency } from './utils';
describe('Math utils', () => {
it('adds two numbers', () => {
expect(add(2, 3)).toBe(5);
});
it('handles negative numbers', () => {
expect(add(-1, 1)).toBe(0);
});
});
describe('Currency formatting', () => {
it('formats USD', () => {
expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
});
});أدوات المطابقة الشائعة
يوفر Jest أدوات مطابقة عديدة: toBe (المساواة الصارمة)، وtoEqual (المساواة العميقة)، وtoContain، وtoHaveLength، وtoBeNull، وtoBeTruthy، وtoBeFalsy، وtoThrow، وtoBeGreaterThan.
expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();اختبار الكود غير المتزامن
أعِد الـ promise أو استخدم async/await في الاختبارات. ينتظر Jest اكتمال الـ promise قبل اعتبار الاختبار منتهيًا.
it('fetches user data', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('Alice');
});
// Or with resolves/rejects matchers:
it('resolves with user', () => {
return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});beforeEach وafterEach
شغّل الإعداد والتنظيف قبل كل اختبار وبعده للحفاظ على عزل الاختبارات.
describe('User service', () => {
beforeEach(() => {
db.seed();
});
afterEach(() => {
db.clear();
});
it('creates a user', async () => {
const user = await userService.create({ name: 'Alice' });
expect(user.id).toBeDefined();
});
});تشغيل الاختبارات
يشغّل npm test جميع الاختبارات. ويعيد npm test -- --watch (في Jest)، أو Vitest في وضع المراقبة، تشغيل الاختبارات عند تغيير الملفات. وتوفر واجهة Vitest (vitest --ui) مشغّل اختبارات يعمل في المتصفح.
تغطية الاختبارات
ينشئ jest --coverage (أو vitest run --coverage) تقرير تغطية يوضح الأسطر التي تم اختبارها. وتُعد تغطية تتجاوز 70% هدفًا شائعًا للفِرق. لكن تغطية 100% لا تعني خلو الكود من الأخطاء.
كتابة كود قابل للاختبار
تكون الدوال النقية (التي لا تُحدث آثارًا جانبية) سهلة الاختبار بشكل مباشر. اجعل الدوال صغيرة ومركزة. وحقن الاعتماديات بدلًا من استيرادها مباشرةً يجعل استبدالها بنُسخ اختبارية أمرًا سهلًا.
عزل الاختبارات
ينبغي أن يكون كل اختبار مستقلًا تمامًا. فالاختبارات التي تعتمد على الآثار الجانبية لاختبارات أخرى هشة. تجنب مشاركة الحالة القابلة للتغيير بين الاختبارات. وأعد ضبط جميع الـ mocks في afterEach.
تحقق سريع
أي أداة مطابقة في Jest تتحقق من المساواة العميقة بين كائنين؟
مراجعة: أساسيات Jest
تجمع describe الاختبارات. وتعرّف it/test الاختبارات الفردية. ويتحقق expect مع أدوات المطابقة من النتائج. استخدم toBe للقيم البدائية، وtoEqual للكائنات والمصفوفات. اختبر الكود غير المتزامن باستخدام async/await أو بإعادة الـ promise. استخدم beforeEach/afterEach للعزل. وتوضح تقارير التغطية الأسطر التي تم اختبارها. وتُعد الدوال النقية الأسهل اختبارًا.
الأسئلة الشائعة
هل درس «إعداد Jest والاختبارات الأساسية» مجاني؟
نعم — نص درس «إعداد Jest والاختبارات الأساسية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «إعداد Jest والاختبارات الأساسية»؟
ثبّت Jest، واكتب اختبارات describe/it/expect، واستخدم المطابقات مثل toBe وtoEqual، وشغّل الاختبارات في وضع المراقبة أثناء التطوير. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «إعداد Jest والاختبارات الأساسية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد Jest والاختبارات الأساسية
- @testing-library/react: render وuserEvent
- @testing-library/vue: تركيب المكوّنات
- محاكاة الوحدات واستدعاءات API