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 PlusEjecutar 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 workspaceCtrl+; F
ejecuta todos los tests del archivo actualCtrl+; 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.
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