Testy jednostkowe z Vue Test Utils
Pisanie testów jednostkowych komponentów za pomocą Vue Test Utils.
Testy jednostkowe z Vue Test Utils to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 3. 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 3 lekcji w sumie.
Testowanie komponentów
Vue Test Utils pozwala renderować komponent w teście, analizować jego wynik i symulować interakcje użytkownika. Następnie można zweryfikować, czy komponent zachowuje się zgodnie z oczekiwaniami.
mount
Funkcja mount renderuje komponent w całości, włącznie ze wszystkimi jego komponentami potomnymi. Zwraca obiekt wrapper z pomocniczymi metodami umożliwiającymi wyszukiwanie elementów i interakcję z wyrenderowanym wynikiem.
import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"
const wrapper = mount(Counter)shallowMount
shallowMount renderuje komponent, ale zastępuje jego komponenty potomne stubami. Izoluje to testowany komponent od jego dzieci, co idealnie sprawdza się w prawdziwych testach jednostkowych.
import { shallowMount } from "@vue/test-utils"
const wrapper = shallowMount(ParentComponent)
// child components are stubbed outmount czy shallowMount
Należy użyć mount, gdy komponent ma być testowany razem z komponentami potomnymi, oraz shallowMount, gdy trzeba odizolować tylko ten komponent. Płytkie montowanie pozwala zachować koncentrację i szybkość testów.
Znajdowanie elementów
Należy użyć wrapper.find wraz z selektorem CSS, aby znaleźć element. find zwraca wrapper dla tego elementu, który można analizować lub z którym można wchodzić w interakcję.
const button = wrapper.find("button")
const title = wrapper.find(".title")Weryfikowanie wyrenderowanego wyniku
Należy sprawdzić wyrenderowany tekst lub kod HTML, aby zweryfikować, czy komponent wyświetla oczekiwaną treść.
test("renders the message", () => {
const wrapper = mount(Greeting, {
props: { name: "Sam" }
})
expect(wrapper.text()).toContain("Hello, Sam")
})Testowanie props
Należy przekazać props w opcjach mount i zweryfikować, czy komponent renderuje je prawidłowo. Potwierdza to, że komponent reaguje na swoje dane wejściowe.
const wrapper = mount(UserCard, {
props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")Wywoływanie zdarzeń
Interakcje użytkownika należy symulować za pomocą trigger. Funkcja zwraca promise, dlatego należy użyć await, aby Vue zdążyło zaktualizować DOM przed wykonaniem asercji.
test("increments on click", async () => {
const wrapper = mount(Counter)
await wrapper.find("button").trigger("click")
expect(wrapper.text()).toContain("1")
})Ustawianie wartości pól wejściowych
Należy użyć setValue na wrapperze pola wejściowego, aby zasymulować wpisywanie tekstu, a następnie zweryfikować wynikowe działanie.
const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")Testowanie emitowanych zdarzeń
Gdy komponent emituje zdarzenie, wrapper.emitted je rejestruje. Należy zweryfikować, czy wyemitowano właściwe zdarzenie z właściwym payloadem.
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: "" }])
})Tworzenie kompletnego testu
Kompletny test komponentu montuje komponent, wchodzi z nim w interakcję i weryfikuje wynik lub emitowane zdarzenia.
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"])
})Szybki sprawdzian
Proszę sprawdzić swoją wiedzę na temat Vue Test Utils.
Podsumowanie
Vue Test Utils renderuje komponenty za pomocą mount (całe drzewo) lub shallowMount (komponenty potomne zastąpione stubami). Elementy należy wyszukiwać za pomocą find, a działania symulować za pomocą trigger i setValue (pamiętając o await), po czym weryfikować wynik za pomocą text() lub emitted(). Props należy przekazywać w opcjach mount. W następnej części poznają Państwo testowanie całej aplikacji end-to-end.
Często zadawane pytania
Czy lekcja „Testy jednostkowe z Vue Test Utils” jest bezpłatna?
Tak — pełny tekst „Testy jednostkowe z Vue Test Utils” 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 3 lekcji w sumie.
Co nauczysz się w „Testy jednostkowe z Vue Test Utils”?
Pisanie testów jednostkowych komponentów za pomocą Vue Test Utils. Ć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 2 z 3.
Ile czasu zajmuje lekcja „Testy jednostkowe z Vue Test Utils”?
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
- Wprowadzenie do frameworków testowych
- Testy jednostkowe z Vue Test Utils
- Testy end-to-end