Vue Academy · درس

إعداد Vitest لمشاريع Vue

‏vitest.config.ts، وبيئة jsdom، و@vue/test-utils، وتغطية الاختبارات باستخدام v8، وtest script

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

لماذا Vitest مع Vue؟

إن Vitest مشغّل اختبارات سريع مبني على Vite. وبما أن مشاريع Vue 3 تستخدم Vite مسبقًا، يعيد Vitest استخدام الإعدادات وعمليات التحويل نفسها، فلا تحتاج إلى مسار بناء منفصل للاختبارات.

ويوفّر واجهة برمجة شبيهة بـ Jest مع دعم أصلي لـ ESM وTypeScript.

تثبيت الأدوات

أضف Vitest وأدوات اختبار Vue وjsdom، وهو DOM شبيه بالمتصفح لـ Node.

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

بيئة jsdom

تحتاج المكوّنات إلى DOM لتركيبها داخله. لا يحتوي Node على DOM، لذلك تُشغّل الاختبارات في jsdom الذي يحاكي واجهات برمجة المتصفح. اضبطه بوصفه بيئة الاختبار في الإعدادات.

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "jsdom",
  },
})

تفعيل المتغيرات العامة

تستورد افتراضيًا describe وit وexpect في كل ملف. يؤدي ضبط globals: true إلى إتاحتها في كل مكان دون استيراد، كما في Jest.

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

أنواع TypeScript للمتغيرات العامة

عند استخدام المتغيرات العامة مع TypeScript، أضف أنواع Vitest حتى يعرف المحرر describe وما يشبهه.

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

أول ملف اختبار

يكتشف Vitest الملفات التي تنتهي بـ .test.ts أو .spec.ts. ومع تفعيل المتغيرات العامة، يمكنك كتابة الاختبارات مباشرةً.

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

تركيب مكوّن

بعد تثبيت @vue/test-utils وإعداد jsdom، يمكنك تركيب مكوّنات حقيقية في اختبار والتحقق من المخرجات التي تعرضها.

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

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

إضافة التغطية

توضح التغطية الأسطر التي تنفّذها اختباراتك. يدعم Vitest موفّر v8 السريع والأصلي. اضبطه ضمن test.coverage.

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

تقرير تغطية HTML

ينشئ مُنشئ تقارير html تقريرًا يمكن تصفحه، ويكون موقعه الافتراضي coverage/index.html. افتحه للاطلاع على تغطية الأسطر والفروع لكل ملف، مع إبراز الفجوات.

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

برامج package.json

أضف برامج مريحة للتشغيل. يشغّل test مجموعة الاختبارات، بينما يشغّل coverage الاختبارات مع خيار التغطية.

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

وضع المراقبة مقابل وضع التشغيل

يبقى vitest العادي في وضع المراقبة، فيعيد تشغيل الاختبارات المتأثرة عند الحفظ، وهذا مفيد جدًا أثناء التطوير. أما في CI فتحتاج إلى تشغيل واحد ينتهي، لذا استخدم vitest run.

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

تحقق سريع

تحقق من فهمك لإعداد Vitest.

مراجعة

ضبطت Vitest لمشروع Vue:

ثبّت vitest و@vue/test-utils وjsdom وموفّرًا للتغطية.
اضبط environment: "jsdom" حتى تتوفر للمكوّنات بيئة DOM.
يمنع globals: true استيراد أدوات الاختبار؛ أضف vitest/globals إلى أنواع tsconfig.
اضبط التغطية باستخدام موفّر v8 ومنشئ تقارير html.
أضف برنامجي test وcoverage، واستخدم vitest run في CI.

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

هل درس «إعداد Vitest لمشاريع Vue» مجاني؟

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

ماذا ستتعلم في «إعداد Vitest لمشاريع Vue»؟

‏vitest.config.ts، وبيئة jsdom، و@vue/test-utils، وتغطية الاختبارات باستخدام v8، وtest script تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «إعداد Vitest لمشاريع Vue»؟

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

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

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

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

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