Vue Academy · درس

تركيب المكوّنات والاستعلام عنها

‏mount() وshallowMount() وwrapper.find() وwrapper.findAll() وgetByText() وdata-testid

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

عرض المكوّنات في الاختبارات

لاختبار مكوّن، يجب عرضه داخل DOM الخاص بـ jsdom ثم فحص النتيجة. توفّر @vue/test-utils الدالة mount وكائن wrapper الذي يحتوي على مساعدات للاستعلام.

mount: عرض كامل

تعرض mount المكوّن وجميع مكوّناته الفرعية فعليًا. استخدمها عندما يعتمد السلوك على عرض المكوّنات الفرعية لمخرجات حقيقية.

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

const wrapper = mount(Card, {
  props: { title: "Hello" },
})

shallowMount: محاكاة المكوّنات الفرعية

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

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

const wrapper = shallowMount(Page)
// child components appear as <child-stub />

mount مقابل shallowMount

اختر بناءً على الهدف:

mount — بأسلوب اختبارات التكامل؛ إذ تهتم بكيفية عرض المكوّنات الفرعية.
shallowMount — بأسلوب اختبارات الوحدة؛ إذ تختبر منطق هذا المكوّن وقالبَه فقط.

يكون التركيب السطحي أسرع، ويتجنب الإخفاقات المتسلسلة الناتجة عن أخطاء المكوّنات الفرعية.

find: تطابق اختياري

تأخذ wrapper.find(selector) محدد CSS وتعيد wrapper. وإذا لم يطابق أي عنصر، تكون قيمة exists() في النتيجة false بدلًا من طرح خطأ.

const title = wrapper.find("h1")
expect(title.exists()).toBe(true)
expect(title.text()).toBe("Hello")

get: تطابق مطلوب

تشبه wrapper.get(selector) الدالة find، لكنها تطرح خطأ إذا كان العنصر مفقودًا. استخدمها عندما يجب أن يكون العنصر موجودًا، إذ إن رسالة الخطأ أوضح من الوصول إلى قيمة null لاحقًا.

const button = wrapper.get("button.submit")
// throws immediately with a helpful message if absent

اختيار find أو get

استخدم get للعناصر التي ينبغي أن تكون موجودة دائمًا، مثل التحقق من محتواها. واستخدم find عند اختبار الوجود أو الغياب، مثل شريط خطأ لا يظهر إلا أحيانًا.

expect(wrapper.find(".error").exists()).toBe(false)

const label = wrapper.get("label")
expect(label.text()).toBe("Email")

findAll: عناصر متعددة

تعيد wrapper.findAll(selector) مصفوفة من wrappers لكل العناصر المطابقة. وهي مثالية للتحقق من أطوال القوائم وتكرار الصفوف.

const items = wrapper.findAll("li")
expect(items).toHaveLength(3)
expect(items[0].text()).toBe("First")

قراءة النص باستخدام text()

تعيد wrapper.text() المحتوى النصي المقتطع والمتصل للعنصر، بما في ذلك عناصره الفرعية. وهي مناسبة للتحقق من النص الظاهر دون القلق بشأن التطابق التام مع بنية الترميز.

expect(wrapper.text()).toContain("3 results found")

فحص الترميز باستخدام html()

تعيد wrapper.html() سلسلة HTML المعروضة. وهي مفيدة لتصحيح اختبار فاشل أو للتحقق من السمات والبنية.

console.log(wrapper.html())
// <div class="card"><h1>Hello</h1></div>
expect(wrapper.html()).toContain("class=\"card\"")

العثور على المكوّنات الفرعية

بالإضافة إلى محددات CSS، تقبل find وfindComponent مرجعًا إلى مكوّن لتحديد نسخة مكوّن فرعي بعينها.

import { findComponent } from "@vue/test-utils"
import Avatar from "./Avatar.vue"

const avatar = wrapper.findComponent(Avatar)
expect(avatar.exists()).toBe(true)

تحقق سريع

تحقق من فهمك للاستعلام باستخدام Test Utils.

مراجعة

تعلمت كيفية عرض المكوّنات والاستعلام عنها:

تعرض mount المكوّنات الفرعية فعليًا، بينما تستبدلها shallowMount بمحاكيات لعزل الاختبار.
تعيد find wrapper قد يكون فارغًا، بينما تطرح get خطأً عند غياب العنصر.
تعيد findAll مصفوفة مناسبة للقوائم.
تقرأ text() النص الظاهر، بينما تعيد html() الترميز المعروض.
تحدد findComponent مكوّنًا فرعيًا بعينه.

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

هل درس «تركيب المكوّنات والاستعلام عنها» مجاني؟

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

ماذا ستتعلم في «تركيب المكوّنات والاستعلام عنها»؟

‏mount() وshallowMount() وwrapper.find() وwrapper.findAll() وgetByText() وdata-testid تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «تركيب المكوّنات والاستعلام عنها»؟

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

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

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

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

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