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)

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.

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 eligiendo Depurar. En escenarios más complejos, como los que usan mapas de origen, puede que tenga dificultades para llegar a los 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.

Agregue 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 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 de ASP.NET Core estándar.

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.

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 la compatibilidad con TypeScript, en lugar del paquete de 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 del proyecto.

   El archivo de .csprojse 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 tests de la raíz del proyecto.

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

   Mocca

   El JavaScriptTestRoot elemento 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 luego, 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 plantillas y 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 siguiente código:

   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.

   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 ASP.NET Core existente.

   Mocca

   {
     "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 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 + MAYÚS + A). Use el cuadro de búsqueda para encontrar el archivo npm, elija el archivo de configuración npm, use el nombre predeterminado y haga clic en Agregar.

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

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

   Nota:

   En algunos escenarios, es posible que el Explorador de soluciones no muestre el nodo npm debido a un problema conocido que se describeaquí. Si necesita ver el nodo npm, descargue el proyecto y, luego, vuelva a cargarlo para que el nodo npm vuelva a aparecer. Para la descarga, haga clic con el botón derecho en el proyecto y elija Descargar el proyecto. 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"
   

   Mocca

   • mocha
   • assert
   • @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 test sección al final de la scripts sección:

    Jest

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

    Mocca

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

11. En Explorador de soluciones, haga clic con el botón derecho en la carpeta de prueba y elija Agregar>Nuevo elemento y agregue un nuevo archivo denominadoApp.test.tsx.

    Esto se agrega el nuevo archivo en la carpeta de prueba.

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

    Jest

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

    Mocca

    var assert = require('assert');
    
    describe('testAsuite', function () {
       it('testA1', function () {
          assert.equal(1, 1);
       })
    })
    

13. Al 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. En la siguiente ilustración se muestra el ejemplo más alto, con dos archivos de prueba unitaria diferentes.

    

    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.

Ejecución de 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 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 de 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 eligiendo Depurar. En escenarios más complejos, como los que usan mapas de origen, puede que tenga dificultades para llegar a los 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.