Vue Academy · Lekcja

Testowanie interakcji użytkownika i zdarzeń

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() oraz asynchroniczne flushPromises().

Testowanie interakcji użytkownika i zdarzeń to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Symulowanie zachowania użytkownika

Oprócz renderowania testy powinny naśladować działania użytkownika: klikanie przycisków, wpisywanie tekstu do pól i wysyłanie formularzy. Wrappery @vue/test-utils udostępniają metody do wysyłania zdarzeń DOM i aktualizowania Vue.

trigger dla zdarzeń kliknięcia

wrapper.trigger("click") wywołuje kliknięcie elementu. Ponieważ aktualizuje DOM, zwraca promise — należy użyć await, aby asercje zobaczyły wynik.

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

Dlaczego testy są asynchroniczne

Vue aktualizuje DOM asynchronicznie. Po interakcji nowy stan nie jest widoczny aż do następnego ticka. Oczekiwanie na promise zwrócony przez trigger pozwala ustabilizować DOM przed wykonaniem sprawdzeń.

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

setValue dla pól wejściowych

Aby wpisać tekst do pola, należy użyć wrapper.setValue(value) na wrapperze pola wejściowego. Funkcja ustawia wartość i wysyła zdarzenie input, dzięki czemu aktualizuje się v-model.

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

Checkboxy i pola select

setValue dostosowuje działanie do elementu: dla checkboxów należy przekazać wartość logiczną, a dla pola select — wartość opcji.

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

Sprawdzanie emitowanych zdarzeń

Komponenty komunikują się z komponentami nadrzędnymi za pomocą emitowanych zdarzeń. wrapper.emitted() zwraca rejestr wszystkich zdarzeń wyemitowanych przez komponent, uporządkowany według nazw.

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

Sprawdzanie danych emitowanych zdarzeń

wrapper.emitted("name") zwraca tablicę tablic argumentów emisji. Pierwszym argumentem pierwszej emisji jest 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" })

Test wysłania formularza

Należy połączyć wszystkie elementy: wypełnić pole, wysłać formularz, a następnie sprawdzić wyemitowane dane.

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

Operacje asynchroniczne w komponentach

Wiele handlerów wywołuje API i aktualizuje stan po rozstrzygnięciu promise. Mikrozadanie może nie zostać wykonane przed uruchomieniem sprawdzenia, dlatego trzeba na nie zaczekać.

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

flushPromises

flushPromises z Test Utils rozstrzyga wszystkie oczekujące mikrozadania — callbacki then. Należy użyć await po wywołaniu operacji asynchronicznej, aby rozstrzygnięte promisy i wynikające z nich aktualizacje DOM zostały zastosowane.

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

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

Łączenie testów asynchronicznych

Wzorzec wygląda następująco: zamontować komponent, wykonać interakcję, użyć await flushPromises(), a następnie sprawdzić wynik. Funkcję testową należy oznaczyć jako async, aby można było używać w niej await.

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

Szybkie sprawdzenie

Sprawdź zrozumienie testowania interakcji.

Podsumowanie

Opanowano testowanie interakcji i zdarzeń:

trigger("click") wywołuje zdarzenia; należy użyć await, ponieważ Vue aktualizuje DOM asynchronicznie.
setValue ustawia wartości pól tekstowych, checkboxów i pól select oraz wysyła zdarzenia input dla v-model.
wrapper.emitted() rejestruje emitowane zdarzenia, a emitted("name")[0][0] odczytuje pierwszy zestaw danych.
W przypadku asynchronicznych handlerów przed sprawdzeniem wyniku należy użyć await flushPromises().
Testy należy oznaczać jako async, aby można było używać await.

Często zadawane pytania

Czy lekcja „Testowanie interakcji użytkownika i zdarzeń” jest bezpłatna?

Tak — pełny tekst „Testowanie interakcji użytkownika i zdarzeń” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Testowanie interakcji użytkownika i zdarzeń”?

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() oraz asynchroniczne flushPromises(). Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Testowanie interakcji użytkownika i zdarzeń”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja Vitest dla projektów Vue
Montowanie i wyszukiwanie komponentów
Testowanie interakcji użytkownika i zdarzeń
Mockowanie composable, store i API

← Powrót do Vue Academy