0Pricing
Vue Academy · Lekcja

Montowanie i wyszukiwanie komponentów

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

Montowanie i wyszukiwanie komponentów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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.

Renderowanie komponentów w testach

Aby przetestować komponent, należy wyrenderować go w DOM-ie jsdom, a następnie sprawdzić wynik. @vue/test-utils udostępnia mount oraz obiekt wrapper z pomocniczymi funkcjami wyszukiwania.

mount: pełne renderowanie

mount renderuje komponent oraz wszystkie jego komponenty potomne w rzeczywisty sposób. Należy użyć go, gdy działanie zależy od tego, czy komponenty potomne wyrenderują rzeczywisty wynik.

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

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

shallowMount: atrapy komponentów potomnych

shallowMount renderuje komponent, ale zastępuje komponenty potomne lekkimi atrapami. Dzięki temu testowana jednostka jest odizolowana od szczegółów implementacji swoich komponentów potomnych.

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

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

mount a shallowMount

Wybór zależy od celu testu:

  • mount — styl integracyjny; istotne jest, jak renderują się komponenty potomne.
  • shallowMount — styl jednostkowy; testowana jest wyłącznie logika i szablon tego komponentu.

Montowanie płytkie jest szybsze i zapobiega kaskadowym awariom powodowanym przez błędy komponentów potomnych.

find: opcjonalne dopasowanie

wrapper.find(selector) przyjmuje selektor CSS i zwraca wrapper. Jeśli nic nie pasuje, właściwość exists() wyniku ma wartość false, zamiast zgłaszać wyjątek.

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

get: wymagane dopasowanie

wrapper.get(selector) działa podobnie do find, ale zgłasza wyjątek, jeśli elementu brakuje. Należy użyć go, gdy element musi istnieć — komunikat błędu jest bardziej przejrzysty niż późniejsza próba odwołania do wartości null.

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

Wybór find lub get

Należy używać get dla elementów, które zawsze powinny istnieć, na przykład podczas sprawdzania ich zawartości. find należy stosować podczas testowania obecności lub braku elementu, na przykład banera błędu renderowanego tylko w niektórych sytuacjach.

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

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

findAll: wiele elementów

wrapper.findAll(selector) zwraca tablicę wrapperów dla każdego dopasowania. To idealne rozwiązanie do sprawdzania długości list i iterowania po wierszach.

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

Odczytywanie tekstu za pomocą text()

wrapper.text() zwraca przyciętą i połączoną zawartość tekstową elementu wraz z jego elementami potomnymi. To świetny sposób na sprawdzanie widocznego tekstu bez przejmowania się dokładną strukturą znaczników.

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

Sprawdzanie znaczników za pomocą html()

wrapper.html() zwraca wyrenderowany ciąg HTML. Jest przydatne podczas diagnozowania nieudanego testu lub sprawdzania atrybutów i struktury.

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

Wyszukiwanie komponentów potomnych

Oprócz selektorów CSS funkcje find i findComponent przyjmują również referencję komponentu, aby znaleźć konkretną instancję komponentu potomnego.

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

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

Szybkie sprawdzenie

Sprawdź zrozumienie wyszukiwania elementów za pomocą Test Utils.

Podsumowanie

Opanowano renderowanie i wyszukiwanie komponentów:

  • mount rzeczywiście renderuje komponenty potomne, a shallowMount zastępuje je atrapami na potrzeby izolacji.
  • find zwraca potencjalnie pusty wrapper, a get zgłasza wyjątek, gdy elementu brakuje.
  • findAll zwraca tablicę przydatną w przypadku list.
  • text() odczytuje widoczny tekst, a html() zwraca wyrenderowane znaczniki.
  • findComponent znajduje konkretny komponent potomny.

Często zadawane pytania

Czy lekcja „Montowanie i wyszukiwanie komponentów” jest bezpłatna?

Tak — pełny tekst „Montowanie i wyszukiwanie komponentów” 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 „Montowanie i wyszukiwanie komponentów”?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() oraz data-testid. Ć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 4.

Ile czasu zajmuje lekcja „Montowanie i wyszukiwanie komponentów”?

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

  1. Konfiguracja Vitest dla projektów Vue
  2. Montowanie i wyszukiwanie komponentów
  3. Testowanie interakcji użytkownika i zdarzeń
  4. Mockowanie composable, store i API
← Powrót do Vue Academy