Testing

Intermedio
VSCode
VSCode
Actualizado: 14/07/2025

Ejecutar un test en vscode

Visual Studio Code proporciona una experiencia integrada para ejecutar tests directamente desde el editor, eliminando la necesidad de cambiar constantemente entre el terminal y el código. Esta funcionalidad se basa en el Test Explorer, que detecta automáticamente los frameworks de testing más populares y ofrece múltiples formas de ejecutar tests según tus necesidades específicas.

Test Explorer y detección automática

El Test Explorer aparece automáticamente en la barra lateral cuando VS Code detecta tests en tu proyecto. Para proyectos JavaScript, reconoce frameworks como Jest, Mocha, Vitest y otros sin configuración adicional. La detección se activa al abrir un proyecto que contenga archivos de test con las convenciones de nomenclatura estándar:

// Archivos detectados automáticamente
math.test.js
user.spec.js
components/__tests__/Button.test.js

Una vez detectados, los tests aparecen organizados jerárquicamente en el Test Explorer, mostrando la estructura de carpetas, archivos de test y casos individuales. Cada elemento incluye indicadores de estado que se actualizan en tiempo real: verde para tests exitosos, rojo para fallos, y amarillo para tests omitidos.

Métodos de ejecución

VS Code ofrece múltiples formas de ejecutar tests, adaptándose a diferentes flujos de trabajo:

Ejecución desde Test Explorer:

El panel lateral permite ejecutar tests con granularidad variable. Puedes hacer clic en el icono de reproducción junto a cualquier elemento para ejecutar desde un test individual hasta toda la suite completa.

Ejecución desde el editor:

Los CodeLens aparecen directamente sobre cada función de test en el editor, proporcionando botones "Run Test" y "Debug Test" sin necesidad de navegar al Test Explorer:

describe('Calculator', () => {
  // CodeLens aparece aquí: Run | Debug
  it('should add two numbers correctly', () => {
    expect(add(2, 3)).toBe(5);
  });
  
  // CodeLens aparece aquí: Run | Debug  
  it('should handle negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

Comandos de teclado:

  • Ctrl+; A ejecuta todos los tests del workspace
  • Ctrl+; F ejecuta todos los tests del archivo actual
  • Ctrl+; R ejecuta el último test ejecutado

Test Results Panel

Cuando ejecutas tests, el Test Results Panel se abre automáticamente en la parte inferior, mostrando información detallada sobre la ejecución. Este panel incluye:

Información de ejecución:

  • Tiempo total de ejecución
  • Número de tests ejecutados, exitosos y fallidos
  • Output completo de cada test runner

Navegación rápida: Los resultados son clickeables, permitiendo saltar directamente a la línea específica donde ocurrió un fallo. Los mensajes de error incluyen stack traces completos con enlaces a archivos y números de línea.

Watch Mode automático

Una característica especialmente útil es el Watch Mode, que ejecuta automáticamente los tests relevantes cuando modificas archivos relacionados. Para activarlo:

  • Haz clic en el icono de "watch" en el Test Explorer
  • Usa el comando Test: Toggle Auto Run

En Watch Mode, VS Code ejecuta inteligentemente solo los tests afectados por tus cambios, optimizando el tiempo de feedback durante el desarrollo:

// Al modificar este archivo...
function multiply(a, b) {
  return a * b; // Cambio aquí
}

// ...se ejecutan automáticamente solo estos tests:
// multiply.test.js
// calculator.test.js (si importa multiply)

Configuración de frameworks

Para proyectos que requieren configuración específica, VS Code permite personalizar la detección y ejecución de tests. En el archivo settings.json del workspace:

{
  "testing.automaticallyOpenPeekView": "failureInVisibleDocument",
  "testing.defaultGutterClickAction": "run",
  "testing.followRunningTest": "allOpenTabs"
}

Estas configuraciones controlan el comportamiento automático del Test Explorer, como cuándo mostrar resultados detallados y cómo manejar la navegación durante la ejecución de tests.

La integración nativa con frameworks populares significa que la mayoría de proyectos funcionarán inmediatamente sin configuración adicional, permitiendo que te concentres en escribir tests efectivos en lugar de configurar herramientas.

Fuentes y referencias

Documentación oficial y recursos externos para profundizar en VSCode

Documentación oficial de VSCode
Alan Sastre - Autor del tutorial

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, VSCode es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.

Más tutoriales de VSCode

Explora más contenido relacionado con VSCode y continúa aprendiendo con nuestros tutoriales gratuitos.

Aprendizajes de esta lección

  • Comprender cómo Visual Studio Code detecta y organiza automáticamente los tests en un proyecto.
  • Aprender a ejecutar tests desde diferentes interfaces: Test Explorer, editor y comandos de teclado.
  • Conocer el funcionamiento y utilidad del panel de resultados de tests para depurar errores.
  • Entender el modo Watch para la ejecución automática de tests tras cambios en el código.
  • Saber configurar opciones específicas para frameworks de testing en VS Code.