JavaScript de Cero a Experto / Testing con Vitest
Vitest de verdad: describe, it, expect
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):
pnpm add -D vitestLuego, en package.json, un script para correrlo:
{
"scripts": {
"test": "vitest"
}
}Vitest busca automáticamente archivos que terminen en .test.js o
.spec.js. Pongamos la función y su test:
export function sumar(a, b) {
return a + b;
}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:
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:
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:
// 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:
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.