50% OFF Plus
--:--:--
¡Obtener!

Testing

Intermedio
VSCode
VSCode
Actualizado: 14/07/2025

¡Desbloquea el curso de VSCode completo!

IA
Ejercicios
Certificado
Entrar

Mira la lección en vídeo

Accede al vídeo completo de esta lección y a más contenido exclusivo con el Plan Plus.

Desbloquear Plan Plus

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

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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.

Aprendizajes de esta lección de VSCode

  • 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.

Completa este curso de VSCode y certifícate

Únete a nuestra plataforma de cursos de programación y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración