Test unitaire JavaScript et TypeScript dans Visual Studio

Vous pouvez écrire et exécuter des tests unitaires dans Visual Studio à l’aide de certains des frameworks JavaScript les plus courants sans avoir besoin de passer à une invite de commandes. Les projets Node.js et ASP.NET Core sont pris en charge.

Les frameworks pris en charge sont :

• Mocha (mochajs.org)
• Jasmine (Jasmine.github.io)
• Tape (github.com/substack/tape)
• Jest (jestjs.io)

Écrire des tests unitaires pour un projet CLI (.esproj)

Les projets CLI pris en charge dans Visual Studio 2022 fonctionnent avec l’Explorateur de tests. Jest est l’infrastructure de test intégrée pour les projets React et Vue, et Karma et Jasmine sont utilisés pour les projets Angular. Par défaut, vous serez en mesure d’exécuter les tests par défaut fournis par chaque infrastructure, ainsi que tous les tests supplémentaires que vous écrivez. Appuyez simplement sur le bouton Exécuter dans l’Explorateur de tests. Si l’Explorateur de tests n’est pas déjà ouvert, vous pouvez le trouver en sélectionnant Test>Explorateur de tests dans la barre de menus.

Pour exécuter des tests unitaires depuis la ligne de commande, cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions, choisissez Ouvrir dans le terminal, puis exécutez la commande spécifique au type de test.

Pour plus d’informations sur la configuration des tests unitaires, consultez les éléments suivants :

• Test de React avec Jest
• Tests d’Angular
• Tests de Vue.js

Un exemple simple est également fourni ici. Utilisez toutefois les liens précédents pour obtenir des informations complètes.

Ajouter un test unitaire (.esproj)

L’exemple suivant est basé sur le modèle de projet TypeScript React, fourni dans Visual Studio 2022 (version 17.8 ou ultérieure), qui est le modèle de Projet React TypeScript autonome. Pour Vue et Angular, les étapes sont semblables.

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet React, puis choisissez Modifier le fichier projet.

2. Assurez-vous de la présence des propriétés suivantes dans le fichier .esproj avec les valeurs affichées.

   <PropertyGroup>
     <JavaScriptTestRoot>src\</JavaScriptTestRoot>
     <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
   </PropertyGroup> 
   

   Cet exemple spécifie Jest comme infrastructure de test. Vous pouvez spécifier plutôt Mocha, Tape ou Jasmine.

   L’élément JavaScriptTestRoot spécifie que vos tests unitaires vont se trouver dans le dossier tests de la racine du projet.

3. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud npm et choisissez Installer de nouveaux packages npm.

   Utilisez la boîte de dialogue d’installation du package npm pour installer les packages npm suivants :

   • jest
   • jest-editor-support

   Ces packages sont ajoutés au fichier package.json sous les dépendances.

4. Dans package.json, ajoutez la section test à la fin de la section scripts :

   "scripts": {
      ...
      "test": "jest"
   },
   

5. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier src, puis choisissez Ajouter>Nouvel élément et ajoutez un nouveau fichier nommé App.test.tsx.

   Cela ajoute le nouveau fichier dans le dossier src.

6. Ajoutez le code suivant à App.test.tsx.

   describe('testAsuite', () => {
      it('testA1', async () => {
         expect(2).toBe(2);
      });
   });
   

7. Ouvrez l’Explorateur de tests (choisissez Test>Explorateur de tests) afin que Visual Studio détecte et affiche les tests. Si les tests ne sont pas visibles au départ, regénérez le projet pour actualiser la liste.

   

   Note

   Pour TypeScript, n’utilisez pas l’option outfile dans tsconfig.json, car l’Explorateur de tests ne sera pas en mesure de trouver vos tests unitaires. Vous pouvez utiliser l’option outdir, mais assurez-vous que les fichiers de configuration tels que package.json et tsconfig.json se trouvent à la racine du projet.

Exécuter des tests (.esproj)

Vous pouvez exécuter les tests en cliquant sur le lien Exécuter tout dans l’Explorateur de tests. Vous pouvez aussi exécuter des tests en sélectionnant un ou plusieurs tests ou groupes, en effectuant un clic droit, puis en sélectionnant Exécuter dans le menu contextuel. Les tests sont exécutés en arrière-plan et l’Explorateur de tests met automatiquement à jour et affiche les résultats. En outre, vous pouvez également déboguer les tests sélectionnés en cliquant à droite et en sélectionnant Déboguer.

L’illustration suivante montre l’exemple avec un deuxième test unitaire.

Pour certaines infrastructures de test unitaire, les tests unitaires sont généralement exécutés sur le code JavaScript généré.

