Vue Academy · Lektion

Composables, Stores und APIs mocken

vi.mock(), useFetch mocken, Pinia-Stores mocken und den Router in Tests mocken

Lektion 4 von 413 Schritte

Composables, Stores und APIs mocken ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum mocken?

Unit-Tests sollten die zu testende Komponente isolieren. Echte Netzwerkaufrufe, echte Stores und aufwendige Composables machen Tests langsam und instabil. Mocking ersetzt diese Abhängigkeiten durch kontrollierbare Fakes.

vi.fn: Eine Mock-Funktion

vi.fn() erstellt eine protokollierte Funktion. Sie können überprüfen, wie sie aufgerufen wurde, und kontrollieren, was sie zurückgibt. Sie ist der Grundbaustein für jegliches Mocking.

import { vi } from "vitest"

const onSave = vi.fn()
onSave("draft")
expect(onSave).toHaveBeenCalledWith("draft")
expect(onSave).toHaveBeenCalledTimes(1)

Rückgabewerte festlegen

Steuern Sie die Ausgabe eines Mocks mit mockReturnValue (synchron) oder mockResolvedValue (ein aufgelöstes Promise) für asynchronen Code.

const getId = vi.fn().mockReturnValue(42)
expect(getId()).toBe(42)

const fetchUser = vi.fn().mockResolvedValue({ name: "Ada" })
// await fetchUser() => { name: "Ada" }

Ein Composable-Modul mocken

vi.mock(path) ersetzt ein vollständiges Modul. Übergeben Sie eine Factory-Funktion, die gefälschte Exporte zurückgibt. Verwenden Sie sie, um ein Composable zu stubben, damit die Komponente vorhersehbare Daten erhält.

import { vi } from "vitest"

vi.mock("@/composables/useUser", () => ({
  useUser: () => ({
    user: { value: { name: "Ada" } },
    isLoading: { value: false },
  }),
}))

Hoisting von vi.mock

vi.mock-Aufrufe werden an den Anfang der Datei verschoben, bevor die Imports ausgeführt werden. Deshalb kann die Factory-Funktion nicht auf äußere Variablen verweisen, die später definiert werden. Deklarieren Sie Hilfsfunktionen innerhalb der Factory oder mit vi.hoisted.

// This runs before imports regardless of position.
vi.mock("@/api", () => ({ getPosts: vi.fn() }))

import { getPosts } from "@/api" // already the mock

Pinia-Stores testen

Komponenten, die einen Pinia-Store verwenden, benötigen beim Testen einen Store. @pinia/testing stellt createTestingPinia bereit, das Ihnen einen Store liefert, dessen Actions standardmäßig gemockt sind.

// terminal: npm install -D @pinia/testing
import { createTestingPinia } from "@pinia/testing"

Die Testing-Pinia installieren

Übergeben Sie die Testing-Pinia beim Mounten über die globale Option plugins. Sie können auch einen initialen Zustand vorgeben.

import { mount } from "@vue/test-utils"
import { createTestingPinia } from "@pinia/testing"

const wrapper = mount(Profile, {
  global: {
    plugins: [createTestingPinia({
      initialState: { user: { name: "Ada" } },
    })],
  },
})

Store-Actions überprüfen

Actions werden standardmäßig gestubbt (nicht ausgeführt), sodass Sie überprüfen können, ob sie ausgelöst wurden. Rufen Sie den Store ab und prüfen Sie den Spy.

import { useUserStore } from "@/stores/user"

const store = useUserStore()
await wrapper.get("button.logout").trigger("click")
expect(store.logout).toHaveBeenCalled()

fetch überwachen

Statt ein ganzes Modul zu ersetzen, können Sie eine globale Funktion überwachen. vi.spyOn(global, "fetch") umschließt den echten fetch-Aufruf, sodass Sie ihn überschreiben und überprüfen können.

const spy = vi.spyOn(global, "fetch").mockResolvedValue({
  ok: true,
  json: async () => ({ items: [1, 2, 3] }),
})

Ein vollständiger Fetch-Test

Mocken Sie fetch, lösen Sie die Action aus, arbeiten Sie die Promises ab, überprüfen Sie die gerenderten Daten und stellen Sie sicher, dass fetch mit der richtigen URL aufgerufen wurde.

it("loads items", async () => {
  vi.spyOn(global, "fetch").mockResolvedValue({
    ok: true,
    json: async () => ({ items: ["a", "b"] }),
  })
  const wrapper = mount(List)
  await flushPromises()
  expect(global.fetch).toHaveBeenCalledWith("/api/items")
  expect(wrapper.findAll("li")).toHaveLength(2)
})

Mocks zwischen Tests zurücksetzen

Gemeinsam verwendete Mocks sammeln die Aufrufhistorie an. Setzen Sie sie in beforeEach zurück (oder aktivieren Sie clearMocks in der Konfiguration), damit kein Test Auswirkungen auf einen anderen hat.

import { beforeEach, vi } from "vitest"

beforeEach(() => {
  vi.clearAllMocks()
})

Kurze Überprüfung

Überprüfen Sie Ihr Verständnis von Mocking.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben gelernt, Abhängigkeiten in Tests zu mocken:

vi.fn() erstellt protokollierte Funktionen. Steuern Sie die Ausgabe mit mockReturnValue / mockResolvedValue.
vi.mock(path, factory) ersetzt ein Modul (z. B. ein Composable) und wird vor die Imports verschoben.
createTestingPinia aus @pinia/testing stellt einen Store mit gestubbten Actions bereit, die Sie überprüfen können.
vi.spyOn(global, "fetch").mockResolvedValue(...) täuscht Netzwerkaufrufe vor.
Setzen Sie Mocks zwischen Tests mit vi.clearAllMocks() zurück.

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: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Composables, Stores und APIs mocken“ kostenlos?

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

Was lerne ich in „Composables, Stores und APIs mocken“?

vi.mock(), useFetch mocken, Pinia-Stores mocken und den Router in Tests mocken Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 4 von 4.

Wie lange dauert die Lektion „Composables, Stores und APIs mocken“?

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 Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue 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

Vitest-Einrichtung für Vue-Projekte
Komponenten mounten und abfragen
Benutzerinteraktionen und Ereignisse testen
Composables, Stores und APIs mocken

← Zurück zu Vue Academy