مذكرات سعيد
اتقرأ🔖

🗺️ الخريطة

التجهيزفصلين
فصل ١المكتبات السبعة — كل واحدة فين؟#runner #fake browser #render #interaction #network
فصل ٢تجهيز Vitest وMSW مرة واحدة#jsdom environment #global setup #reset handlers
الفورمفصلين
فصل ٣تست Form Submission خطوة بخطوة#submit success #request body #validation #error
فصل ٤الفورم — Validation وServer Error#client error #server error #isolation
القائمةفصلين
فصل ٥تست List — Loading وData وEmpty وError#async list #loading #rows #empty #error
فصل ٦تفاعل جوه القائمة — حذف Row#row action #delete request #disappearance
الخلاصةفصل واحد
الآخرCheat Sheet: React مع Vitest#setup #form #list #common mistakes

الموضوع ده مش شرح نظري لكل أنواع الاختبارات. هنا هنبني test stack واحدة، وبعدها نستخدمها في سيناريوهين بيظهروا في أي admin panel: فورم بتبعت بيانات وقائمة بتجيب بيانات.

هنختبر اللي اليوزر يشوفه ويعمله، ونخلي MSW تمثل الـ backend عند حدود الشبكة.

ملخص اللي بيحصل

Vitest└── يشغّل ملف الـ test والـ hooks والـ expect    └── jsdom        └── يجهّز document وwindow كمتصفح وهمي            └── React Testing Library                └── ترسم الصفحة وتدور على العناصر                    └── user-event                        └── اليوزر يكتب ويدوس "حفظ"                            └── MSW                                └── تمسك request وترد بدل الـ backend                                    └── jest-dom                                        └── تفحص النتيجة الظاهرة في الـ HTML

يعني Vitest هي اللي بتدير الرحلة كلها، لكن مش هي اللي بترسم React أو بتمثل الشبكة. كل طبقة بتعمل شغلتها، وفي الآخر expect تحكم على حاجة اليوزر يقدر يشوفها: رسالة نجاح، row ظهرت، زرار اتقفل، أو error اتعرضت.