Pruebas unitarias de JavaScript y TypeScript en Visual Studio

Si su marco preferido no es compatible, vea Agregar compatibilidad con un marco de pruebas unitarias para obtener información sobre cómo lograr la compatibilidad.

Escritura de pruebas unitarias para un proyecto basado en la CLI (.esproj)

Los proyectos basados en la CLI que se admiten en Visual Studio 2022 funcionan con el Explorador de pruebas. Jest es el marco de pruebas integrado para proyectos de React y Vue. Para los proyectos de Angular, se usan Karma y Jasmine. Puede ejecutar las pruebas predeterminadas que proporciona cada marco, así como otras pruebas que escriba. Simplemente, presione el botón Ejecutar en el Explorador de pruebas. Si no tiene abierto el Explorador de pruebas, seleccione Probar>Explorador de pruebas en la barra de menús.

Para ejecutar pruebas unitarias desde la línea de comandos, haga clic con el botón derecho en el proyecto en Explorador de soluciones, elija Abrir en Terminal y ejecute el comando específico del tipo de prueba.

Para obtener información sobre cómo configurar pruebas unitarias, consulte lo siguiente:

• Prueba de React con Jest
• Pruebas de Angular
• Prueba de Vue.js

Aquí también se proporciona un ejemplo sencillo. Sin embargo, use los vínculos anteriores para obtener la información completa.

Agregue una prueba unitaria (.esproj)

El ejemplo siguiente se basa en la plantilla de proyecto TypeScript React proporcionada en Visual Studio 2022, versión 17.8 o posterior, que es la plantilla de proyecto React de TypeScript independiente. Para Vue y Angular, los pasos son similares.

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto react y elija Editar archivo de proyecto.

2. Asegúrese de que las siguientes propiedades están presentes en el archivo.esproj con los valores mostrados.

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

   En este ejemplo se especifica Jest como el marco de pruebas. En su lugar, puede especificar Mocha, Tape o Jasmine.

   El elemento JavaScriptTestRoot especifica que las pruebas unitarias estarán en la carpeta src de la raíz del proyecto.

3. En el Explorador de soluciones, haga clic con el botón derecho en el nodo npm y seleccione Instalar nuevos paquetes de npm.

   Use el cuadro de diálogo de instalación del paquete npm para instalar los siguientes paquetes de npm:

   • jest
   • jest-editor-support

   Estos paquetes se agregan al archivo package.json en dependencias.

4. En package.json, agregue la test sección al final de la scripts sección:

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

5. En Explorador de soluciones, haga clic con el botón derecho en la carpeta src y elija Agregar>nuevo elemento y agregue un nuevo archivo denominado App.test.tsx.

   Esto se agrega el nuevo archivo en la carpeta src.

6. Agregue el código siguiente a App.test.tsx.

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

7. Al abrir el Explorador de pruebas (elija Prueba>Explorador de pruebas), Visual Studio detecta y muestra las pruebas. Si las pruebas no se muestran inicialmente, vuelva a compilar el proyecto para actualizar la lista.

   

   Nota:

   Para TypeScript, no use la opción outfile en tsconfig.json, ya que el Explorador de pruebas no podrá encontrar las pruebas unitarias. Puede usar la opción outdir, pero asegúrese de que los archivos de configuración, como package.json y tsconfig.json, se encuentren en la raíz del proyecto.

Ejecutar pruebas (.esproj)

Puede ejecutar las pruebas si hace clic en el vínculo Ejecutar todo del Explorador de pruebas. O bien, puede ejecutar pruebas si selecciona uno o varios grupos o pruebas, hace clic con el botón derecho y selecciona Ejecutar en el menú contextual. Las pruebas se ejecutan en segundo plano y el Explorador de pruebas actualiza y muestra los resultados automáticamente. Además, puede depurar las pruebas seleccionadas si hace clic con el botón derecho y selecciona Depurar.

En la ilustración siguiente se muestra el ejemplo con una segunda prueba unitaria agregada.

En algunos marcos de pruebas unitarias, las pruebas unitarias normalmente se ejecutan en el código JavaScript generado.

Agregar compatibilidad con un marco de pruebas unitarias

Puede agregar compatibilidad con otros marcos de pruebas si implementa la lógica de detección y ejecución mediante JavaScript.

Para ello, agregue una carpeta con el nombre del marco de pruebas en:

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

Si no ve la carpeta NodeJsTools en un proyecto de ASP.NET Core, agregue la carga de trabajo de desarrollo de Node.js mediante el Instalador de Visual Studio. Esta carga de trabajo incluye compatibilidad con pruebas unitarias de JavaScript y TypeScript.

Esta carpeta debe contener un archivo de JavaScript con el mismo nombre que exporte las dos funciones siguientes:

• find_tests
• run_tests

Para obtener un buen ejemplo de las implementaciones find_tests y run_tests, vea la implementación del marco de pruebas unitarias de Mocha:

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

La detección de marcos de pruebas disponibles se produce al inicio de Visual Studio. Si se agrega un marco mientras se está ejecutando Visual Studio, reinicie Visual Studio para detectar el marco. Pero no es necesario reiniciar al realizar cambios en la implementación.

Pruebas unitarias en .NET Framework

No existe ninguna limitación en cuanto a la escritura de pruebas unitarias solo en proyectos de Node.js y ASP.NET Core. Al agregar las propiedades TestFramework y TestRoot a cualquier proyecto de C# o Visual Basic, esas pruebas se enumerarán y puede ejecutarlas mediante la ventana Explorador de pruebas.

Para habilitar esta opción, haga clic con el botón derecho en el nodo del proyecto en el Explorador de soluciones, elija Descargar el proyecto y después elija Editar proyecto. Después, en el archivo del proyecto, agregue los siguientes dos elementos a un grupo de propiedades.

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

Luego, agregue sus pruebas a la carpeta raíz de prueba que ha especificado y estarán disponibles para ejecutarse en la ventana Explorador de pruebas. Si no aparecen inicialmente, es posible que tenga que recompilar el proyecto.

Pruebas unitaria en .NET Core y .NET Standard

Además de las propiedades mencionadas, descritas para .NET Framework, también deberá instalar el paquete NuGet Microsoft.JavaScript.UnitTest y establecer la propiedad:

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

Algunas plataformas de pruebas pueden requerir paquetes npm adicionales para la detección de pruebas. Por ejemplo, jest requiere el paquete npm jest-editor-support. Si es necesario, consulte la documentación de la plataforma específica.

Escritura de pruebas unitarias en un proyecto de Node.js (.njsproj)

Para proyectos de Node.js, antes de agregar pruebas unitarias al proyecto, asegúrese de que el marco que piensa usar está instalado localmente en el proyecto. Es sencillo con la ventana de instalación del paquete de npm.

La mejor manera de agregar pruebas unitarias al proyecto es crear una carpeta tests en él y establecerla como raíz de las pruebas en las propiedades del proyecto. También debe seleccionar el marco de pruebas que quiere usar.

Puede agregar pruebas simples en blanco al proyecto mediante el cuadro de diálogo Agregar nuevo elemento. JavaScript y TypeScript se admiten en el mismo proyecto.

En una prueba unitaria de Mocha, use el código siguiente:

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");
    })
})

Si no ha establecido las opciones de la prueba unitaria en las propiedades del proyecto, debe asegurarse de que la propiedad Marco de prueba de la ventana Propiedades esté establecida en el marco de pruebas correcto para los archivos de la prueba unitaria. Esto se realiza automáticamente mediante plantillas de archivo de prueba unitaria.

Después de abrir el Explorador de pruebas (elija Prueba>Windows>Explorador de pruebas), Visual Studio detecta y muestra las pruebas. Si las pruebas no se muestran inicialmente, vuelva a compilar el proyecto para actualizar la lista.

Ejecución de pruebas (Node.js)

Puede ejecutar pruebas en Visual Studio o desde la línea de comandos.

Ejecución de pruebas en Visual Studio

Puede ejecutar las pruebas si hace clic en el vínculo Ejecutar todo del Explorador de pruebas. O bien, puede ejecutar pruebas si selecciona uno o varios grupos o pruebas, hace clic con el botón derecho y selecciona Ejecutar en el menú contextual. Las pruebas se ejecutan en segundo plano y el Explorador de pruebas actualiza y muestra los resultados automáticamente. Además, puede depurar las pruebas seleccionadas si hace clic con el botón derecho y selecciona Depurar.

Para TypeScript, las pruebas unitarias se ejecutan en el código JavaScript generado.

Ejecutar pruebas desde la línea de comandos

Puede ejecutar las pruebas desde Símbolo del sistema para desarrolladores de Visual Studio mediante el siguiente comando:

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

Este comando produce un resultado similar al siguiente:

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