Testing unità di codice JavaScript e TypeScript in Visual Studio

È possibile scrivere ed eseguire unit test in Visual Studio usando alcuni dei framework JavaScript più diffusi senza dover passare a un prompt dei comandi. Sono supportati entrambi i progetti Node.js e ASP.NET Core.

I framework supportati sono:

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

Scrivere unit test per un progetto basato sull'interfaccia della riga di comando (con estensione esproj)

I progetti basati sull'interfaccia della riga di comando supportati in Visual Studio 2022 funzionano con Esplora test. Jest è il framework di test predefinito per i progetti React e Vue e Karma e Jasmine viene usato per i progetti Angular. Per impostazione predefinita, sarà possibile eseguire i test predefiniti forniti da ogni framework, nonché eventuali test aggiuntivi scritti. È sufficiente premere il pulsante Esegui in Esplora test. Se Esplora test non è già aperto, è possibile trovarlo selezionando Esplora test> nella barra dei menu.

Per eseguire unit test dalla riga di comando, fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni, scegliere Apri nel terminale ed eseguire il comando specifico per il tipo di test.

Per informazioni sulla configurazione degli unit test, vedere quanto segue:

• Test di React con Jest
• Test angular
• Test di Vue.js

Di seguito è riportato un semplice esempio. Tuttavia, usare i collegamenti precedenti per informazioni complete.

Aggiungere uno unit test (con estensione esproj)

L'esempio seguente si basa sul modello di progetto React TypeScript fornito in Visual Studio 2022 versione 17.8 o successiva, ovvero il modello di progetto React TypeScript autonomo. Per Vue e Angular, i passaggi sono simili.

1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto React e scegliere Modifica file di progetto.

2. Assicurarsi che nel file con estensione esproj siano presenti le proprietà seguenti con i valori visualizzati.

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

   Questo esempio specifica Jest come framework di test. In alternativa, è possibile specificare Mocha, Tape o Jasmine.

   L'elemento JavaScriptTestRoot specifica che gli unit test si troveranno nella cartella src della radice del progetto.

3. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo npm e scegliere Installa nuovi pacchetti npm.

   Usare la finestra di dialogo di installazione del pacchetto npm per installare i pacchetti npm seguenti:

   • jest
   • jest-editor-support

   Questi pacchetti vengono aggiunti al file package.json in dipendenze.

4. In package.json aggiungere la test sezione alla fine della scripts sezione:

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

5. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella src e scegliere Aggiungi>nuovo elemento e quindi aggiungere un nuovo file denominato App.test.tsx.

   Verrà aggiunto il nuovo file nella cartella src.

6. Aggiungere il codice seguente a App.test.tsx.

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

7. Aprire Esplora test (scegliere Esplora>test) e Visual Studio individua e visualizza i test. Se inizialmente i test non vengono visualizzati, ricompilare il progetto per aggiornare l'elenco.

   

   Nota

   Per TypeScript, non usare l'opzione outfile in tsconfig.json, perché Esplora test non sarà in grado di trovare gli unit test. È possibile usare l'opzione outdir , ma assicurarsi che i file di configurazione come package.json e tsconfig.json si trovino nella radice del progetto.

Eseguire test (con estensione esproj)

È possibile eseguire i test facendo clic sul collegamento Esegui tutti in Esplora test. In alternativa, è possibile eseguire test selezionando uno o più test o gruppi, facendo clic con il pulsante destro del mouse e scegliendo Esegui dal menu di scelta rapida. I test vengono eseguiti in background ed Esplora test aggiorna e visualizza automaticamente i risultati. È anche possibile eseguire il debug dei test selezionati facendo clic con il pulsante destro del mouse e selezionando Debug.

La figura seguente mostra l'esempio con un secondo unit test aggiunto.

Per alcuni framework di unit test, gli unit test vengono in genere eseguiti sul codice JavaScript generato.

Nota

Nella maggior parte degli scenari TypeScript è possibile eseguire il debug di uno unit test impostando un punto di interruzione nel codice TypeScript, facendo clic con il pulsante destro del mouse su un test in Esplora test e scegliendo Debug. In scenari più complessi, ad esempio alcuni scenari che usano mappe di origine, potrebbe essere difficile raggiungere i punti di interruzione nel codice TypeScript. Come soluzione alternativa, provare a usare la debugger parola chiave .

Nota

I test di profilatura e il code coverage non sono attualmente supportati.

Scrivere unit test per ASP.NET Core

Per aggiungere il supporto per unit test di JavaScript e TypeScript in un progetto ASP.NET Core, è necessario aggiungere il supporto di TypeScript, Npm e unit testing al progetto includendo i pacchetti NuGet necessari.

Aggiungere uno unit test (ASP.NET Core)

L'esempio seguente si basa sul modello di progetto ASP.NET Core Model-View-Controller e include l'aggiunta di uno unit test Jest o Mocha.

1. Creare un progetto ASP.NET Core Model-View-Controller.

   Per un progetto di esempio, vedere Aggiungere TypeScript a un'app ASP.NET Core esistente. Per il supporto degli unit test, è consigliabile iniziare con un modello di progetto standard ASP.NET Core.

2. In Esplora soluzioni (riquadro destro) fare clic con il pulsante destro del mouse sul nodo del progetto ASP.NET Core e scegliere Gestisci pacchetti NuGet per soluzioni.