Remarque

Dans la plupart des scénarios TypeScript, vous pouvez déboguer un test unitaire en définissant un point d’arrêt dans le code TypeScript, en cliquant avec le bouton droit sur un test dans l’Explorateur de tests et en choisissant Déboguer. Dans des scénarios plus complexes, tels que certains scénarios qui utilisent des mappages sources, vous pouvez avoir des difficultés à atteindre les points d’arrêt dans le code TypeScript. Pour résoudre ce problème, essayez d’utiliser le mot clé debugger.

Remarque

Les tests de profilage et la couverture du code ne sont actuellement pas pris en charge.

Écrire des tests unitaires pour ASP.NET Core

Pour ajouter la prise en charge des tests unitaires de JavaScript et TypeScript dans un projet ASP.NET Core, vous devez ajouter la prise en charge des tests unitaires, de Npm et de TypeScript au projet, en incluant les packages NuGet requis.

Ajouter un test unitaire (ASP.NET Core)

L’exemple suivant est basé sur le modèle de projet modèle-vue-contrôleur ASP.NET Core et comprend l’ajout d’un test unitaire Jest ou Mocha.

1. Créez un projet modèle-vue-contrôleur ASP.NET Core.

   Pour obtenir un exemple de projet, consultez Ajouter TypeScript à une application ASP.NET Core existante. Pour la prise en charge des tests unitaires, nous vous recommandons de commencer avec un modèle de projet ASP.NET Core standard.

2. Dans l’Explorateur de solutions (volet droit), cliquez avec le bouton droit sur le nœud du projet ASP.NET Core et sélectionnez Gérer des packages NuGet pour les solutions.

3. Dans l’onglet Parcourir, recherchez les packages suivants et installez-les :

   • Microsoft.TypeScript.MSBuild
   • Npm
   • Microsoft.JavaScript.UnitTest

   Utilisez le package NuGet pour ajouter la prise en charge de TypeScript au lieu du package npm TypeScript.

4. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud du projet et choisissez Modifier le fichier projet.

   Le fichier .csproj s’ouvre dans Visual Studio.

5. Ajoutez les éléments suivants au fichier .csproj dans l’élément PropertyGroup.

   Cet exemple spécifie Jest ou Mocha comme infrastructure de test. Vous pouvez plutôt spécifier Tape ou Jasmine.

   Jest

   L’élément JavaScriptTestRoot spécifie que vos tests unitaires se trouveront dans le dossier tests de la racine du projet.

   <PropertyGroup>
      ...
      <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
      <GenerateProgramFile>false</GenerateProgramFile>
   </PropertyGroup>
   

   Mocha

   L’élément JavaScriptTestRoot spécifie l’emplacement de vos tests unitaires. Pour simplifier la configuration de Mocha, dans cet exemple, nous pointons la racine du test vers le dossier de sortie : *wwwroot\js\tests*.

   <PropertyGroup>
      ...
      <JavaScriptTestRoot>wwwroot\js\tests\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Mocha</JavaScriptTestFramework>
      <GenerateProgramFile>false</GenerateProgramFile>
   </PropertyGroup>
   

6. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud du projet ASP.NET Core, puis sélectionnez Ajouter > Nouvel élément. Choisissez le fichier de configuration JSON TypeScript, puis sélectionnez Ajouter.

   Si vous ne voyez pas tous les modèles d'élément, sélectionnez Afficher tous les modèles, puis choisissez le modèle d'élément.

   Visual Studio ajoute le fichier tsconfig.json à la racine du projet. Vous pouvez utiliser ce fichier pour configurer les options du compilateur TypeScript.

7. Ouvrez tsconfig.json et remplacez le code par défaut par le code suivant :

   Jest

   {
     "compileOnSave": true,
     "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "wwwroot/js"
     },
     "include": [
       "scripts/**/*"
     ],
     "exclude": [
      "node_modules",
      "tests"
     ]
   }
   

   Pour Jest, si vous souhaitez compiler des tests TypeScript en JavaScript, supprimez le dossier tests de la section Exclure.

   Le dossier scripts est l’endroit où vous pouvez insérer le code TypeScript pour votre application. Pour obtenir un exemple de projet qui ajoute du code, consultez Ajouter TypeScript à une application ASP.NET Core existante.

   Mocha

   {
     "compileOnSave": true,
     "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "wwwroot/js"
     },
     "include": [
        "scripts/**/*",
        "tests/**/*"
     ],
     "exclude": [
        "node_modules"
     ]
   }
   

   Le dossier scripts est l’endroit où vous pouvez insérer le code TypeScript pour votre application. Pour obtenir un exemple de projet qui ajoute du code, consultez Ajouter TypeScript à une application ASP.NET Core existante.

8. Cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions et choisissez Ajouter>Nouvel élément (ou appuyez sur Ctrl + Maj + A). Utilisez la zone de recherche pour rechercher le fichier npm, choisissez le fichier de configuration npm, utilisez le nom par défaut, puis cliquez sur Ajouter.

   Un fichier package.json est ajouté à la racine du projet.

9. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud npm sous Dépendances, puis choisissez Installer de nouveaux packages npm.

   Remarque

   Dans certains scénarios, l’Explorateur de solutions peut ne pas afficher le nœud npm en raison d’un problème connu et décrit ici. Si vous avez besoin de voir le nœud npm, vous pouvez décharger le projet (cliquez avec le bouton droit sur le projet et choisissez Décharger le projet), puis recharger le projet pour que le nœud npm réapparaisse. Vous pouvez également ajouter les entrées de package au fichier package.json et installer en créant le projet.

   Utilisez la boîte de dialogue d’installation du package npm pour installer les packages npm suivants :

   Jest

   • jest
   • jest-editor-support
   • @types/jest

   Ces packages sont ajoutés au fichier package.json sous devDependencies.

    "@types/jest": "^29.5.8",
    "jest": "^29.7.0",
    "jest-editor-support": "^31.1.2"
   

   Mocha

   • mocha
   • assert
   • @types/mocha
   • @types/node

   Ces packages sont ajoutés au fichier package.json sous devDependencies.

    "@types/mocha": "^10.0.5",
    "@types/node": "^20.9.2",
    "assert": "^2.1.0",
    "mocha": "^10.2.0"
   

10. Dans package.json, ajoutez la section test à la fin de la section scripts :

    Jest

    "scripts": {
       ...
       "test": "jest"
    },
    

    Mocha

    "scripts": {
       ...
       "test": "mocha"
    },
    

11. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier test, puis choisissez Ajouter>Nouvel élément et ajoutez un nouveau fichier nommé App.test.tsx.

    Cela ajoute le nouveau fichier dans le dossier test.

12. Ajoutez le code suivant à App.test.tsx.

    Jest

    describe('testAsuite', () => {
       it('testA1', async () => {
          expect(2).toBe(2);
       });
    });
    

    Mocha

    var assert = require('assert');
    
    describe('testAsuite', function () {
       it('testA1', function () {
          assert.equal(1, 1);
       })
    })
    

13. Ouvrez l’Explorateur de tests (choisissez Test>Fenêtres>Explorateur de tests), Visual Studio détecte et affiche les tests. Si les tests ne sont pas visibles au départ, regénérez le projet pour actualiser la liste. L’illustration suivante montre l’exemple Jest, avec deux fichiers différents de test unitaire.

    

    Remarque

    Pour TypeScript, n’utilisez pas l’option outfile dans tsconfig.json, car l’Explorateur de tests ne sera pas en mesure de trouver vos tests unitaires. Vous pouvez utiliser l’option outdir, mais assurez-vous que les fichiers de configuration tels que package.json et tsconfig.json se trouvent à la racine du projet.

Exécuter des tests (ASP.NET Core)

Vous pouvez exécuter les tests en cliquant sur le lien Exécuter tout dans l’Explorateur de tests. Vous pouvez aussi exécuter des tests en sélectionnant un ou plusieurs tests ou groupes, en effectuant un clic droit, puis en sélectionnant Exécuter dans le menu contextuel. Les tests sont exécutés en arrière-plan et l’Explorateur de tests met automatiquement à jour et affiche les résultats. En outre, vous pouvez également déboguer les tests sélectionnés en cliquant à droite et en sélectionnant Déboguer.

L’illustration suivante montre l’exemple Jest, avec un deuxième test unitaire.

Pour certaines infrastructures de test unitaire, les tests unitaires sont généralement exécutés sur le code JavaScript généré.

Remarque

Dans la plupart des scénarios TypeScript, vous pouvez déboguer un test unitaire en définissant un point d’arrêt dans le code TypeScript, en cliquant avec le bouton droit sur un test dans l’Explorateur de tests et en choisissant Déboguer. Dans des scénarios plus complexes, tels que certains scénarios qui utilisent des mappages sources, vous pouvez avoir des difficultés à atteindre les points d’arrêt dans le code TypeScript. Pour résoudre ce problème, essayez d’utiliser le mot clé debugger.

Remarque

Les tests de profilage et la couverture du code ne sont actuellement pas pris en charge.