0Pricing
Vue Academy · Lezione

Mock di composable, store e API

vi.mock(), mock di useFetch, mock degli store Pinia, mock del router nei test.

Mock di composable, store e API è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Perché usare i mock?

I test unitari dovrebbero isolare il componente sottoposto a test. Le chiamate di rete reali, gli store reali e i composable pesanti rendono i test lenti e instabili. Il mocking sostituisce queste dipendenze con implementazioni simulate controllabili.

vi.fn: una funzione mock

vi.fn() crea una funzione tracciata. È possibile controllare come è stata chiamata e cosa restituisce. È il componente fondamentale di ogni mock.

import { vi } from "vitest"

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

Impostare i valori restituiti

Controlli l'output di un mock con mockReturnValue (sincrono) o mockResolvedValue (una promise risolta) per il codice asincrono.

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

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

Creare un mock di un modulo composable

vi.mock(path) sostituisce un intero modulo. Fornisca una factory che restituisca export simulati. Lo utilizzi per creare uno stub di un composable, così il componente riceve dati prevedibili.

import { vi } from "vitest"

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

Hoisting di vi.mock

Le chiamate a vi.mock vengono sottoposte a hoisting all'inizio del file, prima dell'esecuzione degli import. Per questo la factory non può fare riferimento a variabili esterne dichiarate in seguito: dichiari ogni helper all'interno della factory oppure tramite vi.hoisted.

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

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

Testare gli store Pinia

I componenti che usano uno store Pinia hanno bisogno di uno store anche nei test. @pinia/testing fornisce createTestingPinia, che crea uno store le cui action sono mockate per impostazione predefinita.

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

Installare il Pinia di testing

Passi il Pinia di testing attraverso l'opzione globale plugins durante il mounting. È anche possibile inizializzare lo stato iniziale.

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

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

Verificare le action dello store

Per impostazione predefinita, le action sono stub (non vengono eseguite), così è possibile verificare che siano state inviate. Recuperi lo store e controlli lo spy.

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

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

Creare uno spy su fetch

Anziché sostituire un intero modulo, è possibile creare uno spy su una variabile globale. vi.spyOn(global, "fetch") avvolge la fetch reale, consentendo di sovrascriverla e ispezionarla.

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

Un test completo di fetch

Crei un mock di fetch, attivi l'action, risolva le promise in sospeso, verifichi i dati visualizzati e controlli che fetch sia stata chiamata con l'URL corretto.

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

Reimpostare i mock tra i test

I mock condivisi accumulano la cronologia delle chiamate. Li reimposti in beforeEach (oppure abiliti clearMocks nella configurazione), così un test non interferisce con un altro.

import { beforeEach, vi } from "vitest"

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

Verifica rapida

Verifichi la sua comprensione dei mock.

Riepilogo

Ha imparato a creare mock per le dipendenze nei test:

  • vi.fn() crea funzioni tracciate; ne controlli l'output con mockReturnValue / mockResolvedValue.
  • vi.mock(path, factory) sostituisce un modulo, ad esempio un composable; viene sottoposto a hoisting prima degli import.
  • createTestingPinia di @pinia/testing fornisce uno store con action stub che è possibile verificare.
  • vi.spyOn(global, "fetch").mockResolvedValue(...) simula le chiamate di rete.
  • Reimposti i mock tra i test con vi.clearAllMocks().

Domande Frequenti

La lezione «Mock di composable, store e API» è gratuita?

Sì — il testo completo di «Mock di composable, store e API» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Mock di composable, store e API»?

vi.mock(), mock di useFetch, mock degli store Pinia, mock del router nei test. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Mock di composable, store e API»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di Vitest per i progetti Vue
  2. Mount e interrogazione dei componenti
  3. Test delle interazioni utente e degli eventi
  4. Mock di composable, store e API
← Torna a Vue Academy