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)
Cinta (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:

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.

En el Explorador de soluciones, haga clic con el botón derecho en el proyecto React y elija Editar archivo de proyecto.
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 prueba.
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 agrega al archivo package.json en dependencias.

Nota

Si usted está usando jest, se requiere el paquete npm jest-editor-support, así como el paquete jest.
En package.json, agregue la sección test al final de la sección scripts:
```
"scripts": {
   ...
   "test": "vitest"
},
```
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.

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

import { describe, it, expect } from 'vitest';

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

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 generar el proyecto para actualizar la lista.

Nota

Para TypeScript, no use la outfile opción 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.

Importante

Si la salida de Pruebas en la ventana Salida muestra un ReadOnlySpan error durante la detección de pruebas, use la siguiente solución alternativa para un problema conocido de MSBuild. Para Visual Studio 2022, abra la carpeta Archivos de programa\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform y cambie el nombre deSystem.Memory.dll a otro nombre. Esta corrección habilita la detección de pruebas.

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.

Captura de pantalla de los resultados del Explorador de pruebas (.esproj).

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.

Ejecución de pruebas unitarias desde la línea de comandos para un proyecto basado en la CLI (.esproj)

Puede ejecutar pruebas unitarias directamente desde la línea de comandos del marco de pruebas unitarias de la misma manera que lo haría si no usara Visual Studio.

También puede optar por ejecutar las pruebas desde la línea de comandos mediante vstest.console. Por ejemplo, puede usar vstest.console para mantener la coherencia con las pruebas unitarias de C# o para ejecutarse en Azure DevOps. Use el comando siguiente, pero reemplace por MyProj el nombre del proyecto.

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\18\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

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.

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.
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.
En la pestaña Examinar, busque los siguientes paquetes e instale cada uno:
- Microsoft.TypeScript.MSBuild
- Npm
Use el paquete NuGet para agregar compatibilidad con TypeScript en lugar del paquete typeScript de npm.
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.
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
- Mocha
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>
```
El elemento JavaScriptTestRoot especifica la ubicación de las pruebas unitarias. Para simplificar la configuración de Mocha, en este ejemplo apuntamos 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>
```
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.

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

Jest
Mocha

{
  "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 scripts es donde puede colocar el código TypeScript para su aplicación. Para obtener un proyecto de ejemplo que agrega código, consulte Agregar TypeScript a una aplicación de ASP.NET Core existente.

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

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 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.
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
- Mocha
- 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
- 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"
```

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

Jest
Mocha

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

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

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

Esto agrega el nuevo archivo en la carpeta test.

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

Jest
Mocha

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

var assert = require('assert');

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

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 generar el proyecto para actualizar la lista. En la ilustración siguiente se muestra el ejemplo de Jest, con dos archivos de prueba unitaria diferentes.

Nota

Para TypeScript, no use la outfile opción 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.

Importante

Si la salida de Pruebas en la ventana Salida muestra un ReadOnlySpan error durante la detección de pruebas, use la siguiente solución alternativa para un problema conocido de MSBuild. En Visual Studio 2022, abra la carpeta Archivos de programa\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform y cambie el nombre deSystem.Memory.dll a otro nombre. Esta corrección habilita la detección de pruebas.

Ejecutar pruebas (ASP.NET Core)

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

Captura de pantalla de los resultados del Explorador de pruebas (ASP.NET Core).

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

Nota

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

Comentarios

¿Le resultó útil esta página?

Last updated on 2025-12-12

Compartir vía

Pruebas unitarias de JavaScript y TypeScript en Visual Studio

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

Agregar una prueba unitaria (.esproj)

Ejecutar pruebas (.esproj)

Ejecución de pruebas unitarias desde la línea de comandos para un proyecto basado en la CLI (.esproj)

Escritura de pruebas unitarias para ASP.NET Core

Agregar una prueba unitaria (ASP.NET Core)

Ejecutar pruebas (ASP.NET Core)

Comentarios

Recursos adicionales