angular - tab - Pruebas de depuración en la prueba NG

settitle angular

Question

Estoy utilizando Angular CLI y el código VS, pero ninguno de mis puntos de interrupción en mis archivos de especificaciones parece ser afectado cuando ejecuto la prueba ng.

¿Necesito hacer alguna configuración?

Answer 1

En la nueva versión de VSCode (1.14.0) siguen esta recipe :

Puede depurar la aplicación Angular por completo (incluidas las pruebas unitarias), la receta es sencilla.

Answer 2

Esto es lo que me funcionó con Angular CLI 1.0. * Y Chrome en Windows 7.

Cambiar archivos de configuracion

En el directorio raíz de su proyecto, abra karma.conf.js . Justo después de singleRun: false add , seguido de esta sección:

 customLaunchers: {
ChromeDebug: {
base: ''Chrome'',
flags: [ ''--remote-debugging-port=9333'' ]
}
}

Agregue la configuración a .vscode/launch.json :

 {
"type": "chrome",
"request": "attach",
"name": "Unit tests",
"address": "localhost",
"port": 9333,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},

Iniciar la depuración

1. Ejecutar ng test --browsers ChromeDebug

2. Espera a que se inicie el navegador Chrome. Verás algo como esto en la línea de comandos:

   01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency

3. Establezca el punto de interrupción en uno de sus archivos .spec.ts .

4. En el código de Visual Studio, elija la Unit tests configuración de la depuración y presione F5 (botón "Iniciar depuración").

5. Presiona Shift+Ctrl+F5 o actualiza la ventana de Chrome para volver a ejecutar las pruebas y llegar al punto de interrupción.

Por conveniencia

También puede modificar su package.json y agregar un nuevo script:

"test-debug": "ng test --browsers ChromeDebug",

Luego, la próxima vez que desee iniciar ng test con depuración, simplemente ejecute:

npm run test-debug

Referencias:

• Depuración de las pruebas de la Unidad Jasmine que se ejecutan con el corredor Karma en el Código VS
• Depuración de pruebas de karma con VSCode

Answer 3

Las otras respuestas son respuestas completamente válidas, pero después de 18 años de uso de Angular, tiendo a hacerlo en el navegador: ¡las herramientas de Chrome!

Ejecute ng test, luego f12 y busque el archivo de especificaciones a través del contexto del paquete web. Agregue un punto de interrupción (s) y actualice y llegará a dichos puntos de interrupción. Según captura de pantalla

Answer 4

Solo para agregar a las otras respuestas:

• Siga las instructions mencionadas en @titusfx.
• En la terminal ejecuta la ng test .
• En la vista de depuración de Visual Studio Code, seleccione ng test del menú desplegable.
• es posible que deba actualizar el navegador si no puede alcanzar los puntos de ruptura la primera vez.