محاكاة Fetch والمؤقتات
حاكِ الشبكة باستخدام محاكيات fetch وتحكّم بالوقت باستخدام المؤقتات الوهمية؛ واكتب اختبارات ثابتة وسريعة للمكوّنات غير المتزامنة.
محاكاة Fetch والمؤقتات درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا نحاكي الشبكة والوقت
الهدف: محاكاة العمل غير المتزامن لجعل الاختبارات سريعة وموثوقة.
- أنشئ استجابات وهمية لـ fetch
- تحكّم في المؤقتات باستخدام ساعات وهمية
- أجرِ التأكيدات باستخدام findBy*/waitFor
الأنماط الشائعة
- fetch: استخدم spyOn مع global.fetch ← mockResolvedValue
- المؤقتات: vi.useFakeTimers()؛ ثم قدّم المؤقتات
- فضّل findBy* لواجهة DOM غير المتزامنة
عرض تجريبي: أداة الجلب عند النقر
في الاختبارات، حاكِ fetch ليعيد البيانات فورًا. تحاكي واجهة المستخدم هنا جلبًا بطيئًا باستخدام setTimeout.
<div id="root"></div>
عرض تجريبي: رسالة تعتمد على مؤقت
استخدم المؤقتات الوهمية في الاختبارات لتخطي الانتظار. قدّم الوقت ثم أجرِ التأكيد على الرسالة.
<div id="root"></div>
مرجع: مقاطع اختبارية
مقاطع اختبارية مرجعية (للعرض فقط): التجسس على fetch واستخدام المؤقتات الوهمية مع Vitest.
<div id="root"></div>
نصائح ومزالق
- نظّف عمليات التجسس: استخدم mockRestore بعد كل اختبار
- استخدم findBy* لواجهة المستخدم غير المتزامنة
- عُد إلى المؤقتات الحقيقية باستخدام useRealTimers
أفضل ممارسة لاختبار المؤقتات
خلاصة
خلاصة: حاكِ fetch للتحكم في الاستجابات، واستخدم المؤقتات الوهمية لتقديم الوقت فورًا. أجرِ التأكيدات باستخدام findBy*/waitFor للحصول على اختبارات غير متزامنة مستقرة.
الأسئلة الشائعة
هل درس «محاكاة Fetch والمؤقتات» مجاني؟
نعم — نص درس «محاكاة Fetch والمؤقتات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «محاكاة Fetch والمؤقتات»؟
حاكِ الشبكة باستخدام محاكيات fetch وتحكّم بالوقت باستخدام المؤقتات الوهمية؛ واكتب اختبارات ثابتة وسريعة للمكوّنات غير المتزامنة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «محاكاة Fetch والمؤقتات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد React Testing Library مع Vitest/Jest
- الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة
- محاكاة Fetch والمؤقتات