Sobrecarregue os testes de aplicativos React com Wallaby.js

Este artigo foi gentilmente apoiado por nossos queridos amigos da Wallaby, que criam ferramentas incríveis para desenvolvedores que ultrapassam os limites do que é tecnicamente possível e, ao fazê-lo, tornam os desenvolvedores de software mais eficientes, mais eficazes e mais felizes. Obrigado!

Uma coisa que você descobrirá muito rapidamente quando começar a escrever testes para um aplicativo é que deseja executar seus testes constantemente quando estiver codificando. Ter que alternar entre o editor de código e a janela do terminal (ou no caso do VS Code, o terminal integrado) adiciona uma sobrecarga e reduz sua produtividade à medida que você cria seu aplicativo. Em um mundo ideal, você teria feedback instantâneo sobre seus testes diretamente em seu editor enquanto escreve seu código. Digite Wallaby.js.

O que é Wallaby.js?

Wallaby.js é um executor de testes inteligente para JavaScript que executa seus testes continuamente. Ele relata a cobertura de código e outros resultados diretamente ao seu editor de código imediatamente à medida que você altera seu código (mesmo sem salvar o arquivo). A ferramenta está disponível como uma extensão de editor para VS Code, IntelliJ Editors (como WebStorm e IntelliJ IDEA), Atom, Sublime Text e Visual Studio.

Por que Wallaby.js?

Como dito anteriormente, o Wallaby.js visa melhorar sua produtividade no desenvolvimento diário de JavaScript. Dependendo do seu fluxo de trabalho de desenvolvimento, o Wallaby pode economizar horas por semana reduzindo a troca de contexto. O Wallaby também fornece relatórios de cobertura de código, relatórios de erros e outros recursos que economizam tempo, como depuração de viagem no tempo e histórias de teste.

Introdução ao Wallaby.js no VS Code

Vamos ver como podemos obter os benefícios do Wallaby.js usando o VS Code.

Nota: Se você não estiver usando o VS Code, confira aqui as instruções sobre como configurar outros editores.

Instale a extensão de código VS Wallaby.js

Para começar, instalaremos a extensão Wallaby.js VS Code.

Após a instalação da extensão, o runtime principal do Wallaby.js será baixado e instalado automaticamente.

Licença Wallaby

O Wallaby fornece uma licença de código aberto para projetos de código aberto que buscam usar o Wallaby.js. Visite aqui para obter uma licença de código aberto. Você pode usar a licença de código aberto com o repositório de demonstração deste artigo.

Você também pode obter uma licença de avaliação de 15 dias totalmente funcional visitando aqui.

Se você quiser usar o Wallaby.js em um projeto que não seja de código aberto além do período de licença de avaliação de 15 dias, poderá obter uma chave de licença no site do wallaby.

Adicionar chave de licença ao código VS

Depois de obter uma chave de licença, vá até o VS Code e na paleta de comandos procure por “Wallaby.js: Manage License Key”, clique no comando e você verá uma caixa de entrada para inserir sua chave de licença e, em seguida, pressione enter e você receberá uma notificação de que Wallaby.js foi ativado com sucesso.

Wallaby.js e reagir

Agora que temos o Wallaby.js configurado em nosso editor de VS Code, vamos sobrecarregar o teste de um aplicativo React com Wallaby.js.

Para nosso aplicativo React, adicionaremos um recurso simples de upvote/downvote e escreveremos alguns testes para nosso novo recurso para ver como Wallaby.js se comporta na mistura.

Criando o aplicativo React

Nota : Você pode clonar o repositório de demonstração, se quiser, ou pode seguir abaixo.

Vamos criar nosso aplicativo React usando a ferramenta CLI create-react-app.

 npx create-react-app wallaby-js-demo

Em seguida, abra o projeto React recém-criado no VS Code.

Abra src/App.js e inicie Wallaby.js executando: “Wallaby.js: Start” na paleta de comandos do VS Code (como alternativa, você pode usar a combinação de atalhos — Ctrl + Shift + R R se estiver em uma máquina Windows ou Linux , ou Cmd + Shift + R R se estiver em um Mac).

Quando o Wallaby.js for iniciado, você deverá ver seus indicadores de cobertura de teste à esquerda do seu editor, semelhante à captura de tela abaixo:

Wallaby.js fornece 5 indicadores coloridos diferentes na margem esquerda do seu editor de código:

1. Cinza: significa que a linha de código não é executada por nenhum de seus testes.
2. Amarelo: significa que parte do código em uma determinada linha foi executada, mas outras partes não.
3. Verde: significa que todo o código em uma linha foi executado por seus testes.
4. Rosa: significa que a linha de código está no caminho de execução de um teste com falha.
5. Vermelho: significa que a linha de código é a fonte de um erro ou expectativa falhada, ou na pilha de um erro.

