Tests unitaires JavaScript et TypeScript dans Visual Studio

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

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\18\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

Écrire des tests unitaires pour ASP.NET Core

Pour ajouter la prise en charge des tests unitaires de JavaScript et De TypeScript dans un projet ASP.NET Core, vous devez ajouter la prise en charge des tests unitaires, npm et 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 ASP.NET Core Model-View-Controller, et inclut l’ajout d’un test unitaire Jest ou Mocha.

1. Créez un projet ASP.NET modèle principalView-Controller.

   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 par un modèle de projet standard ASP.NET Core.

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

3. Dans l’onglet Parcourir, recherchez les packages suivants et installez chacun d’eux :

   • Microsoft.TypeScript.MSBuild
   • npm

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

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 framework de test. Vous pouvez spécifier Tape ou Jasmine à la place.

   • Jest
   • Mocha

   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>
   

6. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud de 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
   • Mocha

   {
     "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 du exclure section.

   Les scripts dossier vous permettent de placer 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 les 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 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 apparaisse à nouveau. Vous pouvez également ajouter les entrées de package à 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
   • Mocha

   • jest
   • support-éditeur-jest
   • @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"
   

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

    • Jest
    • Mocha

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

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

    Cela intègre le nouveau fichier au dossier test.

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

    • Jest
    • Mocha

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

13. Ouvrez l’Explorateur de tests (choisissez Test>Windows>Explorateur de tests) et Visual Studio découvre et affiche des tests. Si les tests ne s’affichent pas initialement, régénérez le projet pour actualiser la liste. L’illustration suivante montre l’exemple Jest, avec deux fichiers de test unitaire différents.

    

    Remarque

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

    Important

    Si la sortie des tests dans la fenêtre Sortie affiche une ReadOnlySpan erreur lors de la découverte des tests, utilisez la solution de contournement suivante pour un problème MSBuild connu. Dans Visual Studio 2022, ouvrez le dossier, Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform, puis renommez System.Memory.dll en un autre nom. Ce correctif active la découverte de tests.

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 également exécuter des tests en sélectionnant un ou plusieurs tests ou groupes, en cliquant avec le bouton droit et en sélectionnant Exécuter dans le menu contextuel. Les tests s’exécutent 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 avec le bouton droit et en sélectionnant Déboguer.

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

capture d’écran

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