Pruebas unitarias de JavaScript y TypeScript en Visual Studio

Puede escribir y ejecutar pruebas unitarias en Visual Studio mediante algunos de los marcos de JavaScript más populares sin necesidad de cambiar a un símbolo del sistema. Se admiten proyectos de Node.js y ASP.NET Core.

Los marcos admitidos son:

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

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

Los proyectos basados en la CLI de compatibles con Visual Studio 2022 funcionan con el Explorador de pruebas. Vitest es el marco de pruebas integrado para proyectos de React y Vue (anteriormente Jest) y Karma y Jasmine se usa para proyectos de Angular. De forma predeterminada, podrá ejecutar las pruebas predeterminadas proporcionadas por cada marco, así como las pruebas adicionales que escriba. Simplemente, presione el botón Ejecutar en el Explorador de pruebas. Si aún no tiene abierto el Explorador de pruebas, puede encontrarlo seleccionando >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 el Explorador de soluciones, elija Abrir en Terminaly ejecute el comando específico del tipo de prueba.

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

• Pruebas con Vitest
• 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 información completa.

Agregar una prueba unitaria (.esproj)

El ejemplo siguiente se basa en la plantilla de proyecto TypeScript React proporcionada en visual Studio 2022, versión 17.12 o posterior, que es la plantilla TypeScript React Project 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>Vitest</JavaScriptTestFramework>
   </PropertyGroup> 
   

   En este ejemplo se especifica Vitest como marco de pruebas. Puede especificar Mocha, Tape, Jasmine o Jest en su lugar.

   El elemento JavaScriptTestRoot especifica que las pruebas unitarias estarán en la carpeta src de la raíz del proyecto. También es habitual especificar la carpeta de prueba .

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

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

   • vitest

   Este paquete se añade al archivo package.json como dependencias.

   Nota

   Si está utilizando jest, se requiere tanto el paquete npm jest-editor-support como el paquete npm jest.

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

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

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

   Esto agrega el nuevo archivo en la carpeta src.

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

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

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

   

   Nota

   En 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 estén 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 seleccionando una o varias pruebas o grupos, haciendo clic con el botón derecho y seleccionando Ejecutar en el menú contextual. Las pruebas se ejecutan en segundo plano y el Explorador de pruebas actualiza automáticamente y muestra los resultados. 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.

Nota

En la mayoría de los escenarios de TypeScript, puede depurar una prueba unitaria estableciendo un punto de interrupción en el código TypeScript, haciendo clic con el botón derecho en una prueba en el Explorador de pruebas y seleccionando Depurar. En escenarios más complejos, como algunos escenarios que usan mapas de origen, es posible que tenga dificultades para alcanzar puntos de interrupción en el código TypeScript. Como solución alternativa, pruebe a usar la palabra clave debugger.

Nota

Actualmente no se admiten pruebas de generación de perfiles ni cobertura de código.

Escritura de pruebas unitarias para ASP.NET Core

Para agregar compatibilidad con pruebas unitarias de JavaScript y TypeScript en un proyecto de ASP.NET Core, debe agregar compatibilidad con TypeScript, Npm y pruebas unitarias al proyecto mediante la inclusión de paquetes NuGet necesarios.

Agregar una prueba unitaria (ASP.NET Core)

El ejemplo siguiente se basa en la plantilla de proyecto ASP.NET Core Model-View-Controller e incluye agregar una prueba unitaria de Jest o Mocha.

1. Cree un proyecto ASP.NET Core Model-View-Controller.

   Para obtener un proyecto de ejemplo, consulte Agregar TypeScript a una aplicación ASP.NET Core existente. Para la compatibilidad con pruebas unitarias, se recomienda empezar con una plantilla de proyecto estándar ASP.NET Core.

2. En el Explorador de soluciones (panel derecho), haga clic con el botón derecho en el nodo del proyecto ASP.NET Core y seleccione Administrar paquetes NuGet para soluciones.

3. En la pestaña Examinar, busque los siguientes paquetes e instale cada uno:

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

   Use el paquete NuGet para agregar compatibilidad con TypeScript en lugar del paquete typeScript de npm.

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

   El archivo .csproj se abre en Visual Studio.

5. Agregue los siguientes elementos al archivo .csproj en el elemento PropertyGroup.

   En este ejemplo se especifica Jest o Mocha como marco de pruebas. En su lugar, podría especificar Tape o Jasmine.

   Jest

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

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

   Mocha

   El elemento JavaScriptTestRoot especifica la ubicación de las pruebas unitarias. Para simplificar la configuración de Mocha, en este ejemplo se apunta la raíz de prueba a la carpeta de salida, *wwwroot\js\tests*.

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

6. En el Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto ASP.NET Core y seleccione Agregar > Nuevo elemento. Elija el archivo de configuración JSON de TypeScript y, a continuación, seleccione Agregar.

   Si no ve todas las plantillas de elemento, seleccione Mostrar todas las plantillasy, a continuación, elija la plantilla de elemento.

   Visual Studio agrega el archivo tsconfig.json a la raíz del proyecto. Puede usar este archivo para configurar opciones para el compilador de TypeScript.

7. Abra tsconfig.json y reemplace el código predeterminado por el código siguiente:

   Jest

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

   En Jest, si desea compilar pruebas de TypeScript en JavaScript, quite la carpeta de pruebas de la sección excluir.

   La carpeta de scripts es donde puede colocar el código TypeScript para tu aplicación. Para obtener un proyecto de ejemplo que agrega código, consulte Agregar TypeScript a una aplicación de ASP.NET Core existente.

   Mocha

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

   Los scripts de la carpeta, es donde puede colocar el código TypeScript para la aplicación. Para obtener un proyecto de ejemplo que agrega código, consulte Agregar TypeScript a una aplicación de ASP.NET Core existente.

8. Haga clic con el botón derecho en el proyecto en el Explorador de soluciones y elija Agregar>Nuevo Elemento (o presione Ctrl + SHIFT + A). Use el cuadro de búsqueda para buscar el archivo npm, elija el archivo de configuración de npm, use el nombre predeterminado y haga clic en Agregar.

   Se agrega un archivo package.json a la raíz del proyecto.

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

   Nota

   En algunos escenarios, es posible que el Explorador de soluciones no muestre el nodo npm debido a un problema conocido descrito aquí. Si necesita ver el nodo npm, puede descargar el proyecto (haga clic con el botón derecho en el proyecto y elija Descargar proyecto) y, a continuación, volver a cargar el proyecto para que el nodo npm vuelva a aparecer. Como alternativa, puede agregar las entradas del paquete a package.json e instalar mediante la compilación del proyecto.

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

   Jest

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

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

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

   Mocha

   • mocha
   • afirmar
   • @types/mocha
   • @types/node

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

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

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

    Jest

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

    Mocha

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

11. En el Explorador de Soluciones, haga clic con el botón derecho en la carpeta de pruebas y elija Agregar>Nuevo elemento, y luego agregue un nuevo archivo llamado App.test.tsx.

    Esto agrega el nuevo archivo en la carpeta test.

12. Agregue el código siguiente 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. Abra el Explorador de pruebas (elija Prueba>Windows>Explorador de pruebas) y Visual Studio detecta y muestra pruebas. Si las pruebas no se muestran inicialmente, vuelva a compilar el proyecto para actualizar la lista. En la ilustración siguiente se muestra el ejemplo de Jest, con dos archivos de pruebas unitarias diferentes.

    

    Nota

    En 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 estén en la raíz del proyecto.

Ejecutar pruebas (ASP.NET Core)

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

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

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

Nota

En la mayoría de los escenarios de TypeScript, puede depurar una prueba unitaria estableciendo un punto de interrupción en el código TypeScript, haciendo clic con el botón derecho en una prueba en el Explorador de pruebas y seleccionando Depurar. En escenarios más complejos, como algunos escenarios que usan mapas de origen, es posible que tenga dificultades para alcanzar puntos de interrupción en el código TypeScript. Como solución alternativa, pruebe a usar la palabra clave debugger.

Nota

Actualmente no se admiten pruebas de generación de perfiles ni cobertura de código.