Vue Academy · leksjon

Mocke composables, stores og API-er

vi.mock(), mock useFetch, mock Pinia-stores og mock routeren i tester.

Leksjon 4 av 413 trinn

Mocke composables, stores og API-er er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hvorfor bruke mocking

Enhetstester bør isolere komponenten som testes. Ekte nettverkskall, ekte stores og tunge composables gjør testene trege og ustabile. Mocking erstatter disse avhengighetene med kontrollerbare falske implementasjoner.

vi.fn: En mock-funksjon

vi.fn() oppretter en funksjon som spores. Du kan undersøke hvordan den ble kalt, og kontrollere hva den returnerer. Den er byggesteinen for all mocking.

import { vi } from "vitest"

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

Angi returverdier

Kontroller mockens resultat med mockReturnValue (synkront) eller mockResolvedValue (et ferdigbehandlet promise) for asynkron kode.

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

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

Mocke en composable-modul

vi.mock(path) erstatter en hel modul. Oppgi en factory-funksjon som returnerer falske eksporterte verdier. Bruk den til å stubbe en composable, slik at komponenten får forutsigbare data.

import { vi } from "vitest"

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

Hoisting av vi.mock

vi.mock-kall flyttes til toppen av filen før importene kjøres. Derfor kan factory-funksjonen ikke referere til ytre variabler som deklareres senere — deklarer hjelpefunksjoner inne i factory-funksjonen eller via vi.hoisted.

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

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

Teste Pinia-stores

Komponenter som bruker en Pinia-store, trenger en store i testene. @pinia/testing tilbyr createTestingPinia, som gir deg en store der actions som standard er mocket.

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

Installere Testing Pinia

Koble inn Testing Pinia via det globale plugins-alternativet når du monterer komponenten. Du kan også forhåndsutfylle starttilstanden.

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

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

Kontrollere store-actions

Som standard stubbes actions (de kjøres ikke), slik at du kan kontrollere at de ble kalt. Hent store-instansen og kontroller spionen.

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

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

Spionere på fetch

I stedet for å erstatte en hel modul kan du legge en spy på en global funksjon. vi.spyOn(global, "fetch") pakker inn den ekte fetch-funksjonen, slik at du kan overstyre og undersøke den.

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

En fullstendig fetch-test

Mock fetch, utløs handlingen, vent på promises, og kontroller de viste dataene samt at fetch ble kalt med riktig URL.

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

Tilbakestille mocker mellom tester

Felles mocker samler opp historikken over kall. Tilbakestill dem i beforeEach (eller aktiver clearMocks i konfigurasjonen), slik at én test ikke påvirker en annen.

import { beforeEach, vi } from "vitest"

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

Rask sjekk

Kontroller forståelsen din av mocking.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært å mocke avhengigheter i tester:

vi.fn() oppretter funksjoner som spores; kontroller resultatet med mockReturnValue / mockResolvedValue.
vi.mock(path, factory) erstatter en modul, for eksempel en composable; kallet flyttes til før importene.
createTestingPinia fra @pinia/testing tilbyr en store med stubbed actions som du kan kontrollere.
vi.spyOn(global, "fetch").mockResolvedValue(...) simulerer nettverkskall.
Tilbakestill mockene mellom tester med vi.clearAllMocks().

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Mocke composables, stores og API-er» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Mocke composables, stores og API-er», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Mocke composables, stores og API-er»?

vi.mock(), mock useFetch, mock Pinia-stores og mock routeren i tester. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Mocke composables, stores og API-er»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Vue Academy