Vue Academy · درس

اختبار الوحدات باستخدام Vue Test Utils

اكتب اختبارات وحدات للمكوّنات باستخدام Vue Test Utils.

الدرس 2 من 313 خطوة

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

اختبار المكوّنات

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

mount

تُصيّر الدالة mount المكوّن بالكامل، بما في ذلك جميع مكوّناته الفرعية. وتُعيد كائن wrapper يضم أدوات مساعدة للاستعلام عن الناتج المُصيَّر والتفاعل معه.

import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"

const wrapper = mount(Counter)

shallowMount

تُصيّر shallowMount المكوّن، لكنها تستبدل مكوّناته الفرعية ببدائل وهمية. وهذا يعزل المكوّن قيد الاختبار عن مكوّناته الفرعية، وهو مناسب لاختبارات الوحدة الحقيقية.

import { shallowMount } from "@vue/test-utils"

const wrapper = shallowMount(ParentComponent)
// child components are stubbed out

mount مقابل shallowMount

استخدم mount عندما تريد اختبار مكوّن مع مكوّناته الفرعية، واستخدم shallowMount عندما تريد عزل هذا المكوّن وحده. يحافظ التصيير السطحي على تركيز الاختبارات وسرعتها.

العثور على العناصر

استخدم wrapper.find مع محدد CSS لتحديد موقع عنصر. تُعيد find غلافًا لذلك العنصر يمكنك فحصه أو التفاعل معه.

const button = wrapper.find("button")
const title = wrapper.find(".title")

التحقق من الناتج المُصيَّر

تحقّق من النص أو HTML المُصيَّر للتأكد من أن المكوّن يعرض ما تتوقعه.

test("renders the message", () => {
  const wrapper = mount(Greeting, {
    props: { name: "Sam" }
  })
  expect(wrapper.text()).toContain("Hello, Sam")
})

اختبار الخصائص

مرّر الخصائص من خلال خيارات mount، وتحقّق من أن المكوّن يصيّرها بشكل صحيح. ويؤكد ذلك استجابة المكوّن لمدخلاته.

const wrapper = mount(UserCard, {
  props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")

إطلاق الأحداث

حاكِ إجراءات المستخدم باستخدام trigger. فهي تُعيد وعدًا، لذا استخدم await معها للسماح لـ Vue بتحديث DOM قبل إجراء التحقق.

test("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.find("button").trigger("click")
  expect(wrapper.text()).toContain("1")
})

تعيين قيم الإدخال

استخدم setValue على غلاف الإدخال لمحاكاة الكتابة، ثم تحقّق من السلوك الناتج.

const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")

اختبار الأحداث المُطلقة

عندما يطلق مكوّن حدثًا، تسجّله wrapper.emitted. تحقّق من إطلاق الحدث الصحيح مع الحمولة الصحيحة.

test("emits submit with form data", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.find("form").trigger("submit")
  expect(wrapper.emitted("submit")).toBeTruthy()
  expect(wrapper.emitted("submit")[0]).toEqual([{ user: "" }])
})

تجميع اختبار

يصّيّر اختبار المكوّن الكامل المكوّن، ويتفاعل معه، ويتحقق من الناتج أو الأحداث المُطلقة.

import { mount } from "@vue/test-utils"
import TodoInput from "./TodoInput.vue"

test("adds a todo", async () => {
  const wrapper = mount(TodoInput)
  await wrapper.find("input").setValue("Buy milk")
  await wrapper.find("button").trigger("click")
  expect(wrapper.emitted("add")[0]).toEqual(["Buy milk"])
})

اختبار سريع

اختبر معرفتك بـ Vue Test Utils.

أجب عليها في الدرس التفاعلي

مراجعة

تصيّر Vue Test Utils المكوّنات باستخدام mount (الشجرة الكاملة) أو shallowMount (المكوّنات الفرعية الوهمية). أجرِ الاستعلام باستخدام find، وحاكِ الإجراءات باستخدام trigger وsetValue (مع استخدام await لهما)، وتحقّق باستخدام text() أو emitted(). مرّر props عبر خيارات mount. ستختبر بعد ذلك التطبيق بأكمله من البداية إلى النهاية.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «اختبار الوحدات باستخدام Vue Test Utils» مجاني؟

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

ماذا ستتعلم في «اختبار الوحدات باستخدام Vue Test Utils»؟

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

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

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

كم من الوقت يستغرق درس «اختبار الوحدات باستخدام Vue Test Utils»؟

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

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

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

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

مقدمة إلى أطر الاختبار
اختبار الوحدات باستخدام Vue Test Utils
الاختبار الشامل

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