Teste de unidade JavaScript e TypeScript no Visual Studio

Você pode escrever e executar testes de unidade no Visual Studio usando algumas das estruturas JavaScript mais populares sem a necessidade de mudar para um prompt de comando. Há suporte para projetos Node.js e ASP.NET Core.

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"

Escrever testes de unidade para ASP.NET Core

Para adicionar suporte para testes de unidade de JavaScript e TypeScript em um projeto do ASP.NET Core, você precisa adicionar suporte a TypeScript, npm e teste de unidade ao projeto, incluindo pacotes NuGet necessários.

Adicionar um teste de unidade (ASP.NET Core)

O exemplo a seguir é baseado no modelo de projeto ASP.NET Core Model-View-Controller e inclui a adição de um teste de unidade Jest ou Mocha.

1. Crie um projeto ASP.NET Core Model-View-Controller.

   Para obter um projeto de exemplo, consulte Adicionar TypeScript a um aplicativo ASP.NET Core existente. Para obter suporte ao teste de unidade, recomendamos que você comece com um modelo de projeto padrão do ASP.NET Core.

2. No Gerenciador de Soluções (painel direito), clique com o botão direito do mouse no nó do projeto ASP.NET Core e selecione Gerenciar Pacotes NuGet para Soluções.

3. Na guia Navegar , pesquise os seguintes pacotes e instale cada um deles:

   • Microsoft.TypeScript.MSBuild
   • Npm

   Use o pacote NuGet para adicionar suporte ao TypeScript em vez do pacote TypeScript npm.

4. No Gerenciador de Soluções, clique com o botão direito do mouse no nó do projeto e escolha Editar Arquivo de Projeto.

   O arquivo .csproj é aberto no Visual Studio.

5. Adicione os seguintes elementos ao arquivo .csproj no elemento PropertyGroup.

   Este exemplo especifica Jest ou Mocha como a estrutura de teste. Em vez disso, você pode especificar o Tape ou Jasmine.

   • Jest
   • Mocha

   O elemento JavaScriptTestRoot especifica que seus testes de unidade estarão na pasta de testes da raiz do projeto.

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

6. No Gerenciador de Soluções, clique com o botão direito do mouse no nó de projeto do ASP.NET Core e selecione Adicionar > Novo Item. Escolha o Arquivo de Configuração JSON do TypeScript e selecione Adicionar.

   Se você não vir todos os modelos de item, selecione Mostrar Todos os Modelose escolha o modelo de item.

   O Visual Studio adiciona o arquivo tsconfig.json à raiz do projeto. Você pode usar esse arquivo para configurar opções para o compilador TypeScript.

7. Abra tsconfig.json e substitua o código padrão pelo seguinte código:

   • Jest
   • Mocha

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

   Para o Jest, se desejar compilar testes TypeScript para JavaScript, remova a pasta testes da seção excluir.

   A pasta scripts é onde você pode colocar o código TypeScript para seu aplicativo. Para obter um projeto de exemplo que adiciona código, consulte Adicionar TypeScript a um aplicativo ASP.NET Core existente.

8. Clique com o botão direito do mouse no projeto no Gerenciador de Soluções e escolha Adicionar>Novo Item (ou pressione Ctrl + SHIFT + A). Use a caixa de pesquisa para localizar o arquivo npm, escolha o arquivo de configuração npm, use o nome padrão e clique em Adicionar.

   Um arquivo package.json é adicionado à raiz do projeto.

9. No Gerenciador de Soluções, clique com o botão direito do mouse no nó npm em Dependências e escolha Instalar novos pacotes npm.

   Nota

   Em alguns cenários, o Gerenciador de Soluções pode não mostrar o nó npm devido a um problema conhecido descrito aqui. Se você precisar ver o nó npm, poderá descarregar o projeto (clique com o botão direito do mouse no projeto e escolha Unload Project) e depois recarregar o projeto para que o nó npm apareça novamente. Como alternativa, você pode adicionar as entradas do pacote ao package.json e instalar criando o projeto.

   Use a caixa de diálogo de instalação do pacote npm para instalar os seguintes pacotes npm:

   • Jest
   • Mocha

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

   Esses pacotes são adicionados ao arquivo package.json em devDependencies.

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

10. Em package.json, adicione a seção test no final da seção scripts:

    • Jest
    • Mocha

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

11. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta de teste e escolha Adicionar>Novo Item, e adicione um novo arquivo chamado App.test.tsx.

    Isso adiciona o novo arquivo à pasta teste.

12. Adicione o código a seguir para App.test.tsx.

    • Jest
    • Mocha

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

13. Abra o Explorador de Testes (escolha Teste>Windows>Explorador de Testes) e o Visual Studio descobre e exibe testes. Se os testes não estiverem sendo exibidos inicialmente, recompile o projeto para atualizar a lista. A ilustração a seguir mostra o exemplo Jest, com dois arquivos de teste de unidade diferentes.

    

    Nota

    Para o TypeScript, não use a opção outfile no tsconfig.json, pois o Gerenciador de Testes não poderá localizar seus testes de unidade. Você pode usar a opção outdir, mas verifique se arquivos de configuração como package.json e tsconfig.json estão na raiz do projeto.

    Importante

    Se a saída de Testes na janela Saída mostrar um ReadOnlySpan erro durante a descoberta de teste, use a solução alternativa a seguir para um problema conhecido do MSBuild. No Visual Studio 2022, abra a pasta Arquivos de Programas\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform e renomeie System.Memory.dll para um nome diferente. Essa correção habilita a descoberta de teste.

Executar testes (ASP.NET Core)

Execute os testes clicando no link Executar Tudo no Gerenciador de Testes. Ou, você pode executar testes selecionando um ou mais testes ou grupos, clicando com o botão direito do mouse e selecionando Executar no menu de atalho. Os testes são executados em segundo plano e o Gerenciador de Testes atualiza automaticamente e mostra os resultados. Além disso, você também pode depurar testes selecionados clicando com o botão direito do mouse e selecionando Depurar.

A ilustração a seguir mostra o exemplo Jest, com um segundo teste de unidade adicionado.

Para algumas estruturas de teste de unidade, os testes de unidade normalmente são executados no código JavaScript gerado.