الاختبار
في React وNext.js، هناك أنواع مختلفة من الاختبارات التي يمكنك كتابتها، لكل منها غرضه وحالات استخدامه الخاصة. توفر هذه الصفحة نظرة عامة على الأنواع والأدوات الشائعة التي يمكنك استخدامها لاختبار تطبيقك.
أنواع الاختبارات
- اختبار الوحدة (Unit Testing): يتضمن اختبار وحدات فردية (أو كتل من التعليمات البرمجية) بمعزل عن غيرها. في React، يمكن أن تكون الوحدة دالة واحدة، خطاف (hook)، أو مكونًا.
- اختبار المكونات (Component Testing): هو نسخة أكثر تركيزًا من اختبار الوحدة حيث يكون الموضوع الرئيسي للاختبارات هو مكونات React. قد يتضمن ذلك اختبار كيفية عرض المكونات، تفاعلها مع الخصائص (props)، وسلوكها استجابةً لأحداث المستخدم.
- اختبار التكامل (Integration Testing): يتضمن اختبار كيفية عمل وحدات متعددة معًا. يمكن أن يكون هذا مزيجًا من المكونات، الخطافات، والدوال.
- اختبار من البداية إلى النهاية (End-to-End Testing - E2E): يتضمن اختبار تدفقات المستخدم في بيئة تحاكي سيناريوهات المستخدم الحقيقية، مثل المتصفح. وهذا يعني اختبار مهام محددة (مثل تدفق التسجيل) في بيئة تشبه البيئة الإنتاجية.
- اختبار اللقطات (Snapshot Testing): يتضمن التقاط الناتج المعروض لمكون وحفظه في ملف لقطة. عند تشغيل الاختبارات، يتم مقارنة الناتج المعروض الحالي للمكون مع اللقطة المحفوظة. تُستخدم التغييرات في اللقطة للإشارة إلى تغييرات غير متوقعة في السلوك.
مكونات الخادم غير المتزامنة (Async Server Components)
نظرًا لأن مكونات الخادم غير المتزامنة (async
) جديدة في نظام React البيئي، فإن بعض الأدوات لا تدعمها بالكامل. في الوقت الحالي، نوصي باستخدام اختبار من البداية إلى النهاية (E2E Testing) بدلاً من اختبار الوحدة (Unit Testing) لمكونات async
.
أدلة
راجع الأدلة أدناه لتعلم كيفية إعداد Next.js مع أدوات الاختبار الشائعة هذه:
Cypress
تعلم كيفية إعداد Cypress مع Next.js لاختبارات نهاية إلى نهاية (E2E) واختبار المكونات.
Jest
تعلم كيفية إعداد Jest مع Next.js لإجراء اختبارات الوحدة واختبارات اللقطات (Snapshot Testing).
Playwright
تعلم كيفية إعداد Playwright مع Next.js لاختبارات End-to-End (E2E).
Vitest
تعلم كيفية إعداد Vitest مع Next.js لإجراء اختبارات الوحدة (Unit Testing).