¿Qué es Vitest?

Vitest es un framework diseñado para hacer pruebas unitarias, de integración y de componentes en aplicaciones web construidas con Vite. Destaca por su rendimiento, facilidad de configuración y compatibilidad con herramientas modernas.

Si lo comparamos con Jest (otro framework muy similar), Vitest ofrece varias ventajas y diferencias:

• Rendimiento: Vitest es mucho más rápido que Jest, sobretodo se nota en aplicaciones con muchos tests.
• Compatibilidad: Vitest puede ejecutar pruebas en proyectos existentes de Jest, ya que su API es en gran medida compatible con Jest, lo que facilita la migración.
• Configuración: Al integrarse directamente con Vite, Vitest reduce la necesidad de configuraciones complejas, haciendo que las pruebas sean más fáciles de configurar en proyectos modernos.
• Simplicidad: Mientras Jest es robusto y versátil, a veces puede sentirse pesado o desactualizado en comparación con la velocidad y simplicidad de Vitest en entornos modernos.

Instalar Vitest

Si no tienes Vitest instalado, puedes agregarlo al proyecto usando npm o yarn:

npm install -D vitest

Ejemplo práctico de Vitest

Vamos a crear una función simple en JavaScript llamada sum que suma dos números:

export function sum(a, b) {
  return a + b;
}

Si estás usando Vite, Vitest ya se integra fácilmente. Asegúrate de agregar el comando de prueba en tu package.json:

{
  "scripts": {
    "test": "vitest"
  }
}

Prueba unitaria con Vitest

Creamos un archivo de pruebas llamado sum.test.js para validar la función sum:

import { describe, it, expect } from 'vitest';
import { sum } from './sum';

describe('función sum', () => {
  it('debería sumar correctamente dos números positivos', () => {
    expect(sum(2, 3)).toBe(5);
  });

  it('debería sumar correctamente dos números negativos', () => {
    expect(sum(-2, -3)).toBe(-5);
  });

  it('debería sumar correctamente un número positivo y un número negativo', () => {
    expect(sum(5, -3)).toBe(2);
  });

  it('debería retornar el mismo número al sumar 0', () => {
    expect(sum(4, 0)).toBe(4);
  });
});

Ejecutar el test con Vitest

Para ejecutar las pruebas, simplemente usa el comando:

npx vitest

Si quieres una ejecución más detallada e interactiva, puedes usar:

npx vitest --ui

Los resultados de los tests deberían aparecer así:

✓ unción sum › debería sumar correctamente dos números positivos
✓ unción sum › debería sumar correctamente dos números negativos
✓ unción sum › debería sumar correctamente un número positivo y un número negativo
✓ unción sum › debería retornar el mismo número al sumar 0

Test Files  ✔  1 passed (1)
      Tests  ✔  4 passed (4)
   Start at  14:12:34
   Duration  23ms