Test unitari per JavaScript e TypeScript in Visual Studio

I framework supportati sono:

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

I framework supportati sono:

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

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

Scrivere unit test per un progetto CLI (con estensione .esproj)

I progetti basati sull'interfaccia della riga di comando supportati in Visual Studio 2022 funzionano con Esplora test. Vitest è il framework di test predefinito per i progetti React e Vue (in precedenza Jest) 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 Test>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 terminaleed eseguire il comando specifico per il tipo di test.

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

• Test con Vitest
• Testing React con Jest
• test di Angular
• test Vue.js

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

Aggiungere un unit test (.esproj)

L'esempio seguente si basa sul modello di progetto React TypeScript fornito in Visual Studio 2022 versione 17.12 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 le proprietà seguenti siano presenti nel file .esproj con i valori mostrati.

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

   In questo esempio viene specificato Vitest come framework di test. Puoi invece specificare Mocha, Tape, Jasmine o Jest.

   L'elemento JavaScriptTestRoot specifica che gli unit test si troveranno nella cartella src della radice del progetto. È anche comune specificare la cartella test.

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:

   • vitest

   Questo pacchetto viene aggiunto al file package.json nelle dipendenze.

   Nota

   Se si usa jest, è necessario il pacchetto npm jest-editor-support e il pacchetto jest.

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

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

5. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella src e scegliere Aggiungi>Nuovo elementoe 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.

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

7. Aprire Esplora test (scegliere Test>Esplora test) e Visual Studio individua e visualizza i test. Se i test non vengono visualizzati inizialmente, 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, ad esempio package.json e tsconfig.json, si trovino nella radice del progetto.

Eseguire test (.esproj)

È possibile eseguire i test facendo clic sul collegamento Esegui tutto in Test Explorer. In alternativa, è possibile eseguire i 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 e Esplora test aggiorna automaticamente e visualizza i risultati. È anche possibile eseguire il debug dei test selezionati facendo clic con il pulsante destro del mouse e selezionando Debug.

L'illustrazione seguente mostra l'esempio con un secondo test unitario 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 usando JavaScript.

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

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

Se la cartella NodeJsTools non viene visualizzata 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 test unitario 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 implementazioni di find_tests 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 viene eseguita all'avvio di Visual Studio. Se un framework viene aggiunto durante l'esecuzione di Visual Studio, riavviare Visual Studio per rilevare il framework. Tuttavia, non è necessario riavviare quando si apportano modifiche all'implementazione.

Unit test nel .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 qualsiasi progetto C# o Visual Basic, tali test verranno enumerati ed è possibile eseguirli usando la finestra Esplora test.

Per abilitare questa operazione, fare clic con il pulsante destro del mouse sul nodo del progetto in Esplora soluzioni, scegliere Scarica progettoe quindi scegliere Modifica progetto. Quindi, nel file di progetto aggiungere i due elementi seguenti a un gruppo di proprietà.

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

Aggiungere quindi i test alla cartella radice di test specificata e saranno disponibili per l'esecuzione nella finestra Esplora test. Se inizialmente non vengono visualizzati, potrebbe essere necessario ricompilare il progetto.

I test unitari di .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.

Scrivi i test unitari in un progetto Node.js (.njsproj)

Per i progetti Node.js, prima di aggiungere unit test al tuo progetto, assicurati che il framework da usare sia installato localmente nel tuo progetto. È facile usare la finestra di installazione del pacchetto npm .

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

È possibile aggiungere semplici test vuoti al progetto usando la finestra di dialogo aggiungi nuovo elemento . Sia JavaScript che TypeScript sono supportati nello stesso progetto.

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 non sono state impostate le opzioni di unit test nelle proprietà del progetto, è necessario assicurarsi che la proprietà framework di test nella finestra Proprietà sia impostata sul framework di test corretto per i file di unit test. Questa operazione viene eseguita automaticamente dai modelli di file di unit test.

Dopo aver aperto Esplora test (scegliere Test>Esplora test di Windows>), Visual Studio individua e visualizza i test. Se i test non vengono visualizzati inizialmente, 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 tutto in Test Explorer. In alternativa, è possibile eseguire i 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 e Esplora test aggiorna automaticamente e visualizza 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 test dalla riga di comando

È possibile eseguire i test da 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 mostra 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