Compartilhar via


Teste de unidade em JavaScript e TypeScript no Visual Studio

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

As estruturas compatíveis são:

Se não houver suporte para sua estrutura favorita, confira Adicionar suporte para uma estrutura de teste de unidade para obter informações sobre como adicionar o suporte.

Gravar testes de unidade para um projeto baseado em CLI (.esproj)

Os projetos baseados em CLI com suporte no Visual Studio 2022 funcionam com o Gerenciador de Testes. Jest é a estrutura de teste interna para projetos React e Vue, e Karma e Jasmine são usados para projetos Angular. Por padrão, você poderá executar os testes padrão fornecidos por cada estrutura, bem como quaisquer testes adicionais gravados. Basta pressionar o botão Executar no Gerenciador de Testes. Se o Gerenciador de Testes ainda não estiver aberto, ele pode ser encontrado selecionando Teste>Gerenciador de Testes na barra de menus.

Para executar testes de unidade a partir da linha de comando, clique com o botão direito do mouse no projeto no Gerenciador de Soluções, escolha Abrir no Terminal e execute o comando específico para o tipo de teste.

Para obter informações sobre como configurar testes de unidade, confira o seguinte:

Um exemplo simples também é fornecido aqui. Entretanto, use os links anteriores para obter informações completas.

Adicionar um teste de unidade (.esproj)

O exemplo a seguir é baseado no modelo de projeto TypeScript React fornecido no Visual Studio 2022 versão 17.8 ou posterior, que é o modelo do Projeto de TypeScript React Autônomo. Para Vue e Angular, as etapas são semelhantes.

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto React e escolha Editar arquivo do projeto.

  2. Verifique se você tem as seguintes propriedades no arquivo .esproj com os valores mostrados.

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

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

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

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

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

    • jest
    • jest-editor-support

    Esses pacotes estão adicionados ao arquivo package.json em dependências.

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

    "scripts": {
       ...
       "test": "jest"
    },
    
  5. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta src e escolha Adicionar>Novo Item e, em seguida, adicione um novo arquivo chamado App.test.tsx.

    Isso adiciona o novo arquivo na pasta src.

  6. Adicione o código a seguir ao App.test.tsx.

    describe('testAsuite', () => {
       it('testA1', async () => {
          expect(2).toBe(2);
       });
    });
    
  7. Abra o Gerenciador de Testes (escolha Teste>Gerenciador de Testes) e o Visual Studio descobrirá e exibirá os testes. Se os testes não estiverem sendo mostrados inicialmente, recompile o projeto para atualizar a lista.

    Screenshot of Test Explorer test discovery (.esproj).

    Observação

    Não use a opção outfile em tsconfig.json, porque o Gerenciador de Testes não conseguirá localizar os testes de unidade nos arquivos TypeScript. Você pode usar a opção outdir, mas verifique se os arquivos de configuração, como package.json e tsconfig.json, por exemplo, estão na raiz do projeto.

Executar testes (.esproj)

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

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

Screenshot of Test Explorer results (.esproj).

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

Observação

Na maioria dos cenários do TypeScript, você pode depurar um teste de unidade definindo um ponto de interrupção no código TypeScript, clicando com o botão direito do mouse em um teste no Gerenciador de Testes e escolhendo Depurar. Em cenários mais complexos, como alguns cenários que usam source maps, você pode ter dificuldade em atingir pontos de interrupção no código TypeScript. Como alternativa, tente usar a palavra-chave debugger.

Observação

No momento, não há suporte para testes de criação de perfil e cobertura de código.

Escrever testes de unidade para ASP.NET Core

