Vue Academy · Ders

Vue Test Utils ile Birim Testi

Vue Test Utils ile bileşen birim testleri yazın.

Vue Test Utils ile Birim Testi, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 2. 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.

Bileşenleri Sınama

Vue Test Utils, bir bileşeni sınama içinde oluşturmanıza, çıktısını incelemenize ve kullanıcı etkileşimlerini benzetmenize olanak tanır. Ardından bileşenin beklendiği gibi davrandığını doğrularsınız.

Bileşeni Bağlama

mount işlevi, tüm alt bileşenleri de dahil olmak üzere bir bileşeni eksiksiz biçimde oluşturur. Oluşturulan çıktıyı sorgulamak ve onunla etkileşim kurmak için yardımcılar içeren bir wrapper nesnesi döndürür.

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

const wrapper = mount(Counter)

shallowMount

shallowMount, bileşeni oluşturur ancak alt bileşenlerini taklitlerle değiştirir. Bu, sınanan bileşeni alt bileşenlerinden yalıtır ve gerçek birim sınamaları için idealdir.

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

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

Bileşeni Bağlama ve shallowMount Karşılaştırması

Bir bileşeni alt bileşenleriyle birlikte sınamak istediğinizde mount, yalnızca bu bileşeni yalıtmak istediğinizde shallowMount kullanın. Sığ bağlama, sınamaları odaklı ve hızlı tutar.

Öğeleri Bulma

Bir öğeyi bulmak için wrapper.find ile bir CSS seçicisi kullanın. find, inceleyebileceğiniz veya etkileşim kurabileceğiniz o öğeye ait bir wrapper döndürür.

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

Oluşturulan Çıktıyı Doğrulama

Bileşenin beklediğiniz şeyi gösterdiğini doğrulamak için oluşturulan metni veya HTML'yi kontrol edin.

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

Özellikleri Sınama

Özellikleri bağlama seçenekleri üzerinden geçirin ve bileşenin bunları doğru biçimde oluşturduğunu doğrulayın. Bu, bileşenin girdilerine tepki verdiğini doğrular.

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

Olayları Tetikleme

Kullanıcı eylemlerini trigger ile benzetin. Bu işlem eşzamansız bir sonuç döndürür; bu nedenle doğrulamadan önce Vue'nun DOM'u güncellemesine izin vermek için sonucu bekleyin.

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

Girdi Değerlerini Ayarlama

Yazma işlemini benzetmek için bir girdi wrapper'ı üzerinde setValue kullanın ve ardından ortaya çıkan davranışı doğrulayın.

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

Yayınlanan Olayları Sınama

Bir bileşen olay yayınladığında wrapper.emitted bunu kaydeder. Doğru olayın doğru yükle yayınlandığını doğrulayın.

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

Bir Sınamayı Bir Araya Getirme

Eksiksiz bir bileşen sınaması, bileşeni bağlar, onunla etkileşim kurar ve çıktıyı veya yayınlanan olayları doğrular.

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

Hızlı Kontrol

Vue Test Utils konusundaki bilginizi sınayın.

Özet

Vue Test Utils, bileşenleri mount (tam ağaç) veya shallowMount (taklit alt bileşenler) ile oluşturur. find ile sorgulayın, trigger ve setValue ile eylemleri benzetin (bu işlemleri bekleyin) ve text() veya emitted() sonuçlarını doğrulayın. props değerlerini bağlama seçenekleri üzerinden geçirin. Sırada tüm uygulamayı uçtan uca sınayacaksınız.

Sıkça Sorulan Sorular

“Vue Test Utils ile Birim Testi” dersi ücretsiz mi?

Evet — “Vue Test Utils ile Birim Testi” 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.

“Vue Test Utils ile Birim Testi” dersinde ne öğreneceğim?

Vue Test Utils ile bileşen birim testleri yazın. 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 2. dersidir.

“Vue Test Utils ile Birim Testi” 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

Test Çerçevelerine Giriş
Vue Test Utils ile Birim Testi
Uçtan Uca Test

← Vue Academy Sayfasına Dön