Vue Academy · Pelajaran

Mounting dan Pencarian Komponen

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

Pelajaran 2 dari 413 langkah

Mounting dan Pencarian Komponen adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Merender Komponen dalam Pengujian

Untuk menguji komponen, Anda harus merendernya ke dalam DOM jsdom, lalu memeriksa hasilnya. @vue/test-utils menyediakan mount dan objek wrapper dengan pembantu kueri.

Perenderan Penuh

mount benar-benar merender komponen dan semua komponen anaknya. Gunakan ini saat perilaku komponen bergantung pada hasil render nyata dari komponen anak.

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

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

shallowMount: Komponen Anak Tiruan

shallowMount merender komponen, tetapi mengganti komponen anak dengan tiruan ringan. Cara ini mengisolasi unit yang diuji dari detail internal komponen anak.

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

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

Perenderan vs shallowMount

Pilih berdasarkan tujuan:

mount — bergaya integrasi; Anda memperhatikan cara komponen anak dirender.
shallowMount — bergaya unit; Anda hanya menguji logika dan templat komponen ini.

Perenderan dangkal lebih cepat dan menghindari kegagalan berantai akibat kesalahan pada komponen anak.

find: Kecocokan Opsional

wrapper.find(selector) menerima pemilih CSS dan mengembalikan wrapper. Jika tidak ada yang cocok, exists() pada hasilnya bernilai false, bukan melemparkan kesalahan.

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

get: Kecocokan Wajib

wrapper.get(selector) mirip dengan find, tetapi melemparkan kesalahan jika elemen tidak ditemukan. Gunakan ini saat elemen harus ada—pesan kesalahannya lebih jelas daripada akses null yang terjadi kemudian.

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

Memilih find atau get

Gunakan get untuk elemen yang seharusnya selalu ada, misalnya saat memverifikasi isinya. Gunakan find saat menguji ada atau tidaknya elemen, misalnya spanduk kesalahan yang hanya kadang dirender.

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

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

findAll: Beberapa Elemen

wrapper.findAll(selector) mengembalikan array wrapper untuk setiap kecocokan. Sangat cocok untuk memverifikasi panjang daftar dan mengiterasi baris.

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

Membaca Teks dengan text()

wrapper.text() mengembalikan konten teks elemen yang telah dipangkas dan digabungkan, termasuk teks dari elemen anaknya. Ini sangat berguna untuk memverifikasi teks yang terlihat tanpa mengkhawatirkan markah yang persis.

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

Memeriksa Markah dengan html()

wrapper.html() mengembalikan string HTML yang dirender. Ini berguna untuk men-debug pengujian yang gagal atau memverifikasi atribut dan struktur.

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

Menemukan Komponen Anak

Selain pemilih CSS, find dan findComponent menerima referensi komponen untuk menemukan instans komponen anak tertentu.

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

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

Uji Cepat

Periksa pemahaman Anda tentang penggunaan kueri dengan utilitas pengujian.

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari cara merender dan melakukan kueri pada komponen:

mount benar-benar merender komponen anak; shallowMount menggantinya dengan tiruan untuk isolasi.
find mengembalikan wrapper yang mungkin kosong; get melemparkan kesalahan jika elemen tidak ditemukan.
findAll mengembalikan array untuk daftar.
text() membaca teks yang terlihat; html() mengembalikan markah yang dirender.
findComponent menemukan komponen anak tertentu.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mounting dan Pencarian Komponen” gratis?

Ya — teks lengkap “Mounting dan Pencarian Komponen” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mounting dan Pencarian Komponen”?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText(), serta data-testid. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Mounting dan Pencarian Komponen” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy