Configurar a estrutura de testes do Jest

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Descrever a estrutura de testes do Jest.
Descrever o papel do Node.js e npm.
Instalar Node.js e npm.
Instalar o módulo JavaScript @salesforce/sfdx-lwc-jest em um projeto do Salesforce DX.

Antes de começar

Para concluir este módulo, você precisará instalar e atualizar o Salesforce CLI, Visual Studio Code e as extensões do Salesforce para Visual Studio Code. Para atender a esses pré-requisitos, recomendamos que você conclua os projetos Início rápido: Salesforce DX, Início rápido: Visual Studio Code para desenvolvimento do Salesforce e Início rápido: Componentes web do Lightning antes de prosseguir.

Estamos usando uma abordagem de desenvolvimento orientado por testes (TDD), pela qual vamos criar o teste de Jest antes de criar o componente que ele testa. Por isso, cada teste falhará inicialmente. Em seguida, atualizaremos o componente para fazer com que o teste de Jest tenha aprovação.

Criar um projeto do Salesforce DX

A primeira etapa antes de testar é criar um projeto do Salesforce DX para armazenar seus testes de componentes web do Lightning e Jest.

No Visual Studio Code, abra a Paleta de comandos ao pressionar Ctrl+Shift+P (Windows) ou Cmd+Shift+P (macOS).
Insira sfdx.
Selecione SFDX: Criar projeto. Se não visualizar essa opção, conclua os pré-requisitos da primeira unidade do módulo antes de prosseguir.
Selecione Padrão.
Insira test-lwc como o nome do projeto.
Pressione Enter.
Selecione uma pasta para armazenar o documento.
Clique em Criar projeto e aguarde a abertura da nova janela do Visual Studio Code.
Clique em Exibir e selecione Terminal. Esta opção abre uma janela de terminal dentro do Visual Studio Code. O padrão do terminal é o diretório de nível superior do projeto. Você precisará do terminal posteriormente para executar comandos no diretório de trabalho deste projeto.

O que são Node.js e npm?

Node.js consiste em um tempo de execução de JavaScript criado no mecanismo V8 JavaScript do Chrome e npm é um gerenciador de pacotes para distribuição de módulos de código reutilizáveis. No universo de Node.js e npm, esses módulos de código reutilizáveis são conhecidos como módulos Node. Na terminologia do Salesforce, um módulo Node – código reutilizável que pode ser facilmente distribuído para vários projetos – é semelhante a pacotes desbloqueados.

Node.js e npm são ferramentas populares na caixa de ferramentas de um desenvolvedor JavaScript moderno. Saiba mais sobre o JavaScript moderno na trilha Aprenda a trabalhar com JavaScript.

Instalar o Node.js e o npm

Jest é um módulo Node, portanto, para usá-lo, você precisa instalar o Node e o npm. Vamos fazer isso agora.

Instale o Node.js em https://NodeJS.org/en/download/. Recomendamos utilizar a versão LTS (suporte de longo prazo).
Confirme se o Node.js está instalado. No terminal do Visual Studio Code que abrimos anteriormente, insira o seguinte comando.
```
node --version
```
Você deve ver a saída como v16.13.0 ou uma versão posterior.
Ao instalar Node.js, o npm também é instalado automaticamente.
Em um terminal, insira o seguinte comando.
```
npm --version
```
Você deve ver a saída como 8.1.0 ou uma versão posterior. Convém manter o npm atualizado.

Pode ser necessário atualizar o npm. Para isso, visite a Documentação do npmjs para obter mais detalhes sobre como atualizar o npm para diferentes sistemas operacionais.

O que é Jest?

Jest é uma ferramenta poderosa com recursos avançados para escrever testes de JavaScript. Jest pode coletar informações de cobertura de código e suporta simulação para ajudar a isolar os testes de dependências complexas. Os testes do Jest não são executados em um navegador ou se conectam a uma organização, e por isso são executados rapidamente. Utilize o Jest para escrever testes de unidade para todos os seus componentes web do Lightning. Para executar os testes do Jest para componentes web do Lightning, você precisa do módulo Node @salesforce/sfdx-lwc-jest em seu projeto do Salesforce DX.

