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