Vue Academy · Pelajaran

Menguji Interaksi Pengguna dan Event

wrapper.trigger('click'), setValue(), wrapper.vm.$emit(), serta flushPromises() asinkron.

Menguji Interaksi Pengguna dan Event adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Menyimulasikan Perilaku Pengguna

Selain merender, pengujian seharusnya meniru tindakan pengguna: mengeklik tombol, mengetik ke dalam input, dan mengirim formulir. Wrapper @vue/test-utils menyediakan metode untuk mengirim peristiwa DOM dan memperbarui Vue setelahnya.

trigger untuk Peristiwa Klik

wrapper.trigger("click") memicu klik pada elemen. Karena tindakan ini memperbarui DOM, hasilnya berupa operasi asinkron—tunggulah hingga selesai agar pemeriksaan melihat hasilnya.

const button = wrapper.get("button")
await button.trigger("click")
expect(wrapper.text()).toContain("Clicked once")

Mengapa Pengujian Bersifat Asinkron

Vue memperbarui DOM secara asinkron. Setelah interaksi, keadaan baru belum terlihat sampai tick berikutnya. Menunggu operasi trigger selesai memungkinkan DOM stabil sebelum Anda melakukan pemeriksaan.

it("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.get("button").trigger("click")
  expect(wrapper.get(".count").text()).toBe("1")
})

setValue untuk Input

Untuk mengetik ke dalam bidang, gunakan wrapper.setValue(value) pada wrapper input. Cara ini menetapkan nilainya dan mengirimkan peristiwa input agar v-model diperbarui.

const input = wrapper.get("input")
await input.setValue("hello@example.com")
expect(input.element.value).toBe("hello@example.com")

Kotak Centang dan Pilihan

setValue menyesuaikan diri dengan elemennya: berikan nilai boolean untuk kotak centang dan nilai opsi untuk elemen pilihan.

await wrapper.get("input[type=checkbox]").setValue(true)
await wrapper.get("select").setValue("tr")

Memverifikasi Peristiwa yang Dipancarkan

Komponen berkomunikasi ke atas melalui peristiwa yang dipancarkan. wrapper.emitted() mengembalikan catatan setiap peristiwa yang dipancarkan komponen, dengan nama sebagai kuncinya.

await wrapper.get("button").trigger("click")
expect(wrapper.emitted()).toHaveProperty("submit")

Memeriksa Muatan Peristiwa yang Dipancarkan

wrapper.emitted("name") mengembalikan array berisi array argumen untuk setiap pemancaran. Argumen pertama dari pemancaran pertama adalah emitted("name")[0][0].

await wrapper.get("button").trigger("click")
const events = wrapper.emitted("submit")
expect(events).toHaveLength(1)
expect(events[0][0]).toEqual({ email: "a@b.com" })

Pengujian Pengiriman Formulir

Gabungkan semua bagian: isi bidang, kirim formulir, lalu verifikasi muatan yang dipancarkan.

it("emits submit with the email", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.get("input").setValue("a@b.com")
  await wrapper.get("form").trigger("submit.prevent")
  expect(wrapper.emitted("submit")[0][0]).toEqual({ email: "a@b.com" })
})

Operasi Asinkron dalam Komponen

Banyak penangan memanggil API dan memperbarui keadaan saat hasil asinkron selesai. Tugas mikro mungkin belum berjalan saat pemeriksaan Anda dijalankan, jadi Anda harus menunggu.

async function load() {
  loading.value = true
  data.value = await fetchData()
  loading.value = false
}

flushPromises

flushPromises dari utilitas pengujian menyelesaikan semua tugas mikro yang tertunda (fungsi panggilan balik setelahnya). Tunggulah hingga selesai setelah memicu tindakan asinkron agar hasil operasi dan pembaruan DOM yang dihasilkan diterapkan.

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

await wrapper.get("button").trigger("click")
await flushPromises()
expect(wrapper.text()).toContain("Loaded")

Menyatukan Pengujian Asinkron

Polanya: pasang, lakukan interaksi, await flushPromises(), lalu lakukan pemeriksaan. Tandai fungsi pengujian sebagai async agar Anda dapat menggunakan await di seluruh bagian fungsi.

it("shows results after fetch", async () => {
  const wrapper = mount(SearchBox)
  await wrapper.get("input").setValue("vue")
  await wrapper.get("form").trigger("submit.prevent")
  await flushPromises()
  expect(wrapper.findAll("li")).toHaveLength(2)
})

Uji Cepat

Periksa pemahaman Anda tentang pengujian interaksi.

Ringkasan

Anda telah mempelajari cara menguji interaksi dan peristiwa:

trigger("click") memicu peristiwa; tunggulah hingga selesai karena Vue memperbarui DOM secara asinkron.
setValue menetapkan nilai input/kotak centang/pilihan dan memicu peristiwa input untuk v-model.
wrapper.emitted() mencatat peristiwa yang dipancarkan; emitted("name")[0][0] membaca muatan pertama.
Untuk penangan asinkron, lakukan await flushPromises() sebelum melakukan pemeriksaan.
Tandai pengujian sebagai async agar dapat menggunakan await.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menguji Interaksi Pengguna dan Event” gratis?

Ya — teks lengkap “Menguji Interaksi Pengguna dan Event” 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 “Menguji Interaksi Pengguna dan Event”?

wrapper.trigger('click'), setValue(), wrapper.vm.$emit(), serta flushPromises() asinkron. 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 3 dari 4.

Berapa lama pelajaran “Menguji Interaksi Pengguna dan Event” 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