Se você observar a barra de status, verá as métricas do Wallaby.js para este arquivo e está mostrando que temos uma cobertura de teste de 100% para src/App.js e um teste de aprovação única sem falha no teste. Como Wallaby.js sabe disso? Quando iniciamos o Wallaby.js, ele detectou que src/App.js tem um arquivo de teste src/App.test.js , ele executa esses testes em segundo plano para nós e convenientemente nos fornece os feedbacks usando seus indicadores de cores e também nos dando uma métrica resumida em nossos testes na barra de status.

Ao abrir também src/App.test.js , você verá comentários semelhantes de Wallaby.js

Atualmente, todos os testes estão passando no momento, então temos todos os indicadores verdes. Vamos ver como Wallaby.js lida com testes com falha. Em src/App.test.js vamos fazer o teste falhar alterando a expectativa do teste assim:

 // src/App.test.js expect(linkElement).not.toBeInTheDocument();

A captura de tela abaixo mostra como seu editor ficaria agora com src/App.test.js aberto:

Você verá os indicadores mudarem para vermelho e rosa para os testes com falha. Observe também que não precisamos salvar o arquivo para Wallaby.js para detectar que fizemos uma alteração.

Você também notará a linha em seu editor em src/App.test.js que gera o erro do teste. Isso é feito graças ao registro avançado do Wallaby.js. Usando o registro avançado do Wallaby.js, você também pode relatar e explorar valores de tempo de execução ao lado de seu código usando console.log , um formato de comentário especial //? e o comando VS Code, Wallaby.js: Show Value .

Agora vamos ver o fluxo de trabalho Wallaby.js para corrigir testes com falha. Clique no indicador de teste Wallaby.js na barra de status para abrir a janela de saída Wallaby.js. (“✗ 1 ✓ 0”)

Na janela de saída do Wallaby.js, ao lado do teste com falha, você deverá ver um link “Teste de depuração”. Pressionar Ctrl e clicar nesse link acionará o depurador de viagem no tempo Wallaby.js. Quando fizermos isso, a janela Ferramentas do Wallaby.js será aberta ao lado do seu editor e você deverá ver a seção depurador do Wallaby.js, bem como as seções Explorador de valores e Cobertura do arquivo de teste.

Se você quiser ver o valor de tempo de execução de uma variável ou expressão, selecione o valor em seu editor e o Wallaby.js o exibirá para você.

Além disso, observe o link “Open Test Story” na janela de saída. A história de teste do Wallby.js permite que você veja todos os seus testes e o código que eles estão testando em uma única visualização em seu editor.

Vamos ver isso em ação. Pressione Ctrl e clique no link - você deve conseguir ver a história de teste Wallaby.js aberta em seu editor. O Test Story Viewer do Wallaby fornece uma maneira única e eficiente de inspecionar qual código seu teste está executando em uma única visualização lógica.

Outra coisa que exploraremos antes de corrigir nosso teste com falha é o aplicativo Wallaby.js. Observe o link na janela de saída do Wallaby.js: “Launch Coverage & Test Explorer”. Clicar no link iniciará o aplicativo Wallaby.js, que fornecerá uma visão panorâmica compacta de todos os testes em seu projeto.

Em seguida, clique no link e inicie o aplicativo Wallaby.js em seu navegador padrão via https://localhost:51245/ . Wallaby.js detectará rapidamente que temos nosso projeto de demonstração aberto em nosso editor, que o carregará automaticamente no aplicativo.

Veja como o aplicativo deve ficar agora:

Você deve conseguir ver as métricas do teste na parte superior do aplicativo Wallaby.js. Por padrão, a guia Testes no aplicativo é aberta. Ao clicar na guia Arquivos , você poderá ver os arquivos em seu projeto, bem como seus relatórios de cobertura de teste.

De volta à guia Testes , clique no teste e você verá o recurso de relatório de erros Wallaby.js à direita:

Agora que cobrimos tudo isso, volte ao editor e corrija o teste com falha para deixar Wallaby.js feliz, revertendo a linha que alteramos anteriormente para isso:

 expect(linkElement).toBeInTheDocument();

A janela de saída do Wallaby.js agora deve se parecer com a captura de tela abaixo e seus indicadores de cobertura de teste devem estar todos passando agora.

Implementando nosso recurso

Exploramos Wallaby.js no aplicativo padrão criado para nós por create-react-app . Vamos implementar nosso recurso de upvote/downvote e escrever testes para isso.

A interface do nosso aplicativo deve conter dois botões, um para voto positivo e outro para voto negativo, e um único contador que será incrementado ou decrementado dependendo do botão que o usuário clicar. Vamos modificar src/App.js para ficar assim.

 // src/App.js import React, { useState } from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const [vote, setVote] = useState(0); function upVote() { setVote(vote + 1); } function downVote() { // Note the error, we will fix this later... setVote(vote - 2); } return ( <div className='App'> <header className='App-header'> <img src={logo} className='App-logo' alt='logo' /> <p className='vote' title='vote count'> {vote} </p> <section className='votes'> <button title='upVote' onClick={upVote}> <span role='img' aria-label='Up vote'> </span> </button> <button title='downVote' onClick={downVote}> <span role='img' aria-label='Down vote'> </span> </button> </section> </header> </div> ); } export default App;

