Aprender Vuejs Testing

El testing es una parte esencial del desarrollo de aplicaciones Vue robustas y mantenibles. El ecosistema de Vue ofrece herramientas especializadas que se integran de forma nativa con Vite y la Composition API, permitiendo verificar el comportamiento de funciones, componentes, stores y composables de manera eficiente.

Herramientas del ecosistema

Vitest es el test runner recomendado para proyectos Vue basados en Vite. Comparte la misma configuración y pipeline de transformación que Vite, lo que elimina la necesidad de configuraciones duplicadas y ofrece tiempos de ejecución significativamente más rápidos que alternativas como Jest. Su API es compatible con Jest, facilitando la migración.

Vue Test Utils es la libreria oficial para testing de componentes Vue. Proporciona utilidades para montar componentes en un entorno aislado, simular interacciones del usuario, verificar el contenido renderizado y comprobar los eventos emitidos.

Para testing de stores Pinia, el paquete @pinia/testing proporciona createTestingPinia, que permite crear instancias de Pinia con estado inicial controlado y acciones mockeadas automáticamente.

Ejemplo básico de test

Un test básico con Vitest para una función pura sigue esta estructura:

import { describe, it, expect } from 'vitest'

function suma(a: number, b: number): number {
  return a + b
}

describe('suma', () => {
  it('debe sumar dos numeros positivos', () => {
    expect(suma(2, 3)).toBe(5)
  })

  it('debe manejar numeros negativos', () => {
    expect(suma(-1, -2)).toBe(-3)
  })
})

Este modulo cubre testing con Vitest para funciones y servicios, testing de componentes con Vue Test Utils incluyendo props, eventos y slots, y testing de stores Pinia y composables con sus patrones especificos.