3. Nella scheda Sfoglia cercare i pacchetti seguenti e installarli:

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

   Usare il pacchetto NuGet per aggiungere il supporto TypeScript anziché il pacchetto TypeScript npm.

4. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Modifica file di progetto.

   Il file con estensione csproj viene aperto in Visual Studio.

5. Aggiungere gli elementi seguenti al file con estensione csproj nell'elemento PropertyGroup .

   Questo esempio specifica Jest o Mocha come framework di test. In alternativa, è possibile specificare Tape o Jasmine.

   Jest

   L'elemento JavaScriptTestRoot specifica che gli unit test si troveranno nella cartella test della radice del progetto.

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

   Mocha

   L'elemento JavaScriptTestRoot specifica la posizione per gli unit test. Per semplificare la configurazione per Mocha, in questo esempio la radice di test viene puntata alla cartella di output *wwwroot\js\tests*.

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

6. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo del progetto ASP.NET Core e scegliere Aggiungi > nuovo elemento. Scegliere Il file di configurazione JSON TypeScript e quindi selezionare Aggiungi.

   Se non vengono visualizzati tutti i modelli di elemento, selezionare Mostra tutti i modelli e quindi scegliere il modello di elemento.

   Visual Studio aggiunge il file tsconfig.json alla radice del progetto. È possibile usare questo file per configurare le opzioni per il compilatore TypeScript.

7. Aprire tsconfig.json e sostituire il codice predefinito con il codice seguente:

   Jest

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

   Per Jest, se si vogliono compilare test TypeScript in JavaScript, rimuovere la cartella test dalla sezione exclude .

   La cartella scripts consente di inserire il codice TypeScript per l'app. Per un progetto di esempio che aggiunge codice, vedere Aggiungere TypeScript a un'app ASP.NET Core esistente.

   Mocha

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

   La cartella scripts consente di inserire il codice TypeScript per l'app. Per un progetto di esempio che aggiunge codice, vedere Aggiungere TypeScript a un'app ASP.NET Core esistente.

8. Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Aggiungi>nuovo elemento (oppure premere CTRL + MAIUSC + A). Usare la casella di ricerca per trovare il file npm, scegliere il file di configurazione npm, usare il nome predefinito e fare clic su Aggiungi.

   Un file package.json viene aggiunto alla radice del progetto.

9. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo npm in Dipendenze e scegliere Installa nuovi pacchetti npm.

   Nota

   In alcuni scenari, Esplora soluzioni potrebbe non visualizzare il nodo npm a causa di un problema noto descritto qui. Se è necessario visualizzare il nodo npm, è possibile scaricare il progetto (fare clic con il pulsante destro del mouse sul progetto e scegliere Scarica progetto) e quindi ricaricare il progetto per visualizzare nuovamente il nodo npm. In alternativa, è possibile aggiungere le voci del pacchetto a package.json e installarle compilando il progetto.

   Usare la finestra di dialogo di installazione del pacchetto npm per installare i pacchetti npm seguenti:

   Jest

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

   Questi pacchetti vengono aggiunti al file package.json in devDependencies.

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

   Mocha

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

   Questi pacchetti vengono aggiunti al file package.json in devDependencies.

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

10. In package.json aggiungere la test sezione alla fine della scripts sezione:

    Jest

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

    Mocha

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

11. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella di test e scegliere Aggiungi>nuovo elemento, quindi aggiungere un nuovo file denominato App.test.tsx.

    Verrà aggiunto il nuovo file nella cartella di test .

12. Aggiungere il codice seguente a 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. Aprire Esplora test (scegliere Esplora>test di Windows>) e Visual Studio individua e visualizza i test. Se inizialmente i test non vengono visualizzati, ricompilare il progetto per aggiornare l'elenco. La figura seguente mostra l'esempio Jest, con due file di unit test diversi.

    

    Nota

    Per TypeScript, non usare l'opzione outfile in tsconfig.json, perché Esplora test non sarà in grado di trovare gli unit test. È possibile usare l'opzione outdir , ma assicurarsi che i file di configurazione come package.json e tsconfig.json si trovino nella radice del progetto.

Eseguire test (ASP.NET Core)

È possibile eseguire i test facendo clic sul collegamento Esegui tutti in Esplora test. In alternativa, è possibile eseguire test selezionando uno o più test o gruppi, facendo clic con il pulsante destro del mouse e scegliendo Esegui dal menu di scelta rapida. I test vengono eseguiti in background ed Esplora test aggiorna e visualizza automaticamente i risultati. È anche possibile eseguire il debug dei test selezionati facendo clic con il pulsante destro del mouse e selezionando Debug.

La figura seguente mostra l'esempio Jest, con un secondo unit test aggiunto.

Per alcuni framework di unit test, gli unit test vengono in genere eseguiti sul codice JavaScript generato.

Nota

Nella maggior parte degli scenari TypeScript è possibile eseguire il debug di uno unit test impostando un punto di interruzione nel codice TypeScript, facendo clic con il pulsante destro del mouse su un test in Esplora test e scegliendo Debug. In scenari più complessi, ad esempio alcuni scenari che usano mappe di origine, potrebbe essere difficile raggiungere i punti di interruzione nel codice TypeScript. Come soluzione alternativa, provare a usare la debugger parola chiave .

Nota

I test di profilatura e il code coverage non sono attualmente supportati.