Vue Academy · Oppitunti

Composableien, storejen ja APIen mockaus

vi.mock(), useFetchin mockaus, Pinia-storejen mockaus ja reitittimen mockaus testeissä

Oppitunti 4/413 vaihetta

Composableien, storejen ja APIen mockaus on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Miksi mockeja käytetään?

Yksikkötestien pitäisi eristää testattava komponentti. Oikeat verkkokutsut, oikeat storet ja raskaat composablet tekevät testeistä hitaita ja epävakaita. Mockaus korvaa nämä riippuvuudet hallittavilla testidoubleilla.

vi.fn: mock-funktio

vi.fn() luo seurattavan funktion. Voitte tarkistaa, miten sitä kutsuttiin, ja hallita sen palauttamaa arvoa. Se on kaiken mockauksen perusrakennuspalikka.

import { vi } from "vitest"

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

Palautettavien arvojen määrittäminen

Voitte hallita mockin tulostetta mockReturnValue-menetelmällä (synkroninen koodi) tai mockResolvedValue-menetelmällä (selvitetty promise) asynkronista koodia varten.

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

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

Composable-moduulin mockaus

vi.mock(path) korvaa kokonaisen moduulin. Antakaa sille factory, joka palauttaa feikkiviennit. Sen avulla voitte korvata composablen testidoublella, jolloin komponentti saa ennakoitavia tietoja.

import { vi } from "vitest"

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

vi.mock-kutsujen hoisting

vi.mock-kutsut nostetaan tiedoston alkuun ennen importien suorittamista. Siksi factory ei voi viitata myöhemmin määriteltyihin ulkopuolisiin muuttujiin — määritelkää apufunktio joko factoryn sisällä tai vi.hoisted-kutsulla.

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

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

Pinia-storejen testaaminen

Pinia-storea käyttävät komponentit tarvitsevat storen testeissä. @pinia/testing tarjoaa createTestingPinia-funktion, joka antaa käyttöön storen, jonka actionit on oletuksena mockattu.

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

Testi-Pinian asentaminen

Välittäkää testi-Pinia mountauksen yhteydessä globaalin plugins-option kautta. Voitte myös määrittää alustavan tilan.

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

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

Store-actionien tarkistaminen

Actionit korvataan oletuksena stub-funktioilla (niitä ei suoriteta), joten voitte tarkistaa, että ne kutsuttiin. Hakekaa store ja tarkistakaa spy.

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

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

fetchin tarkkailu

Koko moduulin korvaamisen sijaan voitte tarkkailla globaalia funktiota. vi.spyOn(global, "fetch") käärii oikean fetch-funktion, joten voitte korvata sen toiminnan ja tarkastella sen kutsuja.

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

Täydellinen fetch-testi

Mockatkaa fetch, käynnistäkää action, suorittakaa promiset loppuun ja tarkistakaa renderöidyt tiedot sekä se, että fetch kutsuttiin oikealla URL-osoitteella.

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

Mockien nollaaminen testien välillä

Jaetut mockit kerryttävät kutsuhistoriaa. Nollatkaa ne beforeEach-kutsussa (tai ottakaa clearMocks käyttöön asetuksissa), jotta yksi testi ei vaikuta toiseen.

import { beforeEach, vi } from "vitest"

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

Pikatarkistus

Tarkistakaa, miten hyvin ymmärrätte mockauksen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte mockaamaan riippuvuuksia testeissä:

vi.fn() luo seurattavia funktioita; hallitkaa tulostetta mockReturnValue- tai mockResolvedValue-menetelmällä.
vi.mock(path, factory) korvaa moduulin (esimerkiksi composablen), ja se nostetaan importien yläpuolelle.
@pinia/testing-paketin createTestingPinia tarjoaa stubbatuilla actioneilla varustetun storen, jonka toiminnan voitte tarkistaa.
vi.spyOn(global, "fetch").mockResolvedValue(...) korvaa verkkokutsut testidoubleilla.
Nollatkaa mockit testien välillä kutsulla vi.clearAllMocks().

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Composableien, storejen ja APIen mockaus” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Composableien, storejen ja APIen mockaus”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Composableien, storejen ja APIen mockaus”?

vi.mock(), useFetchin mockaus, Pinia-storejen mockaus ja reitittimen mockaus testeissä Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Composableien, storejen ja APIen mockaus”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Vitestin käyttöönotto Vue-projekteissa
Komponenttien mountaus ja kyselyt
Käyttäjän vuorovaikutuksen ja tapahtumien testaaminen
Composableien, storejen ja APIen mockaus

← Takaisin: Vue Academy