DEV Community

Cover image for Deja de Ejecutar Toda Tu Suite de Pruebas en Cada Commit 🚫🧪
Alan Schio
Alan Schio

Posted on

Deja de Ejecutar Toda Tu Suite de Pruebas en Cada Commit 🚫🧪

#javascript #testing #jest #webdev

Todos hemos pasado por esto. Haces una pequeña corrección en un archivo, haces commit de tus cambios y te quedas viendo cómo toda tu suite de pruebas se ejecuta durante los próximos 5 minutos. ¿Te suena familiar?

¿Y si te dijera que hay una manera de ejecutar solo las pruebas que están realmente relacionadas con tus cambios? Conoce test-staged.

El Problema

Ejecutar toda tu suite de pruebas antes de cada commit es:

  • ⏰ Lento - Desperdiciando tiempo precioso de desarrollo
  • 😤 Frustrante - Rompiendo tu estado de flujo
  • 🔄 Redundante - Probando código que ni siquiera tocaste

La mayoría de los desarrolladores:

  1. Se saltan las pruebas completamente (¡peligroso!)
  2. Esperan largas ejecuciones de pruebas (¡frustrante!)
  3. Hacen push y rezan para que el CI atrape los problemas (¡arriesgado!)

Tiene que haber una mejor manera.

La Solución: test-staged

test-staged es como lint-staged, pero para pruebas. Identifica inteligentemente qué pruebas están relacionadas con tus cambios en stage y ejecuta solo esas.

¿Qué Tan Inteligente Es?

test-staged usa diferentes estrategias dependiendo de tu test runner:

  • Jest/Vitest: Usa análisis nativo de grafo de dependencias (--findRelatedTests / vitest related)
  • Mocha/Ava: Mapea inteligentemente archivos fuente a archivos de prueba (ej: user.ts → user.test.ts, src/api/users.ts → src/api/__tests__/users.test.ts)

Empezando en 30 Segundos

La instalación es muy sencilla:

npm install -D test-staged
# o
pnpm add -D test-staged
# o
yarn add -D test-staged
# o
bun add -D test-staged
Enter fullscreen mode Exit fullscreen mode

Y eso es todo. En serio. Es cero configuración por defecto.

Configúralo como un Hook de Pre-Commit

La magia ocurre cuando lo combinas con Husky:

# Instala husky
npm install -D husky
npx husky init

# Agrega test-staged al pre-commit
echo "npx test-staged" > .husky/pre-commit
Enter fullscreen mode Exit fullscreen mode

Ahora cada commit:

  1. ✅ Solo ejecutará pruebas relacionadas con tus cambios
  2. ⚡ Se completará en segundos en lugar de minutos
  3. 🛡️ Bloqueará commits si las pruebas fallan

Ejemplos del Mundo Real

Ejemplo 1: Cambio en un Solo Archivo

Estás trabajando en una funcionalidad de autenticación de usuario:

# Modificaste:
git add src/auth/login.ts

# test-staged ejecuta SOLO:
src/auth/__tests__/login.test.ts
src/integration/__tests__/auth-flow.test.ts  # (porque importa login.ts)

