0Pricing
Vue Academy · Leçon

Simuler les composables, stores et API

vi.mock(), simulation de useFetch, simulation des stores Pinia et du routeur dans les tests

Simuler les composables, stores et API est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Pourquoi utiliser un mock ?

Les tests unitaires doivent isoler le composant testé. Les appels réseau réels, les store réels et les composables lourds rendent les tests lents et instables. La simulation remplace ces dépendances par des doublures contrôlables.

vi.fn : une fonction simulée

vi.fn() crée une fonction suivie. Vous pouvez examiner la manière dont elle a été appelée et contrôler ce qu’elle renvoie. C’est la base de toute simulation.

import { vi } from "vitest"

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

Définir les valeurs de retour

Contrôlez la sortie d’un mock avec mockReturnValue (synchrone) ou mockResolvedValue (une promesse résolue) pour le code asynchrone.

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

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

Simuler un module composable

vi.mock(path) remplace un module entier. Fournissez une fabrique qui renvoie de fausses exportations. Utilisez-la pour remplacer un composable et ainsi fournir au composant des données prévisibles.

import { vi } from "vitest"

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

Remontée de vi.mock

Les appels à vi.mock sont remontés au début du fichier avant l’exécution des importations. C’est pourquoi la fabrique ne peut pas faire référence à des variables externes définies plus tard : déclarez chaque utilitaire dans la fabrique ou via vi.hoisted.

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

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

Tester un store Pinia

Les composants qui utilisent un store Pinia ont besoin d’un store dans les tests. @pinia/testing fournit createTestingPinia, qui vous donne un store dont les actions sont simulées par défaut.

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

Installer le store Pinia de test

Passez le store Pinia de test via l’option globale plugins lors du montage. Vous pouvez également initialiser l’état.

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

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

Vérifier les actions du store

Par défaut, les actions sont remplacées par des doublures et ne sont pas exécutées, ce qui vous permet de vérifier qu’elles ont été déclenchées. Récupérez le store et vérifiez le spy.

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

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

Surveiller la récupération

Plutôt que de remplacer un module entier, vous pouvez surveiller une fonction globale. vi.spyOn(global, "fetch") enveloppe la fonction de récupération réelle afin que vous puissiez la remplacer et l’examiner.

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

Un test complet de récupération

Simulez la fonction de récupération, déclenchez l’action, attendez la résolution des promesses, puis vérifiez les données affichées et que la récupération a été appelée avec la bonne 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)
})

Réinitialiser les simulations entre les tests

Les objets mock partagés accumulent l’historique des appels. Réinitialisez-les dans beforeEach (ou activez clearMocks dans la configuration) afin qu’un test n’influence pas le suivant.

import { beforeEach, vi } from "vitest"

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

Vérification rapide

Vérifiez votre compréhension de la simulation.

Récapitulatif

Vous avez appris à simuler les dépendances dans les tests :

  • vi.fn() crée des fonctions suivies ; contrôlez leur sortie avec mockReturnValue / mockResolvedValue.
  • vi.mock(path, factory) remplace un module, par exemple un composable ; l’appel est remonté avant les importations.
  • createTestingPinia de @pinia/testing fournit un store dont les actions sont remplacées par des doublures que vous pouvez vérifier.
  • vi.spyOn(global, "fetch").mockResolvedValue(...) simule les appels réseau.
  • Réinitialisez les simulations entre les tests avec vi.clearAllMocks().

Questions Fréquemment Posées

La leçon « Simuler les composables, stores et API » est-elle gratuite ?

Oui — le texte complet de « Simuler les composables, stores et API » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Simuler les composables, stores et API » ?

vi.mock(), simulation de useFetch, simulation des stores Pinia et du routeur dans les tests Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Simuler les composables, stores et API » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configurer Vitest pour les projets Vue
  2. Monter et interroger des composants
  3. Tester les interactions et événements utilisateur
  4. Simuler les composables, stores et API
← Retour à Vue Academy