Pengujian Unit dengan Vue Test Utils
Tulis pengujian unit komponen dengan Vue Test Utils.
Pengujian Unit dengan Vue Test Utils adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 3 pelajaran total.
Menguji Komponen
Vue Test Utils memungkinkan Anda merender komponen dalam pengujian, memeriksa keluarannya, dan menyimulasikan interaksi pengguna. Setelah itu, Anda memverifikasi bahwa komponen tersebut berperilaku sesuai harapan.
Pemasangan
Fungsi mount merender komponen sepenuhnya, termasuk semua komponen anaknya. Fungsi ini mengembalikan objek wrapper dengan pembantu untuk mencari dan berinteraksi dengan keluaran yang telah dirender.
import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"
const wrapper = mount(Counter)shallowMount
shallowMount merender komponen, tetapi mengganti komponen anaknya dengan pengganti sementara. Cara ini memisahkan komponen yang sedang diuji dari anak-anaknya, sehingga ideal untuk pengujian unit yang sebenarnya.
import { shallowMount } from "@vue/test-utils"
const wrapper = shallowMount(ParentComponent)
// child components are stubbed outPemasangan vs shallowMount
Gunakan mount ketika Anda ingin menguji komponen bersama anak-anaknya, dan gunakan shallowMount ketika Anda ingin mengisolasi komponen ini saja. Pemasangan dangkal membuat pengujian tetap terfokus dan cepat.
Menemukan Elemen
Gunakan wrapper.find dengan pemilih CSS untuk menemukan elemen. find mengembalikan wrapper untuk elemen tersebut agar Anda dapat memeriksa atau berinteraksi dengannya.
const button = wrapper.find("button")
const title = wrapper.find(".title")Memverifikasi Keluaran yang Dirender
Periksa teks atau HTML yang telah dirender untuk memastikan komponen menampilkan hal yang Anda harapkan.
test("renders the message", () => {
const wrapper = mount(Greeting, {
props: { name: "Sam" }
})
expect(wrapper.text()).toContain("Hello, Sam")
})Menguji Properti
Berikan properti melalui opsi pemasangan dan verifikasi bahwa komponen merendernya dengan benar. Hal ini memastikan komponen merespons masukannya.
const wrapper = mount(UserCard, {
props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")Memicu Peristiwa
Simulasikan tindakan pengguna dengan trigger. Fungsi ini mengembalikan promise, jadi gunakan await agar Vue memperbarui DOM sebelum Anda melakukan verifikasi.
test("increments on click", async () => {
const wrapper = mount(Counter)
await wrapper.find("button").trigger("click")
expect(wrapper.text()).toContain("1")
})Mengatur Nilai Masukan
Gunakan setValue pada wrapper masukan untuk menyimulasikan pengetikan, lalu verifikasi perilaku yang dihasilkan.
const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")Menguji Peristiwa yang Dipancarkan
Ketika komponen memancarkan peristiwa, wrapper.emitted merekamnya. Verifikasi bahwa peristiwa yang tepat dipicu dengan muatan yang tepat.
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: "" }])
})Menyusun Pengujian
Pengujian komponen yang lengkap memasang komponen, berinteraksi dengannya, lalu memverifikasi keluaran atau peristiwa yang dipancarkan.
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"])
})Pemeriksaan Singkat
Uji pemahaman Anda tentang Vue Test Utils.
Ringkasan
Vue Test Utils merender komponen dengan mount (pohon lengkap) atau shallowMount (komponen anak diganti pengganti sementara). Cari elemen dengan find, simulasikan tindakan dengan trigger dan setValue (dengan menunggu hasilnya), lalu verifikasi text() atau emitted(). Berikan props melalui opsi pemasangan. Selanjutnya, Anda akan menguji seluruh aplikasi dari awal hingga akhir.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pengujian Unit dengan Vue Test Utils” gratis?
Ya — teks lengkap “Pengujian Unit dengan Vue Test Utils” 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 3 pelajaran total.
Apa yang akan aku pelajari di “Pengujian Unit dengan Vue Test Utils”?
Tulis pengujian unit komponen dengan Vue Test Utils. 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 3.
Berapa lama pelajaran “Pengujian Unit dengan Vue Test Utils” 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
- Pengantar Kerangka Kerja Pengujian
- Pengujian Unit dengan Vue Test Utils
- Pengujian Menyeluruh