Partilhar via

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 alternar para um prompt de comando. São apoiados os projetos Node.js e ASP.NET Core.

As estruturas suportadas são:

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

Os projetos baseados em CLI suportados no Visual Studio 2022 funcionam com o Test Explorer. Vitest é a estrutura de teste integrada para projetos React e Vue (anteriormente Jest), e Karma e Jasmine é usado para projetos Angular. Por padrão, você poderá executar os testes padrão fornecidos por cada estrutura, bem como quaisquer testes adicionais que você escrever. Basta pressionar o botão Executar no Gerenciador de Testes. Se você ainda não tiver o Test Explorer aberto, poderá encontrá-lo selecionando Test>Test Explorer 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 Terminale execute o comando específico para o tipo de teste.

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

Um exemplo simples também é fornecido aqui. No entanto, 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.12 ou posterior, que é o modelo Standalone TypeScript React Project. Para Vue e Angular, os passos são semelhantes.

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

  2. Verifique se as propriedades a seguir estão presentes no arquivo de .esproj do com os valores mostrados.

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

    Este exemplo especifica Vitest como a estrutura de teste. Você pode especificar Mocha, Tape, Jasmine ou Jest em vez disso.

    O elemento especifica que seus testes de unidade estarão na pasta src da raiz do projeto. Também é comum especificar a pasta de teste .

  3. No Explorador 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:

    • vitest

    Este pacote é adicionado ao arquivo package.json em dependências.

    Observação

    Se estiveres a utilizar o jest, é necessário o pacote npm jest-editor-support, assim como o pacote jest.

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

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

  5. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta src e escolha AdicionarNovo Iteme, em seguida, adicione um novo arquivo chamado App.test.tsx.

    Isso adiciona o novo arquivo na pasta src.

  6. Adicione o seguinte código a App.test.tsx.

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

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

  7. Abra o Test Explorer (escolha Test>Test Explorer) e o Visual Studio descobre e exibe testes. Se os testes não estiverem sendo exibidos inicialmente, reconstrua o projeto para atualizar a lista.

    Captura de tela da descoberta de teste do Test Explorer (.esproj).

    Observação

    Para TypeScript, não use a opção em outfile, porque o Test Explorer não poderá encontrar seus testes de unidade. Você pode usar a opção outdir, mas certifique-se de que os arquivos de configuração, como package.json e tsconfig.json, estejam na raiz do projeto.

    Importante

    Se a saída de testes na janela saída mostra um ReadOnlySpan erro durante a descoberta de teste, use a seguinte solução alternativa para um problema conhecido do MSBuild. Para o Visual Studio 2022, abra a pasta Arquivos de Programas\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform e renomeieSystem.Memory.dll para um nome diferente. Essa correção permite a descoberta de teste.

Executar testes (.esproj)

Você pode executar os testes clicando no link Executar todos os 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 Test Explorer atualiza e mostra os resultados automaticamente. 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 com um segundo teste de unidade adicionado.

Captura de tela dos resultados do Test Explorer (.esproj).

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

Observação

Na maioria dos cenários de 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 mapas de origem, você pode ter dificuldade em atingir pontos de interrupção no código TypeScript. Como solução alternativa, tente usar a palavra-chave debugger.

Observação

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

Executar testes de unidade a partir da linha de comando para um projeto baseado em CLI (.esproj)

Você pode executar testes de unidade diretamente da linha de comando para sua estrutura de teste de unidade da mesma forma que faria se não estivesse usando o Visual Studio.

Você também pode optar por executar os testes a partir da linha de comando usando vstest.console. Por exemplo, talvez você queira usar vstest.console para manter a consistência com testes de unidade C# ou executar no Azure DevOps. Use o comando a seguir, mas substitua MyProj pelo nome do projeto.

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

Para adicionar suporte para testes de unidade de JavaScript e TypeScript em um projeto ASP.NET Core, você precisa adicionar suporte a TypeScript, npm e teste de unidade 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-View-Controller e inclui a adição de um teste de unidade Jest ou Mocha.

  1. Crie um projeto de Modelo ASP.NET CoreView-Controller.

    Para obter um projeto de exemplo, consulte Adicionar TypeScript a um aplicativo ASP.NET Core existente. Para suporte a testes de unidade, recomendamos que você comece com um modelo de projeto 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 Explorar, procure os seguintes pacotes e instale cada um:

    • Microsoft.TypeScript.MSBuild
    • Npm

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

  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 de .csproj é aberto no Visual Studio.

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

    Este exemplo especifica Jest ou Mocha como a estrutura de teste. Em vez disso, poderia especificar Fita ou Jasmim.

    O elemento JavaScriptTestRoot especifica que os seus testes de unidade estarão na pasta 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 TypeScript JSON Configuration Filee, em seguida, selecione Adicionar.

    Se não vir todos os modelos de item, selecione Mostrar Todos os Modelos e, em seguida, escolha o modelo de item.

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

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

    {
  "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 pretender compilar testes TypeScript para JavaScript, remova a pasta testes da seção de excluir.

    O scripts pasta é 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 Explorador de Soluções e escolha Adicionar>Novo Elemento (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.

    Observação

    Em alguns cenários, o Explorador 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, em seguida, recarregar o projeto para fazer com que o nó npm reapareça. 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:

    • brincadeira
    • jest-editor-suporte
    • @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:

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

  11. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta de teste e escolha AdicionarNovo Iteme, em seguida, adicione um novo arquivo chamado App.test.tsx.

    Isso adiciona o novo arquivo na pasta de teste.

  12. Adicione o seguinte código a App.test.tsx.

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

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

    Captura de tela da descoberta de teste do Test Explorer (ASP.NET Core).

    Observação

    Para TypeScript, não use a opção em outfile, porque o Test Explorer não poderá encontrar seus testes de unidade. Você pode usar a opção outdir, mas certifique-se de que os arquivos de configuração, como package.json e tsconfig.json, estejam na raiz do projeto.

    Importante

    Se a saída de testes na janela saída mostra um ReadOnlySpan erro durante a descoberta de teste, use a seguinte solução alternativa 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 permite a descoberta de teste.

Executar testes (ASP.NET Core)

Você pode executar os testes clicando no link Executar todos os 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 Test Explorer atualiza e mostra os resultados automaticamente. 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.

Captura de tela dos resultados do Test Explorer (ASP.NET Core).

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

Observação

Na maioria dos cenários de 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 mapas de origem, você pode ter dificuldade em atingir pontos de interrupção no código TypeScript. Como solução alternativa, tente usar a palavra-chave debugger.

Observação

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

  • Last updated on