# NO ejecuta:
src/payments/__tests__/*.test.ts  ❌
src/dashboard/__tests__/*.test.ts  ❌
(y más de 200 pruebas no relacionadas)  ❌
Enter fullscreen mode Exit fullscreen mode

Resultado: Las pruebas se completan en 3 segundos en lugar de 2 minutos.

Ejemplo 2: Refactorizando Utilidades

Refactorizaste una función utilitaria:

# Modificaste:
git add src/utils/formatDate.ts

# test-staged automáticamente encuentra TODAS las pruebas que dependen de ella:
src/utils/__tests__/formatDate.test.ts
src/components/__tests__/DatePicker.test.ts
src/pages/__tests__/Dashboard.test.ts
Enter fullscreen mode Exit fullscreen mode

Lo suficientemente inteligente para capturar dependencias indirectas, lo suficientemente rápido para mantenerte productivo.

Ejemplo 3: Soporte para Monorepo

¿Trabajando en un monorepo? test-staged te cubre:

# Estás en packages/ui
git add Button.tsx

# Solo ejecuta:
packages/ui/__tests__/Button.test.tsx

# No ejecuta pruebas de:
packages/api/  ❌
packages/cli/  ❌
Enter fullscreen mode Exit fullscreen mode

Por Qué Te Encantará

🎯 Cero Configuración

Detecta automáticamente:

  • Tu gestor de paquetes (npm, pnpm, yarn, bun)
  • Tu test runner (Jest, Vitest, Mocha, Ava)
  • Tu estructura de proyecto (monorepo o paquete único)

⚡ Extremadamente Rápido

En un proyecto típico con 500+ pruebas:

  • Antes: 2-3 minutos por commit
  • Después: 2-5 segundos por commit

Eso es una mejora de 36x en uso del mundo real.

🧠 Realmente Inteligente

Para Jest y Vitest, usa el grafo de dependencias nativo:

// Si cambias userService.ts
// encuentra las pruebas que lo importan:
import { createUser } from './userService'
import { validateUser } from './userService'
Enter fullscreen mode Exit fullscreen mode

Para Mocha y Ava, usa coincidencia de patrones:

src/models/user.ts → src/models/user.test.ts
src/api/users.ts   → src/api/__tests__/users.test.ts
lib/parser.ts      → lib/parser.spec.ts
Enter fullscreen mode Exit fullscreen mode

🛠️ Personalizable Cuando Sea Necesario

Aunque funciona sin configuración, puedes personalizarlo:

// package.json
{
  "test-staged": {
    "runner": "jest",
    "mode": "related",
    "testExtensions": [".test", ".spec", ".e2e"]
  }
}
Enter fullscreen mode Exit fullscreen mode

O crea un .test-stagedrc.json:

{
  "runner": "vitest",
  "testExtensions": [".test", ".spec", "Test", "E2E"]
}
Enter fullscreen mode Exit fullscreen mode

Test Runners Soportados

Runner Método de Detección
Vitest ⭐ Nativo vitest related (grafo de dependencias)
Jest ⭐ Nativo --findRelatedTests (grafo de dependencias)
Mocha ✅ Coincidencia de patrones de archivo
Ava ✅ Coincidencia de patrones de archivo

¡Más runners próximamente!

La Experiencia del Desarrollador

Así es como se ve tu flujo de trabajo:

# Haz tus cambios
vim src/components/Button.tsx

# Ponlos en stage
git add src/components/Button.tsx

# Commit (test-staged se ejecuta automáticamente vía hook de pre-commit)
git commit -m "fix: estado hover del botón"

# Salida:
Running tests for staged files...
✓ src/components/__tests__/Button.test.tsx (2 tests) 0.8s

Tests passed! ✨
[main abc1234] fix: estado hover del botón
Enter fullscreen mode Exit fullscreen mode

Sin comandos de prueba manuales. Sin espera. Sin commits rotos.

Preguntas Frecuentes

P: ¿Y si quiero ejecutar todas las pruebas?

R: Solo omite el hook: git commit --no-verify o ejecuta tu suite de pruebas manualmente.

P: ¿Funciona con CI?

R: ¡Sí! Tu CI aún debe ejecutar la suite de pruebas completa. test-staged es para velocidad en desarrollo local.

P: ¿Qué pasa con las pruebas de integración/E2E?

R: test-staged las encontrará si importan tus archivos modificados. También puedes personalizar qué pruebas ejecutar.

P: ¿Puedo usarlo sin hooks de Git?

R: ¡Absolutamente! Solo ejecuta npx test-staged manualmente cuando quieras.

Pruébalo Hoy

Empieza en menos de un minuto:

npm install -D test-staged husky
npx husky init
echo "npx test-staged" > .husky/pre-commit
Enter fullscreen mode Exit fullscreen mode

Luego haz un commit y observa la magia suceder. ✨

Enlaces

En Resumen

Si todavía estás ejecutando toda tu suite de pruebas en cada commit, estás perdiendo tiempo. test-staged te da:

  • ⚡ Commits más rápidos (segundos en lugar de minutos)
  • 🎯 Mejor enfoque (prueba solo lo que cambió)
  • 🛡️ Código más seguro (las pruebas realmente se ejecutan en lugar de ser omitidas)
  • 🚀 Mejor DX (cero configuración, simplemente funciona)

¡Pruébalo y dime qué te parece! Tu yo del futuro te lo agradecerá. 🙌

¿Has probado test-staged? ¿Cuál es tu estrategia actual de pruebas en pre-commit? ¡Comparte en los comentarios abajo! 👇

Top comments (0)