0Pricing
Vue Academy · Lección

Simulación de composables, stores y API

vi.mock(), simulación de useFetch, simulación de stores de Pinia y del router en las pruebas

Simulación de composables, stores y API es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

¿Por qué usar mocks?

Las pruebas unitarias deben aislar el componente que se está probando. Las llamadas de red reales, los stores reales y los composables pesados hacen que las pruebas sean lentas e inestables. El mocking sustituye esas dependencias por dobles controlables.

vi.fn: una función mock

vi.fn() crea una función con seguimiento. Puede inspeccionar cómo se llamó y controlar qué devuelve. Es el componente básico de todo mocking.

import { vi } from "vitest"

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

Definir valores de retorno

Controle la salida de un mock con mockReturnValue (síncrono) o mockResolvedValue (una promesa resuelta) para código asíncrono.

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

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

Simular un módulo composable

vi.mock(path) sustituye un módulo completo. Proporcione una factory que devuelva exportaciones falsas. Úsela para crear un stub de un composable y que el componente reciba datos predecibles.

import { vi } from "vitest"

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

Hoisting de vi.mock

Las llamadas a vi.mock se elevan al principio del archivo antes de que se ejecuten los imports. Por eso la factory no puede hacer referencia a variables externas definidas más adelante: declare cualquier helper dentro de la factory o mediante vi.hoisted.

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

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

Probar stores de Pinia

Los componentes que usan un store de Pinia necesitan un store en las pruebas. @pinia/testing proporciona createTestingPinia, que le ofrece un store cuyas acciones están simuladas de forma predeterminada.

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

Instalar el Pinia de pruebas

Pase el Pinia de pruebas mediante la opción global plugins al montar el componente. También puede preestablecer el estado inicial.

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

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

Comprobar las acciones del store

De forma predeterminada, las acciones se sustituyen por stubs (no se ejecutan), para que pueda comprobar que se enviaron. Obtenga el store y compruebe el spy.

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

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

Espiar fetch

En lugar de sustituir un módulo completo, puede espiar un objeto global. vi.spyOn(global, "fetch") envuelve el fetch real para que pueda sobrescribirlo e inspeccionarlo.

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

Una prueba completa de fetch

Simule fetch, desencadene la acción, espere a que se resuelvan las promesas y compruebe los datos renderizados y que fetch se llamó con la URL correcta.

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

Restablecer los mocks entre pruebas

Los mocks compartidos acumulan el historial de llamadas. Restablézcalos en beforeEach (o active clearMocks en la configuración) para que una prueba no afecte a otra.

import { beforeEach, vi } from "vitest"

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

Comprobación rápida

Compruebe su comprensión del mocking.

Resumen

Ha aprendido a simular dependencias en las pruebas:

  • vi.fn() crea funciones con seguimiento; controle la salida con mockReturnValue / mockResolvedValue.
  • vi.mock(path, factory) sustituye un módulo (por ejemplo, un composable); se eleva por encima de los imports.
  • createTestingPinia de @pinia/testing proporciona un store con acciones sustituidas por stubs que puede comprobar.
  • vi.spyOn(global, "fetch").mockResolvedValue(...) simula las llamadas de red.
  • Restablezca los mocks entre pruebas con vi.clearAllMocks().

Preguntas frecuentes

¿La lección «Simulación de composables, stores y API» es gratis?

Sí — el texto completo de «Simulación de composables, stores y API» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Simulación de composables, stores y API»?

vi.mock(), simulación de useFetch, simulación de stores de Pinia y del router en las pruebas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Simulación de composables, stores y API»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configuración de Vitest para proyectos Vue
  2. Montaje y consulta de componentes
  3. Pruebas de interacciones y eventos del usuario
  4. Simulación de composables, stores y API
← Volver a Vue Academy