Os testes do Jest funcionam apenas com componentes web do Lightning em projetos do Salesforce DX, de modo que não funcionam com componentes do Aura. Para componentes do Aura, consulte Testando componentes com o Lightning Testing Service.

Instalar módulo Node sfdx-lwc-jest

O módulo Node @salesforce/sfdx-LWC-Jest permite que você escreva, execute e depure testes do Jest para componentes web do Lightning. O Salesforce CLI facilita a instalação do Jest e suas dependências no projeto.

Confirme se a CLI está corretamente instalada e na versão mais recente executando o comando a seguir na linha de comando.
```
sf update
```
Você deve ver a saída como cli:Updating CLI.... (cli:Atualizando a CLI).
No terminal do Visual Studio Code, execute o comando a seguir no diretório de nível superior do seu projeto do Salesforce DX:
```
sf force lightning lwc test setup
```
Esta opção instala o npm e @salesforce/sfdx-lwc-jest no projeto. Os resultados devem ter essa aparência:

Se você receber um erro "Nenhuma versão correspondente encontrada para prettier-plugin-apex@^1.10.1", atualize o arquivo package.json devDependencies prettier-plugin-apex para ^1.10.0.

Você pode notar que o processo encontra algumas vulnerabilidades. Para nossos objetivos, tudo bem. Essas não são as vulnerabilidades que você está procurando.

Para outras maneiras de instalar o módulo Node do Jest, a Salesforce disponibiliza o módulo Node @salesforce/sfdx-lwc-jest como um pacote JavaScript no npm em https://www.npmjs.com/package/@salesforce/sfdx-lwc-jest e como um projeto de código aberto no GitHub em https://github.com/salesforce/sfdx-lwc-jest.
Execute esses comandos do NPM no diretório de nível superior do seu projeto de Salesforce DX:
npm install
Em seguida:
npm install @salesforce/sfdx-lwc-jest --save-dev

Executar testes do Jest

Excelente, você configurou seu projeto do Salesforce DX para poder executar os testes do Jest a serem escritos mais adiante neste módulo. Existem várias maneiras de executar os testes do Jest agora que tudo está configurado. Você pode acionar o script diretamente, usar os comandos do npm ou utilizar cliques no Visual Studio Code. Você pode executar um teste ou todos os testes em um arquivo ou projeto. Você pode até mesmo executar testes automaticamente quando o código que o teste cobre for alterado.

Vejamos algumas diferentes maneiras de executar testes do Jest.

O comando Node sfdx-lwc-jest

Você pode executar o script diretamente de onde foi instalado no projeto com o comando Node a seguir.

No terminal do Visual Studio Code, no diretório de nível superior do projeto do Salesforce DX, insira o comando a seguir.
```
node node_modules/@salesforce/sfdx-lwc-jest/bin/sfdx-lwc-jest
```
Ainda não há testes do Jest, e você visualizará a saída Nenhum teste encontrado, saída com código 1.
Se você receber um erro “Invalid sourceApiVersion”, ele se deve a uma extensão do VS Code atualizada com a versão mais recente do Salesforce.
error Invalid sourceApiVersion found in sfdx-project.json. Expected 51.0, found 52.0 (erro Invalid sourceApiVersion encontrado em sfdx-project.json.Esperado 51.0, encontrado 52.0)

No Visual Studio Code, no diretório nível superior, abra sfdx-project.json.

Atualize a linha de código com "sourceApiVersion" para a versão esperada da mensagem de erro que você recebeu.
"sourceApiVersion": "51.0"

Salve o arquivo.

É um ótimo começo, mas veremos como podemos torná-lo ainda melhor com a automação.

Automatizar scripts de teste com Package.json e npm

Uma meta de manter testes de unidade consiste em promover os desenvolvedores a escrevê-los e executá-los como parte de seu processo de desenvolvimento e integração contínua para que os bugs sejam identificados e corrigidos o mais brevemente possível. Ter que lembrar e digitar repetidamente comandos longos como o acima é contraproducente para sua meta. É aqui que entra a automação.

O npm tem uma grande flexibilidade de automação de scripts pronta para uso. A execução da instalação anterior adicionou uma série de opções à propriedade de scripts do arquivo package.json na raiz do seu projeto.

