Vue Academy · Lektion

Mocka composables, stores och API:er

vi.mock(), mockning av useFetch, Pinia-stores och router i tester.

Lektion 4 av 413 steg

Mocka composables, stores och API:er är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Varför mocka?

Enhetstester bör isolera den komponent som testas. Riktiga nätverksanrop, riktiga stores och tunga composables gör tester långsamma och instabila. Mockning ersätter dessa beroenden med kontrollerbara ersättare.

vi.fn: En mockfunktion

vi.fn() skapar en spårad funktion. Du kan granska hur den anropades och styra vad den returnerar. Den är grunden för all mockning.

import { vi } from "vitest"

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

Ställa in returvärden

Styr en mocks resultat med mockReturnValue (synkront) eller mockResolvedValue (ett löst promise) för asynkron kod.

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

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

Mocka en composable-modul

vi.mock(path) ersätter en hel modul. Ange en factory-funktion som returnerar fejkade exports. Använd den för att stubb:a en composable så att komponenten får förutsägbara data.

import { vi } from "vitest"

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

vi.mock och hoisting

Anrop till vi.mock flyttas till början av filen innan importer körs. Därför kan factory-funktionen inte referera till yttre variabler som deklareras senare — deklarera hjälpfunktioner inuti factory-funktionen eller via vi.hoisted.

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

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

Testa Pinia-stores

Komponenter som använder en Pinia-store behöver en store i testerna. @pinia/testing tillhandahåller createTestingPinia, som ger dig en store vars actions är mockade som standard.

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

Installera Testing Pinia

Skicka Testing Pinia-instansen via det globala alternativet plugins när du mountar. Du kan även ange ett initialt state.

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

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

Verifiera store-actions

Som standard stubbas actions (de körs inte), så att du kan verifiera att de skickades. Hämta storen och kontrollera spionen.

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

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

Spionera på fetch

I stället för att ersätta en hel modul kan du spionera på ett globalt objekt. vi.spyOn(global, "fetch") sveper in den riktiga fetch-funktionen så att du kan åsidosätta och granska den.

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

Ett komplett fetch-test

Mocka fetch, utlös actionen, töm promises och verifiera både renderade data och att fetch anropades med rätt 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)
})

Återställ mockar mellan tester

Delade mockar samlar på sig anropshistorik. Återställ dem i beforeEach (eller aktivera clearMocks i konfigurationen) så att ett test inte påverkar ett annat.

import { beforeEach, vi } from "vitest"

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

Snabbkontroll

Kontrollera din förståelse av mockning.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig att mocka beroenden i tester:

vi.fn() skapar spårade funktioner; styr resultatet med mockReturnValue / mockResolvedValue.
vi.mock(path, factory) ersätter en modul (till exempel en composable); anropet flyttas ovanför importer.
createTestingPinia från @pinia/testing tillhandahåller en store med stubbade actions som du kan verifiera.
vi.spyOn(global, "fetch").mockResolvedValue(...) fejkar nätverksanrop.
Återställ mockar mellan tester med vi.clearAllMocks().

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Mocka composables, stores och API:er” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Mocka composables, stores och API:er”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Mocka composables, stores och API:er”?

vi.mock(), mockning av useFetch, Pinia-stores och router i tester. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Mocka composables, stores och API:er”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera Vitest för Vue-projekt
Montera och söka efter komponenter
Testa användarinteraktioner och händelser
Mocka composables, stores och API:er

← Tillbaka till Vue Academy