Para adicionar suporte a teste de unidade de JavaScript e TypeScript em um projeto ASP.NET Core, é necessário adicionar o suporte a TypeScript, Npm e testes unitários ao projeto, incluindo os 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-Exibir-Controller e inclui a adição de um teste de unidade Jest ou Mocha.

  1. Crie um projeto ASP.NET Core Model-Exibir-Controlador.

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

  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 Procurar, pesquise os seguintes pacotes e instale cada um deles:

    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 do projeto.

    O arquivo .csproj será aberto no Visual Studio.

  5. Adicione os elementos a seguir ao arquivo .csproj no elemento PropertyGroup.

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

    O elemento JavaScriptTestRoot especifica que os testes de unidade estarão na pasta 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ó do projeto ASP.NET Core e selecione Adicionar > Novo item. Escolha o Arquivo de Configuração JSON do TypeScript e selecione Adicionar.

    Caso você não veja todos os modelos de item, selecione Mostrar todos os modelos e 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 código a seguir:

    {
      "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 é o local em que você pode colocar o código TypeScript no seu aplicativo. Para ver um exemplo de projeto que adiciona código, confira o tópico Adicionar o TypeScript a um aplicativo existente do ASP.NET Core.

  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 será 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.

    Observação

    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 Descarregar Projeto) e recarregue o projeto para que o nó npm seja exibido novamente. Alternativamente, você pode adicionar as entradas do pacote a package.json e instalar por meio da criação do projeto.

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

    • 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 ao final da seção scripts:

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

    Isso adiciona o novo arquivo à pasta teste.

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

    describe('testAsuite', () => {
       it('testA1', async () => {
          expect(2).toBe(2);
       });
    });
    
  13. Abra o Gerenciador de Testes (escolha Teste>Windows>Gerenciador de Testes) e o Visual Studio detecta e exibe os testes. Se os testes não estiverem sendo mostrados inicialmente, recompile o projeto para atualizar a lista. A ilustração a seguir mostra o exemplo do Jest, com dois arquivos de teste de unidade diferentes.

    Screenshot of Test Explorer test discovery (ASP.NET Core).

    Observação

    Não use a opção outfile em tsconfig.json, porque o Gerenciador de Testes não conseguirá localizar os testes de unidade nos arquivos TypeScript. Você pode usar a opção outdir, mas verifique se os arquivos de configuração, como package.json e tsconfig.json, por exemplo, estão na raiz do projeto.

Executar testes (ASP.NET Core)

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

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

Screenshot of Test Explorer results (ASP.NET Core).

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

Observação

Na maioria dos cenários do TypeScript, você pode depurar um teste de unidade definindo um ponto de interrupção no código TypeScript, clicando com o botão direito do mouse em um teste no Gerenciador de Testes e escolhendo Depurar. Em cenários mais complexos, como alguns cenários que usam source maps, você pode ter dificuldade em atingir pontos de interrupção no código TypeScript. Como alternativa, tente usar a palavra-chave debugger.

Observação

No momento, não há suporte para testes de criação de perfil e cobertura de código.

Adicionar suporte para uma estrutura de teste de unidade

Adicione suporte para estruturas de teste adicionais implementando a lógica de descoberta e execução usando o JavaScript.

Observação

Para ASP.NET Core, adicione o pacote NuGet Microsoft.JavaScript.UnitTest ao seu projeto para adicionar suporte.

Faça isso adicionando uma pasta com o nome da estrutura de teste em:

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

Se você não vir a pasta NodeJsTools em um projeto ASP.NET Core, adicione a carga de trabalho de desenvolvimento Node.js usando o Instalador do Visual Studio. Essa carga de trabalho inclui suporte para teste de unidade JavaScript e TypeScript.

Essa pasta deve conter um arquivo JavaScript com o mesmo nome, que exporta as duas seguintes funções:

  • find_tests
  • run_tests

Para obter um bom exemplo das implementações find_tests e run_tests, confira a implementação da estrutura de teste de unidade Mocha em:

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

A descoberta das estruturas de teste disponíveis ocorre na inicialização do Visual Studio. Se uma estrutura for adicionada enquanto o Visual Studio estiver em execução, reinicie o Visual Studio para detectar a estrutura. No entanto, você não precisa reiniciar ao fazer alterações na implementação.

Testes de unidade no .NET Framework

Você não está limitado a escrever testes de unidade apenas em seus projetos Node.js e ASP.NET Core. Quando você adicionar as propriedades TestFramework e TestRoot a qualquer projeto de C# ou Visual Basic, esses testes serão enumerados e você poderá executá-los usando a janela do Gerenciador de Testes.

