Vue Academy · Ders

Test Çerçevelerine Giriş

Vue test ekosistemini ve araçlarını inceleyin.

Test Çerçevelerine Giriş, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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 3 dersten oluşur.

Neden Sınama Yapmalısınız?

Otomatik sınamalar, kullanıcılar fark etmeden önce hataları yakalar, kodunuzun nasıl davranması gerektiğini belgeler ve güvenle yeniden düzenleme yapmanızı sağlar. Bir uygulama büyüdükçe, elle kontrol yapmadan kaliteyi korumak için sınamalar vazgeçilmez olur.

Üç Sınama Türü

Üç temel sınama düzeyi vardır: birim sınamaları küçük parçaları yalıtılmış biçimde kontrol eder, entegrasyon sınamaları parçaların birlikte çalıştığını kontrol eder ve uçtan uca sınamaları (e2e) tüm uygulamayı gerçek bir kullanıcı gibi çalıştırır.

Birim Sınamaları

Birim sınaması, bağımlılıkları taklit edilmiş tek bir işlevi veya bileşeni yalıtılmış biçimde doğrular. Hızlıdır ve tam olarak neyin bozulduğunu gösterir. Sınamalarınızın çoğu birim sınaması olmalıdır.

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

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

Entegrasyon Sınamaları

Entegrasyon sınamaları, bir bileşen ile durum deposu veya bir API sarmalayıcısını çağıran bir form gibi birkaç birimin doğru biçimde birlikte çalışıp çalışmadığını kontrol eder. Birim sınamalarının tek başına yakalayamadığı bağlantı sorunlarını bulurlar.

Uçtan Uca Sınamalar

Uçtan uca sınamalar gerçek bir tarayıcı başlatır ve uygulamanızda tam olarak bir kullanıcının yapacağı gibi tıklamalar gerçekleştirir. En gerçeğe yakın sınamalardır; ancak aynı zamanda en yavaş ve en kırılgan olanlardır. Bu nedenle daha az sayıda yazarsınız.

Sınama Piramidi

Sınama piramidi, tabanda çok sayıda hızlı birim sınaması, ortada daha az entegrasyon sınaması ve tepede az sayıda uçtan uca sınama olmasını önerir. Bu yapı güven ile hızı dengeler.

Vitest

Vitest, Vite tabanlı projeler için geliştirilmiş hızlı ve modern bir sınama çalıştırıcısıdır. Jest ile uyumlu bir API'ye sahiptir ve Vite ile oluşturulan Vue 3 uygulamalarıyla sorunsuzca çalışır.

npm install -D vitest

Jest

Jest, JavaScript ekosisteminde uzun zamandır yaygın olarak kullanılan bir sınama çalıştırıcısıdır. Vitest onun API'sini (describe, test, expect) yansıtır; bu nedenle bilgiler ikisi arasında aktarılabilir.

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

Vue Test Utils

Vue Test Utils, Vue bileşenlerini birim olarak sınamak için kullanılan resmî kitaplıktır. Bir bileşeni sınama ortamında bağlar; böylece bileşenle etkileşim kurabilir ve çıktısını doğrulayabilirsiniz.

npm install -D @vue/test-utils

Cypress ve Playwright

Uçtan uca sınama için Cypress ve Playwright popüler seçeneklerdir. Gerçek bir tarayıcıyı otomatikleştirerek tıklamaları, yazmayı ve gezinmeyi betiklerle yönetmenizi, ardından kullanıcının gördüklerini doğrulamanızı sağlarlar.

Teknoloji Yığınınızı Seçme

Tipik bir Vue 3 kurulumu, birim ve bileşen sınamaları için Vitest ile Vue Test Utils'ı, uçtan uca sınamalar için de Cypress veya Playwright'ı kullanır. Bu birleşim, modern ve iyi desteklenen araçlarla piramidin tamamını kapsar.

Hızlı Kontrol

Sınama çerçeveleri konusundaki bilginizi sınayın.

Özet

Sınamalar üç düzeye ayrılır: birim, entegrasyon ve uçtan uca. Bunlar sınama piramidiyle dengelenir (çok sayıda birim, az sayıda uçtan uca sınama). Modern bir Vue teknoloji yığını, birim sınamaları için Vitest veya Jest ile Vue Test Utils'ı, uçtan uca sınamalar için de Cypress veya Playwright'ı kullanır. Sırada Vue Test Utils ile gerçek birim sınamaları yazacaksınız.

Sıkça Sorulan Sorular

“Test Çerçevelerine Giriş” dersi ücretsiz mi?

Evet — “Test Çerçevelerine Giriş” 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 3 dersten oluşur.

“Test Çerçevelerine Giriş” dersinde ne öğreneceğim?

Vue test ekosistemini ve araçlarını inceleyin. 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, 3 dersinin 1. dersidir.

“Test Çerçevelerine Giriş” 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 Academy Sayfasına Dön