الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة
استخدم استعلامات getBy/findBy وuser-event للكتابة/النقر وتأكيدات jest-dom. اختبر النماذج والشاشات غير المتزامنة بثقة.
الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
اختبار يركّز على المستخدم
الهدف: الاختبار كما يفعل المستخدم.
- الاستعلامات: getBy*/findBy*
- الأحداث: user-event (النقر والكتابة)
- التأكيدات: jest-dom
الاستعلامات: اختر الاستعلام المناسب
- getBy*: متزامن؛ يفشل إذا كان العنصر مفقودًا
- findBy*: غير متزامن؛ ينتظر
- queryBy*: يعيد null عند غياب العنصر
- فضّل الدور أو التسمية على معرّفات الاختبار
عرض تجريبي: نموذج تسجيل دخول قابل للوصول
نموذج يحتوي على تسميات وزر إرسال. وهو مناسب لاستخدام getByLabelText وgetByRole وكتابة المستخدم.
<div id="root"></div>
عرض تجريبي: قائمة غير متزامنة (جارٍ التحميل ← العناصر)
جلب غير متزامن مُحاكى: يعرض مؤشر تحميل ثم يعرض العناصر. ينبغي أن تستخدم الاختبارات findBy* أو waitFor.
<div id="root"></div>
التأكيدات والأحداث
- toBeInTheDocument وtoBeDisabled وtoHaveTextContent
- استخدم findBy* لواجهة المستخدم غير المتزامنة
- فضّل user-event على fireEvent
الأنماط والمزالق
الأنماط:
- الترتيب → التنفيذ (user-event) → التحقق
- للحالات غير المتزامنة: استخدم await findBy* أو waitFor
- تجنّب المهلات العشوائية؛ وحافظ على سرعة الاختبارات
أفضل ممارسة للتأكيدات غير المتزامنة
خلاصة
خلاصة: فضّل الاستعلامات حسب الدور أو التسمية، وتفاعل مع واجهة المستخدم باستخدام user-event، وأجرِ التأكيدات باستخدام jest-dom. في واجهة المستخدم غير المتزامنة، استخدم await findBy* أو ضع الاستعلام داخل waitFor.
الأسئلة الشائعة
هل درس «الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة» مجاني؟
نعم — نص درس «الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة»؟
استخدم استعلامات getBy/findBy وuser-event للكتابة/النقر وتأكيدات jest-dom. اختبر النماذج والشاشات غير المتزامنة بثقة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد React Testing Library مع Vitest/Jest
- الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة
- محاكاة Fetch والمؤقتات