CodeForge

JavaScript de Cero a Experto / Testing con Vitest

Construye tu propio expect: un framework en 15 líneas

Teoría25 min20 XP

Antes de usar Vitest, vas a construirlo —en miniatura. Un framework de testing no es magia: son un puñado de funciones que ejecutan comprobaciones y te dicen cuáles pasaron. Al escribirlo con tus manos, cuando abras Vitest en la próxima lección vas a reconocer cada pieza. Es el método de este curso: primero por dentro, después la herramienta real.

La maquinaria bajo el capó

expect().toBe(): el corazón

Empecemos por lo mínimo que sirve. expect(valor) devuelve un objeto con métodos de comparación (los "matchers"). El más básico compara con ===:

Léelo despacio: expect(sumar(2, 3)) guarda el valor RECIBIDO, y .toBe(5) lo compara con el ESPERADO, imprimiendo ✓ o ✗. Esa frase —expect(...).toBe (...)— es, palabra por palabra, la misma que escribirás en Vitest. Acabas de construir el gesto central del testing en siete líneas.

test(): agrupar y etiquetar

Ahora envolvamos cada comprobación en un test() con nombre, para que el marcador sea legible. Y agreguemos más matchers —un juez necesita varias formas de comparar:

Mira lo que lograste: un test() que atrapa el fallo (con el try/catch del módulo 15 —¿ves cómo todo se conecta?), lo marca ✗ y sigue con los demás en vez de morir. Y un matcher nuevo, toEqual, que compara CONTENIDO en vez de identidad —crucial para objetos y arrays. Ese detalle es la trampa más famosa del testing, y la desarmamos ahora mismo.

toBe vs toEqual: la trampa de los objetos

Escribes expect(obtenerUsuario()).toBe({ id: 1, nombre: 'Sara' }) y el test falla, aunque la función devuelve exactamente ese objeto. ¿Por qué?

Mini-reto

Extiende tu juez: 1) agrega a expect un matcher toBeGreaterThan(n) que lance si recibido <= n; 2) agrega toContain(item) que verifique que un array incluye un elemento; 3) escribe tres test() que los usen sobre funciones tuyas, incluyendo uno que falle a propósito para ver el ✗ con su mensaje. Cada matcher que construyes es uno que vas a reconocer en Vitest.

Qué sigue

Tienes el framework por dentro. Ahora conoce el de verdad: Vitest instalado en un proyecto real, con describe, it, expect y decenas de matchers ya hechos, corriendo en modo watch que re-testea al guardar. Vas a reconocer todo —porque acabas de construir su corazón.