Vue Academy · درس

مقدمة إلى أطر الاختبار

استكشف منظومة اختبار Vue وأدواتها.

مقدمة إلى أطر الاختبار درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

لماذا الاختبار؟

تكتشف الاختبارات الآلية الأخطاء قبل أن يكتشفها المستخدمون، وتوثّق السلوك المتوقع لشيفرتك، وتتيح لك إعادة هيكلتها بثقة. ومع نمو التطبيق، تصبح الاختبارات ضرورية للحفاظ على الجودة دون إجراء فحوصات يدوية.

ثلاثة أنواع من الاختبارات

هناك ثلاثة مستويات رئيسية للاختبار: تتحقق اختبارات الوحدة من الأجزاء الصغيرة بشكل مستقل، وتتحقق اختبارات التكامل من عمل الأجزاء معًا، بينما تشغّل اختبارات من البداية إلى النهاية (e2e) التطبيق بأكمله كما يفعل المستخدم الحقيقي.

اختبارات الوحدة

يتحقق اختبار الوحدة من دالة أو مكوّن واحد بشكل مستقل، مع محاكاة تبعياته. وتتميز هذه الاختبارات بالسرعة وتحدد بدقة ما تعطل. ينبغي أن تكون معظم اختباراتك اختبارات وحدة.

function add(a, b) {
  return a + b
}

test("add sums two numbers", () => {
  expect(add(2, 3)).toBe(5)
})

اختبارات التكامل

تتحقق اختبارات التكامل من تعاون عدة وحدات بشكل صحيح، مثل مكوّن مع store الخاص به، أو نموذج يستدعي مغلّف API. وتكتشف هذه الاختبارات مشكلات الربط التي قد لا تكتشفها اختبارات الوحدات وحدها.

اختبارات من البداية إلى النهاية

تشغّل اختبارات E2e متصفحًا حقيقيًا وتنقر خلال تطبيقك تمامًا كما يفعل المستخدم. وهي الأكثر واقعية، لكنها أيضًا الأبطأ والأكثر عرضة للتعطل، لذا تكتب عددًا أقل منها.

هرم الاختبار

يقترح هرم الاختبار وجود عدد كبير من اختبارات الوحدة السريعة في القاعدة، وعدد أقل من اختبارات التكامل في الوسط، وعدد صغير من اختبارات e2e في القمة. ويحقق ذلك توازنًا بين الثقة والسرعة.

Vitest

إن Vitest مشغّل اختبارات سريع وحديث، مصمم للمشاريع القائمة على Vite. وله واجهة API متوافقة مع Jest، ويعمل بسلاسة مع تطبيقات Vue 3 التي ينشئها Vite.

npm install -D vitest

Jest

إن Jest مشغّل اختبارات راسخ منذ وقت طويل، ويُستخدم على نطاق واسع في منظومة JavaScript. ويطابق Vitest واجهته البرمجية (describe وtest وexpect)، لذا يمكن نقل المعرفة بينهما.

describe("math", () => {
  test("adds", () => {
    expect(1 + 1).toBe(2)
  })
})

Vue Test Utils

إن Vue Test Utils مكتبة Vue الرسمية لاختبار المكوّنات على مستوى الوحدة. فهي تصيّر المكوّن في بيئة اختبار، حتى تتمكن من التفاعل معه والتحقق من ناتجه.

npm install -D @vue/test-utils

Cypress وPlaywright

بالنسبة إلى اختبار e2e، يُعد كل من Cypress وPlaywright خيارين شائعين. فهما يؤتمتان متصفحًا حقيقيًا، مما يتيح لك برمجة النقر والكتابة والتنقل، ثم التحقق مما يراه المستخدم.

اختيار حزمة الأدوات

يستخدم إعداد Vue 3 المعتاد Vitest مع Vue Test Utils لاختبارات الوحدة والمكوّنات، وCypress أو Playwright لاختبارات e2e. ويغطي هذا المزيج هرم الاختبار بأكمله باستخدام أدوات حديثة ومدعومة جيدًا.

اختبار سريع

اختبر معرفتك بأطر الاختبار.

مراجعة

تأتي الاختبارات في ثلاثة مستويات: الوحدة والتكامل وe2e، ويوازن بينها هرم الاختبار (اختبارات وحدة كثيرة واختبارات e2e قليلة). تستخدم حزمة Vue الحديثة Vitest أو Jest مع Vue Test Utils لاختبارات الوحدة، وCypress أو Playwright لاختبارات e2e. ستكتب بعد ذلك اختبارات وحدة فعلية باستخدام Vue Test Utils.

الأسئلة الشائعة

هل درس «مقدمة إلى أطر الاختبار» مجاني؟

نعم — نص درس «مقدمة إلى أطر الاختبار» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «مقدمة إلى أطر الاختبار»؟

استكشف منظومة اختبار Vue وأدواتها. تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «مقدمة إلى أطر الاختبار»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy