0Pricing
Frontend Academy · Lekcja

@testing-library/vue: montowanie komponentów

Proszę montować komponenty Vue za pomocą @testing-library/vue, przekazywać propsy i globalne pluginy, symulować zdarzenia użytkownika oraz sprawdzać wyrenderowany szablon.

@testing-library/vue: montowanie komponentów to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Testing Library dla Vue

@testing-library/vue zapewnia takie samo podejście do testowania komponentów Vue 3 skoncentrowane na użytkowniku. API odzwierciedla wersję dla Reacta: render(), zapytania screen, userEvent oraz matchery jest-dom.

Instalowanie

Należy zainstalować pakiety Testing Library dla Vue.

npm install -D @testing-library/vue @testing-library/user-event @testing-library/jest-dom
# Also install vitest for a Vite project:
npm install -D vitest jsdom

render() dla Vue

render(Component, options) montuje komponent Vue. Obiekt options służy do przekazywania propsów, globalnych pluginów i opcji konfiguracji.

import { render, screen } from '@testing-library/vue';
import Button from './Button.vue';

test('renders button label', () => {
  render(Button, { props: { label: 'Submit' } });
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Przekazywanie propsów

Propsy należy przekazywać w obiekcie options. TypeScript sprawdzi typy propsów, jeśli używany jest defineProps<T>().

render(UserCard, {
  props: {
    user: { id: 1, name: 'Alice', email: 'alice@example.com' }
  }
});

Udostępnianie globalnych pluginów

Konfigurację globalną (pluginy, komponenty, wartości provide) należy przekazywać w opcji global.

import { createPinia } from 'pinia';
import router from './router';

render(App, {
  global: {
    plugins: [createPinia(), router],
    provide: { theme: 'dark' }
  }
});

Wielokrotnego użytku helper renderWithPlugins

Należy utworzyć własny wrapper renderowania zawierający wszystkie pluginy potrzebne do testowania, aby uniknąć powtarzania konfiguracji w każdym teście.

// test-utils.ts
import { render } from '@testing-library/vue';
import { createPinia } from 'pinia';

export function renderWithSetup(component: any, options = {}) {
  return render(component, {
    global: { plugins: [createPinia()] },
    ...options
  });
}

Testowanie zdarzeń

Należy używać userEvent do interakcji z komponentem, a następnie sprawdzić to, co widzi użytkownik, lub to, czy wystąpiły emitowane zdarzenia.

import userEvent from '@testing-library/user-event';

test('emits submit on form submit', async () => {
  const user = userEvent.setup();
  const { emitted } = render(LoginForm);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.click(screen.getByRole('button', { name: /login/i }));

  expect(emitted().submit[0]).toEqual([{ email: 'alice@example.com' }]);
});

Testowanie slotów

Treść slotu należy przekazywać jako tekst lub komponent w opcjach renderowania.

render(Card, {
  slots: {
    default: '<p>Card body content</p>',
    header: '<h2>My Card Title</h2>'
  }
});

expect(screen.getByText('Card body content')).toBeInTheDocument();

Testowanie działania v-model

Pola wejściowe należy wypełniać za pomocą userEvent, a następnie sprawdzić, czy emitowane zdarzenia lub wyświetlany wynik odpowiadają oczekiwanemu, zaktualizowanemu stanowi.

Testowanie store'ów Pinia

Dla każdego testu należy utworzyć nową instancję Pinia. Na potrzeby przygotowania można bezpośrednio zmodyfikować stan store'a, a następnie sprawdzić wyrenderowany wynik.

const pinia = createPinia();
render(Counter, { global: { plugins: [pinia] } });

const store = useCounterStore();
store.count = 5; // set initial state
await nextTick();

expect(screen.getByText('5')).toBeInTheDocument();

Wyszukiwanie elementów po asynchronicznych aktualizacjach

Vue aktualizuje DOM asynchronicznie. Po wywołaniu zdarzenia powodującego asynchroniczne zmiany stanu należy użyć await nextTick() lub zapytań findBy*.

import { nextTick } from 'vue';

await user.click(button);
await nextTick();
expect(screen.getByText('Updated!')).toBeInTheDocument();

Szybkie sprawdzenie

Jak przekazać Pinia lub Vue Router do komponentu testowanego za pomocą @testing-library/vue?

Podsumowanie: @testing-library/vue

render(Component, options) montuje komponenty Vue. Propsy należy przekazywać w options.props. Pluginy należy udostępniać w global.plugins. Do sprawdzania zdarzeń niestandardowych służy emitted(). Sloty należy przekazywać w options.slots. await nextTick() służy do obsługi asynchronicznych aktualizacji Vue. Dla wspólnej konfiguracji pluginów należy utworzyć własny wrapper renderWithSetup().

Często zadawane pytania

Czy lekcja „@testing-library/vue: montowanie komponentów” jest bezpłatna?

Tak — pełny tekst „@testing-library/vue: montowanie 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „@testing-library/vue: montowanie komponentów”?

Proszę montować komponenty Vue za pomocą @testing-library/vue, przekazywać propsy i globalne pluginy, symulować zdarzenia użytkownika oraz sprawdzać wyrenderowany szablon. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 „@testing-library/vue: montowanie 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 Frontend Academy?

Tak. Każda lekcja Frontend 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 Jest i podstawowe testy
  2. @testing-library/react: render i userEvent
  3. @testing-library/vue: montowanie komponentów
  4. Mockowanie modułów i wywołań API
← Powrót do Frontend Academy