{
  "name": "test-lwc",
  ...  "scripts": {
    ...
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    ...
  },
  ...}

Se quiser executar todos os testes para seu projeto, execute este comando npm a partir do diretório de base do seu projeto.

npm run test:unit

Se você quiser executar testes em um diretório específico, o uso do comando acima em um diretório específico executará apenas os testes nesse diretório. Esta opção permite isolar o que você está testando.

Executar testes continuamente durante o desenvolvimento

Para essa opção, o Node depende do Git para "observar" o código. Para usar essa opção, tenha o Git inicializado para seu projeto. Para executar todos os testes de um único componente sempre que você salvar as alterações, altere os diretórios para o diretório do componente e execute o comando npm abaixo que utiliza o sfdx-lwc-jest com o parâmetro --watch. Como mencionado acima, você também pode executá-lo a partir da base do projeto e manter todos os testes no projeto executados para cada alteração.

npm run test:unit:watch

O Jest agora assiste todos os arquivos de componente para atualizações e executa todos os testes relevantes sempre que detecta uma alteração.

Executar testes no modo de depuração do Jest

Executar testes Jest no modo de depuração é útil se você quiser passar por seus testes e código de aplicativo para descobrir por que seus testes ou código não estão se comportando conforme o esperado. Você pode depurar testes Jest usando as seguintes ferramentas.

Visual Studio Code com o Pacote de extensões do Salesforce
Ferramentas para desenvolvedores do Chrome
Configuração avançada do depurador do Visual Studio Code

O Visual Studio Code com o Pacote de extensões do Salesforce oferece a opção mais simples e direta, enquanto as Ferramentas para desenvolvedores do Chrome atendem desenvolvedores da web experientes. Além disso, a configuração avançada para o depurador do VS Code permite que você trabalhe com diferentes cenários de depuração e de depuradores. A configuração avançada oferece a opção mais flexível para depurar seus testes Jest.

Para obter mais informações, consulte Depurar testes Jest para componentes Web do Lightning ou para obter informações sobre como resolver problemas do Jest, consulte Jest: Solução de problemas.

Executar testes e exibir cobertura de código

Para ver a cobertura de código dos testes, use a opção --coverage abaixo.

npm run test:unit:coverage

Executar testes com cliques no Visual Studio Code

As extensões do Salesforce Visual Studio Code fornecem controle e feedback visual para a execução de testes do Jest. Oferece opções para executar testes únicos, múltiplos ou todos os testes. Também oferece a capacidade de usar a opção --watch em um arquivo, pois o Git é pré-instalado no Visual Studio Code.

Clique no ícone de proveta de teste para abrir a barra lateral de teste. Se não visualizar o ícone, pode ser necessário criar um novo projeto SFDX. Na barra lateral de teste, há uma seção de testes LWC que exibe todos os testes do Jest que estão no projeto. Veja como fica a barra lateral de teste com os testes em seu projeto.

Testes LWC na barra lateral de teste no projeto test-lwc.

Clique no botão de reprodução para executar um teste ou vários testes em um projeto. Passe o cursor sobre o diretório ou teste individual para exibir o botão de reprodução. Quando há a execução de teste, os resultados são exibidos no terminal. Os resultados também são indicados por cores na barra lateral. Verde significa que passou. Azul refere-se a não executado, laranja mostra um teste ignorado e vermelho indica um teste com falha. Clicar no teste na barra lateral abre o arquivo e o leva diretamente ao teste.

Clique no ícone de atualização para limpar os resultados do teste.

Também há controles diretos no modo de exibição de arquivo de teste.

Exibição de arquivo de teste no Visual Studio Code.

Clique no botão de reprodução na barra de ferramentas principal para executar todos os testes no arquivo. Você também pode clicar em Executar teste acima de cada teste no arquivo para executar um teste específico.

Para executar todos os testes no arquivo sempre que você salvar as alterações, clique no ícone de relógio na barra de ferramentas principal. É uma ótima opção a ser utilizada quando você estiver trabalhando em testes no arquivo.

Uau! São muitos detalhes para serem recordados.

Certo, vamos escrever alguns testes.

Procurando ajuda?

Descubra mais