Déboguer les Tests en NG Test

Je suis Angulaire à l'aide de la CLI et VS code mais aucun de mes points d'arrêt dans mon spec fichiers semblent obtenir frappé quand je lance ng test?

Dois-je faire certaines config?

  • avez-vous essayé de débogage via chrome dev tools? vous pouvez faire cela comme une solution de contournement jusqu'à ce que vous trouver la bonne façon de le faire. autant que je sache, vous devez configurer le .vscode/lancement.fichier json, je ne sais pas avec quoi
  • C'est essentiellement ce que je demande... il fonctionne très bien pour le débogage mon code... il suffit de ne pas savoir/comprendre comment le faire pour ng test!
  • Donc, vous voulez exécuter des tests unitaires en mode debug? Sont que vous essayez de déboguer des tests unitaires?
  • oui c'est exactement ce que je veux faire
InformationsquelleAutor 72GM | 2017-05-11
  1. 28

    Autres réponses sont tout à fait valide les réponses, mais ayant été en utilisant Angulaire pour près de 18 mois maintenant, j'ai tendance à le faire dans le navigateur chrome outils!

    Exécuter ng test, puis la touche f12 et trouver le fichier de spec via le webpack contexte. Ajouter un point d'arrêt(s) et de les actualiser et il va frapper a dit des points d'arrêt. Comme par capture d'écran

    Déboguer les Tests en NG Test

    • que dire de "DEBUG" bouton dans l'INTERFACE utilisateur. Quelle est la fonctionnalité de celui-ci ?
    • appuyez sur et trouver
    InformationsquelleAutor 72GM
  2. 14

    Dans la nouvelle version de VSCode (1.14.0) ils suivent ce recette:

    Vous pouvez déboguer l'Angulaire de l'App ( y compris les tests unitaires ), la recette est simple.

    InformationsquelleAutor titusfx
  3. 11

    C'est ce qui a fonctionné pour moi Angulaire de la CLI 1.0.* et Chrome sur Windows 7.

    Modifier les fichiers de configuration

    Dans votre répertoire racine du projet open karma.conf.js. Juste après singleRun: false ajouter , suivie par la présente section:

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

    Ajouter une configuration à .vscode/launch.json:

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

    Démarrer le débogage

    1. Exécuter ng test --browsers ChromeDebug

    2. Attendre pour le navigateur google Chrome pour commencer. Vous verrez quelque chose comme ceci en ligne de commande:

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

    3. Définir le point d'arrêt dans l'une de vos .spec.ts fichiers.

    4. Dans le Code de Visual Studio, choisissez Unit tests debug configuration et appuyez sur la touche F5 ("Démarrer le Débogage" bouton).

    5. Appuyez sur Shift+Ctrl+F5 ou actualiser le Chrome fenêtre pour relancer les tests et atteindre le point d'arrêt.

    Pour des raisons de commodité

    Vous pouvez également modifier votre forfait.json et ajouter un nouveau script:

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

    Alors la prochaine fois que vous voulez commencer ng test avec le débogage juste lancer:

    npm run test-debug

    Références:

    InformationsquelleAutor Andrei Sinitson
  4. 3

    Juste pour ajouter d'autres réponses:

    • Suivez les instructions @titusfx mentionné.
    • Dans le terminal exécuter ng test.
    • Dans le Code de Visual Studio vue de débogage, sélectionnez ng test à partir de la liste déroulante.
    • vous devrez peut-être actualiser le navigateur si vous ne frappez le saut de points pour la première fois.

    Déboguer les Tests en NG Test

    InformationsquelleAutor A-Sharabiani
  5. 0

    Vous pouvez simplement ajouter un 'debugger'
    où vous voulez déboguer et exécuter

    ng test

    Lorsque le navigateur google chrome s'ouvre, activez les outils de dev et il va s'arrêter sur votre 'debugger'

    InformationsquelleAutor Joao Vitor Marques