Frontend Academy · Lektion

@testing-library/vue: Komponenten mounten

Mounten Sie Vue-Komponenten mit @testing-library/vue, stellen Sie Props und globale Plugins bereit, simulieren Sie Benutzerereignisse und prüfen Sie das gerenderte Template.

Lektion 3 von 413 Schritte

@testing-library/vue: Komponenten mounten ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Testing Library für Vue

@testing-library/vue bietet denselben benutzerzentrierten Testansatz für Vue-3-Komponenten. Die API entspricht der React-Version: render(), screen-Abfragen, userEvent und jest-dom-Matcher.

Installation

Installieren Sie die Testing-Library-Pakete für 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() für Vue

render(Component, options) mountet eine Vue-Komponente. Verwenden Sie das Optionsobjekt, um Props, globale Plugins und Setup-Optionen zu übergeben.

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

Props übergeben

Übergeben Sie Props im Optionsobjekt. TypeScript prüft die Prop-Typen, wenn Sie defineProps<T>() verwenden.

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

Globale Plugins bereitstellen

Übergeben Sie globale Konfiguration (Plugins, Komponenten und Provide-Werte) in der global-Option.

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

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

Wiederverwendbarer renderWithPlugins-Helfer

Erstellen Sie einen benutzerdefinierten Render-Wrapper, der alle für Tests benötigten Plugins enthält. So vermeiden Sie, das Setup in jedem Test zu wiederholen.

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

Events testen

Verwenden Sie userEvent, um mit der Komponente zu interagieren, und prüfen Sie anschließend, was der Benutzer sieht oder ob emittierte Events stattgefunden haben.

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' }]);
});

Slots testen

Übergeben Sie Slot-Inhalte als String oder Komponente in den Render-Optionen.

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

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

v-model-Verhalten testen

Füllen Sie Eingabefelder mit userEvent aus und prüfen Sie, ob die emittierten Events oder die angezeigte Ausgabe dem erwarteten aktualisierten Zustand entsprechen.

Pinia-Stores testen

Erstellen Sie für jeden Test eine neue Pinia-Instanz. Ändern Sie den Store-Zustand direkt für das Setup und prüfen Sie anschließend die gerenderte Ausgabe.

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

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

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

Elemente nach asynchronen Aktualisierungen finden

Vue aktualisiert das DOM asynchron. Verwenden Sie await nextTick() oder findBy*-Abfragen, nachdem Sie ein Event ausgelöst haben, das asynchrone Zustandsänderungen verursacht.

import { nextTick } from 'vue';

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

Schnelltest

Wie übergeben Sie Pinia oder Vue Router an eine Komponente, die mit @testing-library/vue getestet wird?

Beantworte es in der interaktiven Lektion

Zusammenfassung: @testing-library/vue

render(Component, options) mountet Vue-Komponenten. Übergeben Sie Props in options.props. Stellen Sie Plugins in global.plugins bereit. Verwenden Sie emitted(), um benutzerdefinierte Events zu prüfen. Übergeben Sie Slots in options.slots. Verwenden Sie await nextTick() für asynchrone Vue-Aktualisierungen. Erstellen Sie einen benutzerdefinierten renderWithSetup()-Wrapper für ein gemeinsames Plugin-Setup.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „@testing-library/vue: Komponenten mounten“ kostenlos?

Ja — der vollständige Text von „@testing-library/vue: Komponenten mounten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „@testing-library/vue: Komponenten mounten“?

Mounten Sie Vue-Komponenten mit @testing-library/vue, stellen Sie Props und globale Plugins bereit, simulieren Sie Benutzerereignisse und prüfen Sie das gerenderte Template. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „@testing-library/vue: Komponenten mounten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Jest einrichten und grundlegende Tests
@testing-library/react: render, userEvent
@testing-library/vue: Komponenten mounten
Module und API-Aufrufe mocken

← Zurück zu Frontend Academy