@testing-library/svelte: render وfireEvent
اعرض المكوّنات في الاختبارات، واستعلم عن DOM، وحاكِ تفاعلات المستخدم.
@testing-library/svelte: render وfireEvent درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
Testing Library
توفر @testing-library/svelte أدوات لعرض المكوّنات والتفاعل معها كما يفعل المستخدم.
render
ثبّتوا مكوّنًا داخل DOM افتراضي.
import { render } from "@testing-library/svelte";
const { getByText } = render(MyComp, { props: { name: "Ada" } });أساليب الاستعلام
استخدموا getByText وgetByRole وgetByLabelText للعثور على العناصر بالطريقة التي يستخدمها المستخدم.
fireEvent
حاكوا تفاعلات المستخدم: النقر والإدخال والإرسال.
import { fireEvent } from "@testing-library/svelte";
await fireEvent.click(getByRole("button"));مكتبة user-event
لإجراء تفاعلات أكثر واقعية، مثل الكتابة والتنقّل باستخدام لوحة المفاتيح، استخدموا @testing-library/user-event.
التحديثات غير المتزامنة
بعد التفاعل، انتظروا المهام الصغيرة غير المتزامنة حتى تكتمل تحديثات Svelte.
التأكيدات
استخدموا expect مع أدوات المطابقة في jest-dom، مثل toBeInTheDocument وtoHaveAttribute.
expect(getByText("Hello, Ada!")).toBeInTheDocument();خصائص المكوّن
مرّروا الخصائص باعتبارها الوسيط الثاني إلى render.
أحداث المكوّن
اختبروا موزّعات الأحداث بتمرير spy باعتباره خاصية callback.
لقطة DOM
التقطوا HTML المعروض لاختبار التراجعات.
أفضل ممارسة
اختبروا من منظور المستخدم. وتجنّبوا اختبار الحالة الداخلية مباشرةً.
تحقق سريع
ماذا يفعل render؟
مراجعة
استخدموا render وfireEvent وjest-dom لاختبار مكوّنات Svelte كما لو كنتم تحاكون تفاعلات المستخدم الحقيقية.
الأسئلة الشائعة
هل درس «@testing-library/svelte: render وfireEvent» مجاني؟
نعم — نص درس «@testing-library/svelte: render وfireEvent» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «@testing-library/svelte: render وfireEvent»؟
اعرض المكوّنات في الاختبارات، واستعلم عن DOM، وحاكِ تفاعلات المستخدم. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «@testing-library/svelte: render وfireEvent»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد Vitest لمشاريع Svelte
- @testing-library/svelte: render وfireEvent
- اختبار Stores والتفاعلية
- محاكاة Modules وFetch