Vue Academy · Ders

Bileşenleri Bağlama ve Sorgulama

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() ve data-testid.

2. ders / 413 adım

Bileşenleri Bağlama ve Sorgulama, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 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 4 dersten oluşur.

Testlerde Bileşenleri Oluşturma

Bir bileşeni test etmek için onu jsdom DOM'una oluşturmalı, ardından sonucu incelemelisiniz. @vue/test-utils, size mount işlevini ve sorgu yardımcıları içeren bir wrapper nesnesini sunar.

mount: Tam Oluşturma

mount, bileşeni ve tüm alt bileşenlerini gerçekten oluşturur. Davranış alt bileşenlerin gerçek çıktı oluşturmasına bağlı olduğunda bunu kullanın.

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

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

shallowMount: Alt Bileşenleri Sahtelemeyle Oluşturma

shallowMount, bileşeni oluşturur ancak alt bileşenleri hafif sahte bileşenlerle değiştirir. Bu, test edilen birimi alt bileşenlerin iç ayrıntılarından yalıtır.

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

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

mount ve shallowMount Karşılaştırması

Seçiminizi amacınıza göre yapın:

mount — tümleştirme tarzı; alt bileşenlerin nasıl oluşturulduğu önemlidir.
shallowMount — birim tarzı; yalnızca bu bileşenin mantığını ve şablonunu test edersiniz.

Sığ bağlama daha hızlıdır ve alt bileşenlerdeki hatalardan kaynaklanan zincirleme hataları önler.

find: İsteğe Bağlı Eşleşme

wrapper.find(selector) bir CSS seçicisi alır ve bir wrapper döndürür. Hiçbir eşleşme bulunmazsa sonuç hata fırlatmak yerine exists() değerini false olarak verir.

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

get: Zorunlu Eşleşme

wrapper.get(selector), find gibidir ancak öğe eksikse hata fırlatır. Öğenin mutlaka bulunması gerektiğinde bunu kullanın; hata mesajı, daha sonra eksik bir değer üzerinde erişim yapmaktan daha açıklayıcıdır.

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

find veya get Seçimi

Her zaman var olması gereken öğeler için (içeriklerini doğrularken) get kullanın. Varlığı veya yokluğu test ederken, örneğin yalnızca bazen oluşturulan bir hata bandında, find kullanın.

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

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

findAll: Birden Çok Öğe

wrapper.findAll(selector), her eşleşme için wrapper'lardan oluşan bir dizi döndürür. Liste uzunluklarını doğrulamak ve satırlar üzerinde dolaşmak için idealdir.

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

text() ile Metin Okuma

wrapper.text(), öğenin ve alt öğelerinin kırpılmış, birleştirilmiş metin içeriğini döndürür. Tam işaretleme konusunda endişelenmeden görünen metni doğrulamak için oldukça kullanışlıdır.

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

html() ile İşaretlemeyi İnceleme

wrapper.html(), oluşturulan HTML dizesini döndürür. Başarısız bir testi hata ayıklamak veya öznitelikleri ve yapıyı doğrulamak için kullanışlıdır.

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

Alt Bileşenleri Bulma

CSS seçicilerinin yanı sıra find ve findComponent, belirli bir alt bileşen örneğini bulmak için bileşen referansını da kabul eder.

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

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

Hızlı Kontrol

Test Utils ile sorgulamayı anlayıp anlamadığınızı kontrol edin.

İnteraktif derste cevapla

Özet

Bileşenleri nasıl oluşturacağınızı ve sorgulayacağınızı öğrendiniz:

mount alt bileşenleri gerçekten oluşturur; shallowMount ise onları yalıtım amacıyla sahte bileşenlerle değiştirir.
find boş olabilen bir wrapper döndürür; get eksik olduğunda hata fırlatır.
findAll listeler için bir dizi döndürür.
text() görünen metni okur; html() oluşturulan işaretlemeyi döndürür.
findComponent belirli bir alt bileşeni bulur.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Bileşenleri Bağlama ve Sorgulama” dersi ücretsiz mi?

Evet — “Bileşenleri Bağlama ve Sorgulama” 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.

“Bileşenleri Bağlama ve Sorgulama” dersinde ne öğreneceğim?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() ve data-testid. 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 2. dersidir.

“Bileşenleri Bağlama ve Sorgulama” 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