Vue Academy · Ders

Vue Projeleri için Vitest Kurulumu

vitest.config.ts, jsdom ortamı, @vue/test-utils, v8 ile kapsam ölçümü ve test betiği.

Vue Projeleri için Vitest Kurulumu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Vue için Neden Vitest?

Vitest, Vite üzerine kurulmuş hızlı bir test çalıştırıcısıdır. Vue 3 projeleri zaten Vite kullandığı için Vitest aynı yapılandırmayı ve dönüştürmeleri yeniden kullanır; testler için ayrı bir derleme işlem hattına gerek kalmaz.

Yerel ESM ve TypeScript desteğiyle Jest benzeri bir API sunar.

Araçların Kurulması

Vitest'i, Vue test araçlarını ve jsdom'u (Node için tarayıcı benzeri bir DOM) ekleyin.

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

jsdom Ortamı

Bileşenlerin bağlanabileceği bir DOM'a ihtiyacı vardır. Node'da DOM bulunmadığı için testler, tarayıcı API'lerini taklit eden jsdom içinde çalışır. Yapılandırmada bunu test ortamı olarak ayarlayın.

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

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

Genel Değişkenleri Etkinleştirme

Varsayılan olarak her dosyada describe, it ve expect içe aktarılır. globals: true ayarı, Jest'te olduğu gibi bunları içe aktarmadan her yerde kullanılabilir hale getirir.

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

Genel Değişkenler için TypeScript Türleri

TypeScript ile genel değişkenleri kullanırken, düzenleyicinin describe ve benzeri işlevleri tanıması için Vitest türlerini ekleyin.

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

İlk Test Dosyası

Vitest, .test.ts veya .spec.ts ile biten dosyaları bulur. Genel değişkenler etkin olduğunda testleri doğrudan yazabilirsiniz.

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

Bileşen Bağlama

@vue/test-utils kurulu ve jsdom yapılandırılmış olduğunda, bir testte gerçek bileşenleri bağlayabilir ve oluşturulan çıktıları doğrulayabilirsiniz.

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")
})

Kapsam Ekleme

Kapsam, testlerinizin hangi satırları çalıştırdığını gösterir. Vitest, hızlı ve yerel olan v8 sağlayıcısını destekler. Bunu test.coverage altında yapılandırın.

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

HTML Kapsam Raporu

html raporlayıcısı, tarayıcıda görüntülenebilen bir rapor yazar (varsayılan olarak coverage/index.html). Satır ve dal kapsamını dosya bazında, eksik kalan yerleri vurgulanmış şekilde görmek için raporu açın.

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

package.json Betikleri

Kullanışlı betikleri bağlayın. test test paketini çalıştırır; coverage ise kapsam seçeneğiyle çalıştırır.

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

İzleme ve Çalıştırma Modu

Normal vitest izleme modunda kalır ve kaydettiğinizde etkilenen testleri yeniden çalıştırır; geliştirme sırasında bu çok kullanışlıdır. CI ortamında çıkış yapan tek bir çalıştırma istediğiniz için vitest run kullanın.

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

Hızlı Kontrol

Vitest kurulumunu anlayıp anlamadığınızı kontrol edin.

Özet

Bir Vue projesi için Vitest'i yapılandırdınız:

vitest, @vue/test-utils, jsdom ve bir kapsam sağlayıcısı kurun.
Bileşenlerin DOM'a sahip olması için environment: "jsdom" ayarını yapın.
globals: true test yardımcılarının içe aktarılmasını önler; tsconfig türlerine vitest/globals ekleyin.
Kapsamı v8 sağlayıcısı ve bir html raporlayıcısıyla yapılandırın.
test ve coverage betiklerini ekleyin; CI ortamında vitest run kullanın.

Sıkça Sorulan Sorular

“Vue Projeleri için Vitest Kurulumu” dersi ücretsiz mi?

Evet — “Vue Projeleri için Vitest Kurulumu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Vue Projeleri için Vitest Kurulumu” dersinde ne öğreneceğim?

vitest.config.ts, jsdom ortamı, @vue/test-utils, v8 ile kapsam ölçümü ve test betiği. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Vue Projeleri için Vitest Kurulumu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vue Projeleri için Vitest Kurulumu
Bileşenleri Bağlama ve Sorgulama
Kullanıcı Etkileşimlerini ve Olayları Test Etme
Composable'ları, Store'ları ve API'leri Taklit Etme

← Vue Academy Sayfasına Dön