Para habilitar isso, clique com o botão direito do mouse no nó do projeto no Gerenciador de Soluções, escolha Descarregar Projeto e, em seguida, escolha Editar Projeto. Em seguida, no arquivo de projeto, adicione os dois elementos a seguir a um grupo de propriedades.

Importante

Certifique-se de que o grupo de propriedades a que você está adicionando os elementos não tenha uma condição especificada. Isso pode causar um comportamento inesperado.

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

Em seguida, adicione seus testes à pasta raiz de teste especificada por você e eles ficarão disponíveis para execução na janela do Gerenciador de Testes. Se eles não aparecerem inicialmente, talvez seja necessário recompilar o projeto.

Teste de unidade no .NET Core e no .NET Standard

Além das propriedades acima descritas para .NET Framework, também será necessário instalar o pacote Microsoft.JavaScript.UnitTest do NuGet e definir a propriedade:

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

Algumas estruturas de teste podem requerer pacotes npm adicionais para a detecção de testes. Por exemplo, jest requer o pacote npm jest-editor-support. Se necessário, verifique a documentação da estrutura específica.

Escrever testes de unidade em um projeto de Node.js (.njsproj)

Para projetos Node.js, antes de adicionar testes de unidade ao projeto, verifique se a estrutura que você pretende usar está instalada localmente no projeto. É fácil fazer isso usando a janela de instalação de pacotes npm.

A maneira preferencial de adicionar testes de unidade ao projeto é criar uma pasta tests no projeto e configurá-la como a raiz de teste nas propriedades do projeto. Você também precisa selecionar a estrutura de teste que deseja usar.

Screenshot of set test root and test framework.

Adicione testes simples em branco ao projeto usando a caixa de diálogo Adicionar Novo Item. Há suporte para JavaScript e TypeScript no mesmo projeto.

Screenshot of how to add new unit test.

Para um teste de unidade Mocha, use o seguinte código:

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

Se você não definiu as opções de teste de unidade nas propriedades do projeto, garanta que a propriedade Estrutura de Teste na janela Propriedades esteja definida com a estrutura de teste correta para os arquivos de teste de unidade. Isso é feito automaticamente pelos modelos de arquivo de teste de unidade.

Screenshot of choosing Test Framework.

Observação

As opções de teste de unidade terão preferência em relação às configurações de arquivos individuais.

Depois de abrir o Gerenciador de Testes (escolha Teste>Windows>Gerenciador de Testes), o Visual Studio detecta e exibe os testes. Se os testes não estiverem sendo mostrados inicialmente, recompile o projeto para atualizar a lista.

Screenshot of Test Explorer.

Observação

Para TypeScript, não use a opção outdir ou outfile em tsconfig.json, porque o Gerenciador de Testes não conseguirá localizar os testes de unidade.

Executar testes (Node.js)

Execute testes no Visual Studio ou na linha de comando.

Executar testes no Visual Studio

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

Para TypeScript, os testes de unidade são executados no código JavaScript gerado.

Observação

Na maioria dos cenários do TypeScript, você pode depurar um teste de unidade definindo um ponto de interrupção no código TypeScript, clicando com o botão direito do mouse em um teste no Gerenciador de Testes e escolhendo Depurar. Em cenários mais complexos, como alguns cenários que usam source maps, você pode ter dificuldade em atingir pontos de interrupção no código TypeScript. Como alternativa, tente usar a palavra-chave debugger.

Observação

No momento, não damos suporte à criação de perfil de testes nem à cobertura de código.

Executar testes na linha de comando

Execute os testes no Prompt de Comando do Desenvolvedor do Visual Studio usando o seguinte comando:

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

Esse comando exibe uma saída semelhante à seguinte:

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

Observação

Se você receber um erro indicando que o vstest.console.exe não pode ser encontrado, verifique se você abriu o Prompt de Comando do Desenvolvedor e não um prompt de comando comum.