Também estilizaremos um pouco a interface do usuário. Adicione as seguintes regras a src/index.css

 .votes { display: flex; justify-content: space-between; } p.vote { font-size: 4rem; } button { padding: 2rem 2rem; font-size: 2rem; border: 1px solid #fff; margin-left: 1rem; border-radius: 100%; transition: all 300ms; cursor: pointer; } button:focus, button:hover { outline: none; filter: brightness(40%); }

Se você olhar para src/App.js , você notará alguns indicadores cinzas de Wallaby.js nos indicando que alguma parte do nosso código ainda não foi testada. Além disso, você notará que nosso teste inicial em src/App.test.js está falhando e o indicador da barra de status Wallaby.js mostra que nossa cobertura de teste caiu.

Essas dicas visuais do Wallaby.js são convenientes para desenvolvimento orientado a testes (TDD), pois obtemos feedback instantâneo sobre o estado de nosso aplicativo em relação aos testes.

Testando nosso código de aplicativo

Vamos modificar src/App.test.js para verificar se o aplicativo é renderizado corretamente.

Nota : Usaremos a React Testing Library para nosso teste que sai da caixa quando você executa create-react-app . Consulte os documentos para o guia de uso.

Vamos precisar de algumas funções extras de @testing-library/react , atualize sua importação @testing-library/react para:

 import { render, fireEvent, cleanup } from '@testing-library/react';

Em seguida, vamos substituir o teste único em src/App.js por:

 test('App renders correctly', () => { render(<App />); });

Imediatamente você verá o indicador ficar verde na linha src/App.test.js onde testamos a renderização do aplicativo e também onde estamos chamando render em nosso src/App.js .

Em seguida, testaremos se o valor inicial do estado de vote é zero(0).

 it('Vote count starts at 0', () => { const { getByTitle } = render(<App />); const voteElement = getByTitle('vote count'); expect(voteElement).toHaveTextContent(/^0$/); });

Em seguida, testaremos se clicar no botão upvote incrementa o voto:

 it('Vote increments by 1 when upVote button is pressed', () => { const { getByTitle } = render(<App />); const upVoteButtonElement = getByTitle('upVote'); const voteElement = getByTitle('vote count'); fireEvent.click(upVoteButtonElement); expect(voteElement).toHaveTextContent(/^1$/); });

Também testaremos a interação de downvote da seguinte forma:

 it('Vote decrements by 1 when downVote button is pressed', () => { const { getByTitle } = render(<App />); const downVoteButtonElement = getByTitle('downVote'); const voteElement = getByTitle('vote count'); fireEvent.click(downVoteButtonElement); expect(voteElement).toHaveTextContent(/^-1$/); });

Ops, este teste está falhando. Vamos descobrir por quê. Acima do teste, clique no link View story code lens ou no link Debug Test na janela de saída Wallaby.js e use o depurador para passar para a função downVote . Temos um bug… deveríamos ter diminuído a contagem de votos em 1, mas em vez disso, estamos diminuindo em 2. Vamos corrigir nosso erro e diminuir em 1.

 src/App.js function downVote() { setVote(vote - 1); }

Veja agora como os indicadores do Wallaby ficam verdes e sabemos que todos os nossos testes estão passando:

Nosso src/App.test.js deve ficar assim:

 import React from 'react'; import { render, fireEvent, cleanup } from '@testing-library/react'; import App from './App'; test('App renders correctly', () => { render(<App />); }); it('Vote count starts at 0', () => { const { getByTitle } = render(<App />); const voteElement = getByTitle('vote count'); expect(voteElement).toHaveTextContent(/^0$/); }); it('Vote count increments by 1 when upVote button is pressed', () => { const { getByTitle } = render(<App />); const upVoteButtonElement = getByTitle('upVote'); const voteElement = getByTitle('vote count'); fireEvent.click(upVoteButtonElement); expect(voteElement).toHaveTextContent(/^1$/); }); it('Vote count decrements by 1 when downVote button is pressed', () => { const { getByTitle } = render(<App />); const downVoteButtonElement = getByTitle('downVote'); const voteElement = getByTitle('vote count'); fireEvent.click(downVoteButtonElement); expect(voteElement).toHaveTextContent(/^-1$/); }); afterEach(cleanup);

Depois de escrever esses testes, Wallaby.js nos mostra que os caminhos de código ausentes que identificamos inicialmente antes de escrever qualquer teste já foram executados. Também podemos ver que nossa cobertura aumentou. Novamente, você notará como escrever seus testes com feedback instantâneo do Wallaby.js permite que você veja o que está acontecendo com seus testes diretamente em seu navegador, o que, por sua vez, melhora sua produtividade.

Conclusão

Neste artigo, você viu como o Wallaby.js melhora a experiência do desenvolvedor ao testar aplicativos JavaScript. Investigamos alguns recursos importantes do Wallaby.js, configuramos no VS Code e testamos um aplicativo React com Wallaby.js.

Recursos adicionais

• Tutorial do VS Code, Wallaby.js
• O aplicativo de demonstração para este projeto pode ser encontrado no GitHub.