إعداد React Testing Library مع Vitest/Jest
ثبّت Vitest/Jest واضبطهما مع React Testing Library؛ واستخدم jsdom، وصيّر المكوّنات، واستعلم من DOM كما يفعل المستخدم.
إعداد React Testing Library مع Vitest/Jest درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا نستخدم هذه المجموعة
الهدف: اختبار المكوّنات بالطريقة التي يتفاعل بها المستخدم.
- مشغّل Vitest/Jest
- بيئة jsdom
- React Testing Library (RTL)
التثبيت والبيئة
التثبيت:
- npm i -D vitest @testing-library/react @testing-library/user-event jsdom
- اضبط بيئة الاختبار على jsdom
- أضف النصوص البرمجية: test وtest:watch
مكوّن تجريبي للاختبار
يكشف هذا المكوّن الصغير بوضوح عن الدور والاسم والحالة، بحيث تتمكّن الاختبارات من الاستعلام عنه.
<div id="root"></div>
معاينة: محتوى ملف الاختبار
معاينة لاختبار يستخدم RTL وVitest. نعرض محتويات الملف كمرجع.
<div id="root"></div>
أساسيات الإعداد
- البيئة: jsdom
- الإعداد: أضف @testing-library/jest-dom عند الحاجة
- النصوص البرمجية: "test" و"test:watch"
الاستعلام كما يفعل المستخدم
الاستعلامات المفضلة:
- getByRole / findByRole
- getByLabelText
- getByText
استخدم معرّفات الاختبار فقط عندما لا يناسب أي استعلام قابل للوصول.
اختبار إرشادات استعلامات RTL
خلاصة
خلاصة: ثبّت Vitest/Jest مع RTL، واضبط jsdom، واعرض المكوّنات، وفضّل الاستعلامات حسب الدور أو التسمية. أضف user-event لمحاكاة التفاعلات الواقعية.
الأسئلة الشائعة
هل درس «إعداد React Testing Library مع Vitest/Jest» مجاني؟
نعم — نص درس «إعداد React Testing Library مع Vitest/Jest» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «إعداد React Testing Library مع Vitest/Jest»؟
ثبّت Vitest/Jest واضبطهما مع React Testing Library؛ واستخدم jsdom، وصيّر المكوّنات، واستعلم من DOM كما يفعل المستخدم. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «إعداد React Testing Library مع Vitest/Jest»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد React Testing Library مع Vitest/Jest
- الاستعلامات والأحداث والتأكيدات — النماذج والواجهات غير المتزامنة
- محاكاة Fetch والمؤقتات