Testing con Vitest

1 ¿Qué es testing y por qué deberías hacerlo?

Hacer testing es escribir código que verifica que otro código funciona. En lugar de abrir el navegador y probar manualmente cada cambio, dejas que un programa lo haga por ti, miles de veces, en segundos.

¿Para qué sirven?

2 Tipos de test que existen

Hay dos formas habituales de clasificar los tests: según cuánto sabes del código interno y según el nivel de integración.

2.1. Por conocimiento del código: caja negra, caja blanca y caja gris

Imagina la función que vas a testear como una caja. La pregunta es: ¿puedes ver lo que hay dentro?

2.2. Por nivel de integración: la pirámide de tests

No todos los tests son iguales. Hay tres niveles: unitarios, de integración y end-to-end. La regla de oro: muchos abajo, pocos arriba.

2.3. Bonus: TDD (Test-Driven Development)

TDD es una metodología donde escribes el test ANTES que el código. Suena raro, pero es brutal para forzarte a pensar la API antes de implementarla.

3 ¿Qué es Vitest y por qué usarlo?

Vitest es un test runner moderno construido sobre Vite. Es lo que vas a usar para escribir y ejecutar tests en proyectos Astro, Vue, React, Svelte... cualquier cosa que use Vite por debajo (que es prácticamente todo el ecosistema moderno).

4 Instalación

Como toda librería profesional, se instala con npm:

1npm install -D vitest

La flag -D (o --save-dev) la guarda en devDependencies del package.json. Es una dependencia de desarrollo: en producción no se instala.

Añade los scripts a tu package.json:

1{
2  "scripts": {
3    "test": "vitest",
4    "test:run": "vitest run",
5    "test:ui": "vitest --ui",
6    "coverage": "vitest run --coverage"
7  }
8}

5 Tu primer test paso a paso

Vamos a testear una función simple: una calculadora con una función suma.

1export function suma(a, b) {
2  if (typeof a !== 'number' || typeof b !== 'number') {
3    throw new Error('Ambos parametros deben ser numeros');
4  }
5  return a + b;
6}

1import { describe, it, expect } from 'vitest';
2import { suma } from './calculadora.js';
3 
4describe('suma', () => {
5  it('devuelve la suma de dos numeros positivos', () => {
6    expect(suma(2, 3)).toBe(5);
7  });
8 
9  it('funciona con numeros negativos', () => {
10    expect(suma(-1, -1)).toBe(-2);
11  });
12 
13  it('lanza un error si recibe un string', () => {
14    expect(() => suma('hola', 2)).toThrow('Ambos parametros');
15  });
16});

1npm test

1 ✓ src/utils/calculadora.test.js (3)
2   ✓ suma
3     ✓ devuelve la suma de dos numeros positivos
4     ✓ funciona con numeros negativos
5     ✓ lanza un error si recibe un string
6 
7 Test Files  1 passed (1)
8      Tests  3 passed (3)
9   Duration  142ms

1 ✗ suma > devuelve la suma de dos numeros positivos
2   AssertionError: expected 5 to be 99
3     - Expected: 99
4     + Received: 5
5 
6   ❯ src/utils/calculadora.test.js:5:24

6 Anatomía: describe, it y expect

Todo test de Vitest se construye con estas 3 funciones:

1describe('Calculadora', () => {
2  describe('suma', () => {
3    it('suma dos positivos', () => { /* ... */ });
4  });
5  describe('resta', () => {
6    it('resta dos positivos', () => { /* ... */ });
7  });
8});

1it('devuelve 5 cuando sumo 2 + 3', () => {
2  expect(suma(2, 3)).toBe(5);
3});

1expect(suma(2, 3)).toBe(5);          // estricta igualdad
2expect({a: 1}).toEqual({a: 1});      // igualdad profunda
3expect([1, 2, 3]).toContain(2);      // contenido
4expect(() => fn()).toThrow();        // lanza error

7 Matchers más usados

Estos son los matchers que vas a usar el 90% del tiempo: