Simulación de llamadas API en pruebas de Vue con Vitest

Los componentes de Vue rara vez funcionan de forma aislada. La mayoría de ellos obtienen datos, envían formularios o consultan endpoints. Cuando pruebas esos componentes sin controlar la red, tus pruebas se vuelven lentas, inestables y dependientes de servicios externos. La simulación de llamadas API en pruebas de Vue ayuda a eliminar esos problemas al permitirte controlar las respuestas que reciben tus componentes.

Este artículo cubre dos estrategias prácticas para la simulación de API en Vue con Vitest: reemplazar el módulo API directamente con vi.mock, e interceptar solicitudes en la capa HTTP usando Mock Service Worker (MSW). También aprenderás el manejo asíncrono específico de Vue que hace que ambos enfoques funcionen de manera confiable.

Por qué debes simular llamadas API en pruebas de componentes Vue con Vitest

Las llamadas de red reales en las pruebas producen resultados no deterministas. La misma prueba puede pasar localmente y fallar en CI simplemente porque una API externa está lenta o no disponible. La simulación te da control sobre lo que devuelve la red, por lo que tus pruebas se mantienen rápidas y predecibles.

Estrategia 1: Simulación del módulo API con vi.mock

El enfoque más directo es reemplazar el módulo responsable de las llamadas HTTP antes de que tu componente lo vea.

// quote.service.ts
export async function fetchQuote() {
  const response = await fetch('https://api.example.com/quotes/random')
  return response.json()
}

// QuoteCard.test.ts
import { mount, flushPromises } from '@vue/test-utils'
import { vi, test, expect } from 'vitest'
import { fetchQuote } from './quote.service'
import QuoteCard from './QuoteCard.vue'

// vi.mock se eleva automáticamente por encima de las importaciones
vi.mock('./quote.service')

test('muestra una cita después de montar', async () => {
  vi.mocked(fetchQuote).mockResolvedValue({
    id: 1,
    quote: 'Cita de prueba',
    author: 'Probador',
  })

  const wrapper = mount(QuoteCard)

  // Espera a que todas las promesas pendientes y actualizaciones del DOM se resuelvan
  await flushPromises()

  expect(wrapper.text()).toContain('Cita de prueba')
})

Un detalle crítico: vi.mock es elevado al inicio del archivo por Vitest, por lo que se ejecuta antes de cualquier importación. Este es un comportamiento intencional documentado en la API de simulación de Vitest. Esto significa que puedes importar de forma segura la función real y aún así recibir la versión simulada dentro de tu prueba.

La llamada a flushPromises() a menudo es requerida en este patrón. Los componentes de Vue que obtienen datos al montarse actualizan su DOM de forma asíncrona. Utilidades como flushPromises aseguran que las promesas pendientes se resuelvan antes de que se ejecuten las aserciones, evitando que las pruebas hagan aserciones contra estados de carga.

Cuándo usar este enfoque: Pruebas unitarias de un componente o servicio específico de forma aislada, donde quieres un control estricto sobre los valores de retorno y el conteo de llamadas.

Estrategia 2: MSW con pruebas de Vue en Vitest para simulación a nivel HTTP

Mock Service Worker intercepta solicitudes a nivel de red en lugar de reemplazar módulos JavaScript. Esto hace que tus pruebas sean más realistas porque la llamada real a fetch o axios aún se ejecuta — MSW simplemente la intercepta antes de que salga del proceso.

Instala MSW y configúralo para un entorno Node (el predeterminado para Vitest):

npm install -D msw

// test/server.ts
import { setupServer } from 'msw/node'
import { http, HttpResponse } from 'msw'

export const server = setupServer(
  http.get('https://api.example.com/quotes/random', () => {
    return HttpResponse.json({ id: 1, quote: 'Cita MSW', author: 'MSW' })
  })
)

// QuoteCard.test.ts
import { mount, flushPromises } from '@vue/test-utils'
import { test, expect, beforeAll, afterEach, afterAll } from 'vitest'
import { server } from './test/server'
import QuoteCard from './QuoteCard.vue'

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

test('muestra una cita obtenida vía MSW', async () => {
  const wrapper = mount(QuoteCard)
  await flushPromises()
  expect(wrapper.text()).toContain('Cita MSW')
})

flushPromises() puede seguir siendo necesario aquí por la misma razón — el sistema de reactividad de Vue necesita un tick para aplicar las actualizaciones del DOM después de que la promesa se resuelva.

Cuándo usar este enfoque: Pruebas de estilo de integración donde quieres verificar que tu componente funciona con comportamiento HTTP realista, o cuando múltiples componentes comparten el mismo endpoint. La propia documentación de Vitest recomienda MSW para simulación a nivel de solicitud en entornos de prueba basados en Node.

Elegir entre vi.mock y MSW

Conclusión

Ambas estrategias son herramientas válidas para simular llamadas API en pruebas de Vue. Usa vi.mock cuando quieras pruebas unitarias rápidas y aisladas con control preciso sobre los valores de retorno. Usa MSW cuando quieras que tus pruebas ejerciten la ruta completa de la solicitud. En cualquier caso, utilidades como flushPromises() ayudan a asegurar que Vue termine de renderizar las actualizaciones asíncronas antes de que se ejecuten las aserciones.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.