Testing unità di codice JavaScript e TypeScript in Visual Studio

Se un framework non è supportato, vedere Aggiungere il supporto per un framework di unit test per informazioni sull'aggiunta del supporto.

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.

Aggiungere il supporto per un framework di unit test

È possibile aggiungere il supporto per altri framework di test implementando la logica di individuazione ed esecuzione tramite JavaScript.

A questo scopo, aggiungere una cartella con il nome del framework di test in:

<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter\TestFrameworks

Se la cartella non viene visualizzata NodeJsTools in un progetto ASP.NET Core, aggiungere il carico di lavoro di sviluppo Node.js usando il Programma di installazione di Visual Studio. Questo carico di lavoro include il supporto per il testing unità javaScript e TypeScript.

Questa cartella deve contenere un file JavaScript con lo stesso nome che esporta le due funzioni seguenti:

• find_tests
• run_tests

Per un buon esempio delle find_tests implementazioni e run_tests , vedere l'implementazione per il framework di unit testing Mocha in:

<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter\TestFrameworks\mocha\mocha.js

L'individuazione dei framework di test disponibili avviene all'avvio di Visual Studio. Se un framework viene aggiunto mentre Visual Studio è in esecuzione, riavviare Visual Studio per rilevare il framework. Il riavvio non è tuttavia necessario quando si apportano modifiche all'implementazione.

Unit test in .NET Framework

Non ci si limita alla scrittura di unit test solo nei progetti Node.js e ASP.NET Core. Quando si aggiungono le proprietà TestFramework e TestRoot a un qualsiasi progetto C# o Visual Basic, questi test vengono enumerati e possono essere eseguiti tramite la finestra Esplora Test.

A tale scopo, fare clic con il pulsante destro del mouse sul nodo del progetto in Esplora soluzioni, scegliere Scarica progetto, quindi scegliere Edit Project (Modifica progetto). Nel file di progetto aggiungere i due elementi seguenti a un gruppo di proprietà.

<PropertyGroup>
    <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Tape</JavaScriptTestFramework>
</PropertyGroup>

Successivamente, aggiungere i test alla cartella radice di test specificata. A questo punto i test saranno disponibili per essere eseguiti nella finestra Esplora test. Se inizialmente non vengono visualizzati, potrebbe essere necessario ricompilare il progetto.

Unit test .NET Core e .NET Standard

Oltre alle proprietà precedenti descritte per .NET Framework, è anche necessario installare il pacchetto NuGet Microsoft.JavaScript.UnitTest e impostare la proprietà :

<PropertyGroup>
    <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>

Alcuni framework di test potrebbero richiedere pacchetti npm aggiuntivi per il rilevamento dei test. Ad esempio, jest richiede il pacchetto npm jest-editor-support. Se necessario, controllare la documentazione relativa al framework specifico.

Scrivere unit test in un progetto Node.js (.njsproj)

Per i progetti Node.js, prima di aggiungere unit test al progetto, assicurarsi che il framework da usare sia installato localmente nel progetto. La finestra di installazione del pacchetto npm semplifica questa operazione.

Il modo migliore per aggiungere unit test a un progetto consiste nel creare una cartella tests nel progetto e impostarla come radice del test nelle proprietà del progetto. È anche necessario selezionare il framework di test da usare.

La finestra di dialogo Aggiungi nuovo elemento consente di aggiungere semplici test vuoti al progetto. Nello stesso progetto sono supportati sia JavaScript che TypeScript.

Per uno unit test Mocha, usare il codice seguente:

var assert = require('assert');

describe('Test Suite 1', function() {
    it('Test 1', function() {
        assert.ok(true, "This shouldn't fail");
    })

    it('Test 2', function() {
        assert.ok(1 === 1, "This shouldn't fail");
        assert.ok(false, "This should fail");
    })
})

Se le opzioni di unit test non sono state impostate nelle proprietà del progetto, è necessario verificare che la proprietà Framework di test nella finestra Proprietà sia impostata sul framework di test corretto per i file dello unit test. Questa operazione viene eseguita automaticamente dai modelli di file di unit test.

Dopo aver aperto Esplora test (scegliere Test>Finestre>Esplora test), Visual Studio rileva e visualizza i test. Se inizialmente i test non vengono visualizzati, ricompilare il progetto per aggiornare l'elenco.

Eseguire test (Node.js)

È possibile eseguire test in Visual Studio o dalla riga di comando.

Eseguire test in Visual Studio

È 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.

Per TypeScript, gli unit test vengono eseguiti sul codice JavaScript generato.

Eseguire i test dalla riga di comando

È possibile eseguire i test dal prompt dei comandi per gli sviluppatori per Visual Studio usando il comando seguente:

vstest.console.exe <path to project file>\NodejsConsoleApp23.njsproj /TestAdapterPath:<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter

Questo comando ha un output simile al seguente:

Microsoft (R) Test Execution Command Line Tool Version 15.5.0
Copyright (c) Microsoft Corporation.  All rights reserved.

Starting test execution, please wait...
Processing: NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js
  Creating TestCase:NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js::Test Suite 1 Test 1::mocha
  Creating TestCase:NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js::Test Suite 1 Test 2::mocha
Processing finished for framework of Mocha
Passed   Test Suite 1 Test 1
Standard Output Messages:
 Using default Mocha settings
 1..2
 ok 1 Test Suite 1 Test 1

Failed   Test Suite 1 Test 2
Standard Output Messages:
 not ok 1 Test Suite 1 Test 2
   AssertionError [ERR_ASSERTION]: This should fail
       at Context.<anonymous> (NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js:10:16)

Total tests: 2. Passed: 1. Failed: 1. Skipped: 0.
Test Run Failed.
Test execution time: 1.5731 Seconds