¿Cómo depurar las pruebas de Karma en Visual Studio Code?

Este dilema se puede tratar de diversas maneras, pero nosotros te damos la solución más completa en nuestra opinión.

Solución:

Puede depurar Karma adjuntando el depurador a una instancia de Chrome. Querrás configurar tu launch.json config a algo como esto:

    "version": "0.2.0",
    "configurations": [
        
            "type": "chrome",
            "request": "attach",
            "name": "Attach Karma Chrome",
            "address": "localhost",
            "port": 9333,
            "pathMapping": 
                "/": "$workspaceRoot/",
                "/base/": "$workspaceRoot/"
            
        
    ]

Pero también necesita ajustar su karma.conf.js configpara que inicie la instancia de Chrome con herramientas de desarrollo escuchando 9333 puerto, así:

browsers: [
  'ChromeDebugging'
],

customLaunchers: 
  ChromeDebugging: 
    base: 'Chrome',
    flags: [ '--remote-debugging-port=9333' ]
  
,

Con dicha configuración, puede ejecutar su servidor de karma (con el navegador capturado) y luego comenzar a depurar en Visual Studio.

Si desea encontrar más detalles, hice un tutorial sobre la depuración de Karma con Visual Studio Code.

Usando Angular CLI 1.7.4: con los siguientes pasos pude depurar una aplicación Angular hello world con Visual Studio Code:

1. Genere un nuevo proyecto HelloWorld:

   ng new HelloWorld

2. Abra el proyecto en Visual Studio Code

   code HelloWorld

3. Cree una nueva configuración de depuración:

   

   

4. A .vscode/launch.json El archivo se genera y se abre. Sustitúyase su contenido por el siguiente:

    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        
            "type": "chrome",
            "request": "launch",
            "name": "Karma Tests",
            "sourceMaps": true,
            "webRoot": "$workspaceRoot",
            "url": "http://localhost:9876/debug.html",
            // "runtimeArgs": [
            //     "--headless"
            // ],
            "pathMapping": 
                "/": "$workspaceRoot",
                "/base/": "$workspaceRoot/"
            ,
            "sourceMapPathOverrides": 
                "webpack:///./*": "$webRoot/*",
                "webpack:///src/*": "$webRoot/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "$webRoot/node_modules/*",
                "meteor://app/*": "$webRoot/*"
            
        
    ]

5. Abierto karma.conf.js y realiza el siguiente cambio:

   

6. Abra una terminal y comience las pruebas de karma:

   ng test

7. Abierto app.component.spec.ts y establecer un punto de ruptura:

   

8. Seleccione “Pruebas de karma” en el menú de depuración:

   

9. prensa F5 para comenzar a depurar. VSCode debe detenerse en el punto de interrupción:

   

Aquí hay una configuración más simple (en launch.json):

    "type": "chrome",
    "request": "launch",
    "name": "Test",
    "sourceMaps": true,
    "webRoot": "$workspaceRoot/Test",
    "url": "http://localhost:9876/debug.html",
    "runtimeArgs": [
        "--headless"
    ]

Importante:

• Cambiar webRoot a la carpeta desde donde Karma entrega tus pruebas.
• Esto supone que Karma se está ejecutando en el puerto 9876. Si no es así, cambie el url respectivamente.

Esta configuración es más sencilla por varias razones:

• No necesita recordar presionar el botón Depurar en la interfaz de usuario de Karma, o actualizar la página después de adjuntar el depurador.
• No necesita agregar un iniciador personalizado a su configuración de Karma. Solo tienes que asegurarte de tener singleRun: false. Incluso podrías establecer browsers: []ya que VS Code lanzará su propio navegador (en modo headless, por lo que no lo verá).
• Ejecuto en modo sin cabeza porque ya no necesita ver el navegador, ya que puede hacer la depuración en el código VS.
• Tenga en cuenta que aún debe iniciar Karma antes de iniciar el depurador. Podría mejorar esta configuración agregando un preLaunchTask que inicia Karma automáticamente. Deberá configurarlo como una tarea en segundo plano.

---

---

Utiliza Nuestro Buscador