CodeForge

JavaScript de Cero a Experto / Testing con Vitest

Vitest de verdad: describe, it, expect

Teoría25 min20 XP

Construiste tu propio test() y expect(). Ahora conoce la herramienta profesional: Vitest, el framework de testing más usado del ecosistema moderno (y el que CodeForge mismo usa por dentro). Vas a reconocer cada pieza —porque es tu mini-framework, crecido, pulido y con superpoderes.

Por qué Vitest (y no a mano)

Instalación y primer test

Vitest se instala como dependencia de desarrollo (solo para programar, no va al producto final):

terminal
pnpm add -D vitest

Luego, en package.json, un script para correrlo:

package.json
{
"scripts": {
  "test": "vitest"
}
}

Vitest busca automáticamente archivos que terminen en .test.js o .spec.js. Pongamos la función y su test:

src/matematicas.js
export function sumar(a, b) {
return a + b;
}
src/matematicas.test.js
import { describe, it, expect } from "vitest";
import { sumar } from "./matematicas.js";

describe("sumar", () => {
it("suma dos números positivos", () => {
  expect(sumar(2, 3)).toBe(5);
});

it("maneja el cero", () => {
  expect(sumar(10, 0)).toBe(10);
});
});

¿Reconoces la forma? expect(...).toBe(...) es idéntico al tuyo. Lo nuevo son dos organizadores: it (alias de test) es cada caso, y describe los agrupa bajo un tema. Se leen como frases: "describe sumar: it suma dos positivos". Ese lenguaje casi-inglés es intencional —un test debería leerse como una especificación.

Correr y leer el resultado

Corres pnpm test y Vitest imprime el marcador. Verde es vida:

terminal

pnpm test

✓ src/matematicas.test.js (2 tests) 3ms

✓ sumar > suma dos números positivos

✓ sumar > maneja el cero

Test Files 1 passed (1)

Tests 2 passed (2)

Y cuando algo falla, Vitest no solo dice "✗" —te muestra qué esperaba, qué recibió y en qué línea, con colores. Rompamos sumar (que reste) para ver el rojo:

terminal

pnpm test

❯ src/matematicas.test.js (2 tests | 1 failed)

✓ sumar > maneja el cero

✗ sumar > suma dos números positivos

# AssertionError: expected -1 to be 5

# → expected 5

# → received -1

# src/matematicas.test.js:6:26

Ese informe —esperado vs recibido vs ubicación exacta— es lo que hace que un test rojo sea un placer y no un misterio: te lleva de la mano al bug. Es tu throw new Error("esperaba... llegó...") de la lección anterior, pero pulido a nivel producción.

Los matchers que más vas a usar

toBe y toEqual ya los tienes. Vitest trae decenas; estos son tu pan de cada día:

matchers esenciales
// igualdad
expect(2 + 3).toBe(5);                    // === (primitivos)
expect({ a: 1 }).toEqual({ a: 1 });       // contenido (objetos/arrays)

// números
expect(precio).toBeGreaterThan(0);
expect(0.1 + 0.2).toBeCloseTo(0.3);       // ¡el 0.1+0.2 del módulo 6!

// verdad y existencia
expect(activo).toBe(true);
expect(usuario).toBeDefined();
expect(resultado).toBeNull();

// arrays y strings
expect([1, 2, 3]).toContain(2);
expect("hola mundo").toContain("mundo");
expect(lista).toHaveLength(3);

// errores: ¿esta función LANZA?
expect(() => dividir(1, 0)).toThrow("dividir entre cero");

// negar cualquiera con .not
expect(sumar(2, 2)).not.toBe(5);

Fíjate en dos joyas. toBeCloseTo resuelve el famoso 0.1 + 0.2 !== 0.3 del módulo 6: compara con tolerancia, como se debe comparar decimales. Y toThrow verifica que una función LANCE un error —así testeas el blindaje que hiciste en el módulo 15: no que devuelva algo, sino que se niegue correctamente.

El modo watch: tu copiloto

Lo que engancha de Vitest: por defecto se queda CORRIENDO y vigilando tus archivos. Guardas un cambio y re-testea solo lo afectado, al instante:

terminal

pnpm test

✓ 12 passed (12)

# (Vitest sigue observando... guarda un archivo y vuelve a correr)

PASS Waiting for file changes...

Con watch activo, escribes código con la red siempre puesta: cada guardado te confirma en verde que no rompiste nada, o te avisa en rojo al segundo. Para una sola corrida (en CI, por ejemplo) se usa vitest run. Así corre CodeForge sus 40 tests del motor de gamificación antes de cada deploy —los que mantienen que la XP y las rachas nunca se calculen mal.

Quieres verificar que tu función retirar(saldo, monto) LANZA un error cuando el monto supera el saldo. ¿Cuál expect es correcto?

Mini-reto

Prepara el terreno (en tu máquina, no en un playground): 1) crea una carpeta, pnpm init, pnpm add -D vitest y el script "test": "vitest"; 2) escribe esPar.js que exporte esPar(n) y esPar.test.js con tres it (par, impar, cero) usando describe; 3) corre pnpm test, ponlo verde, luego rompe la función y disfruta el rojo detallado. Sentir el ciclo en tu propia terminal es el objetivo.

Qué sigue

Ya corres Vitest. Pero escribir tests que PASEN es fácil; escribir tests que VALGAN la pena es un arte: nombres claros, un concepto por test, y sobre todo los casos límite —el vacío, el negativo, el null que nadie esperaba. La próxima lección te enseña a pensar como quien intenta ROMPER el código.