Vue Academy · Lekcja

Mockowanie composable, store i API

vi.mock(), mockowanie useFetch, store Pinia oraz routera w testach.

Mockowanie composable, store i API to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego stosować mocki?

Testy jednostkowe powinny izolować testowany komponent. Rzeczywiste wywołania sieciowe, prawdziwe store'y i ciężkie composable sprawiają, że testy są wolne i niestabilne. Mockowanie zastępuje te zależności kontrolowanymi atrapami.

vi.fn: funkcja mockująca

vi.fn() tworzy funkcję, której wywołania są rejestrowane. Można sprawdzać, jak została wywołana, oraz kontrolować, co zwraca. Jest to podstawa całego mockowania.

import { vi } from "vitest"

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

Ustawianie wartości zwracanych

Wyjściem mocka można sterować za pomocą mockReturnValue (synchronicznie) lub mockResolvedValue (rozwiązana obietnica) w kodzie asynchronicznym.

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

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

Mockowanie modułu composable

vi.mock(path) zastępuje cały moduł. Należy przekazać fabrykę zwracającą fikcyjne eksporty. Użyj jej, aby zastąpić composable atrapą i zapewnić komponentowi przewidywalne dane.

import { vi } from "vitest"

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

Hoisting vi.mock

Wywołania vi.mock są przenoszone na początek pliku, zanim zostaną wykonane importy. Dlatego fabryka nie może odwoływać się do zmiennych zewnętrznych zdefiniowanych później — pomocniczą funkcję należy zadeklarować wewnątrz fabryki albo za pomocą vi.hoisted.

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

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

Testowanie store'ów Pinia

Komponenty korzystające ze store'a Pinia potrzebują store'a również w testach. @pinia/testing udostępnia createTestingPinia, który zapewnia store z domyślnie zamockowanymi akcjami.

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

Konfigurowanie testowego Pinia

Podczas montowania komponentu przekaż testowy Pinia przez globalną opcję plugins. Możesz też zainicjować stan początkowy.

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

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

Sprawdzanie akcji store'a

Domyślnie akcje są zastępowane stubami (nie są uruchamiane), dzięki czemu można sprawdzić, czy zostały wywołane. Pobierz store i sprawdź spy.

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

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

Szpiegowanie funkcji fetch

Zamiast zastępować cały moduł, można szpiegować obiekt globalny. vi.spyOn(global, "fetch") opakowuje prawdziwą funkcję fetch, dzięki czemu można ją nadpisać i sprawdzać jej wywołania.

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

Kompletny test fetch

Zamockuj fetch, wywołaj akcję, doprowadź do wykonania oczekujących obietnic, a następnie sprawdź wyrenderowane dane oraz to, czy fetch został wywołany z właściwym adresem 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)
})

Resetowanie mocków między testami

Współdzielone mocki gromadzą historię wywołań. Resetuj je w beforeEach (lub włącz clearMocks w konfiguracji), aby jeden test nie wpływał na kolejny.

import { beforeEach, vi } from "vitest"

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

Szybkie sprawdzenie

Sprawdź swoje rozumienie mockowania.

Podsumowanie

Nauczyłeś się mockować zależności w testach:

vi.fn() tworzy funkcje rejestrujące wywołania; steruj ich wyjściem za pomocą mockReturnValue / mockResolvedValue.
vi.mock(path, factory) zastępuje moduł (np. composable); wywołanie jest przenoszone przed importy.
createTestingPinia z @pinia/testing zapewnia store z akcjami zastąpionymi stubami, które można sprawdzać.
vi.spyOn(global, "fetch").mockResolvedValue(...) symuluje wywołania sieciowe.
Resetuj mocki między testami za pomocą vi.clearAllMocks().

Często zadawane pytania

Czy lekcja „Mockowanie composable, store i API” jest bezpłatna?

Tak — pełny tekst „Mockowanie composable, store i API” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Mockowanie composable, store i API”?

vi.mock(), mockowanie useFetch, store Pinia oraz routera w testach. Ćwiczysz Vue 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ąć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue 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 4 z 4.

Ile czasu zajmuje lekcja „Mockowanie composable, store i API”?

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 Vue Academy?

Tak. Każda lekcja Vue 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

Konfiguracja Vitest dla projektów Vue
Montowanie i wyszukiwanie komponentów
Testowanie interakcji użytkownika i zdarzeń
Mockowanie composable, store i API

← Powrót do Vue Academy