por José Fernandes, Front-end Developer 

Os testes unitários tem sua importância para criar uma segurança para o código, criando uma ambiente onde podemos identificar erros e corrigi-los antes que eles impactem a experiência do usuário dentro da sua aplicação. Os testes unitários são escritos de maneira que simulem o fluxo do usuário em determinadas ações dentro da aplicação, como por exemplo um clique em um botão, ou até mesmo o fluxo simples de renderização da página, isso serve para que possamos identificar um bug antes que ele suba para produção.  

Apesar da sua utilidade, os testes unitários muitas vezes acabam tomando muito tempo do desenvolvedor, e se tornando repetitivos, tendo essa dor, o Tech & Tips de hoje veio para ajudar o desenvolvedor a ganhar mais tempo para focar em outros problemas dentro do desenvolvimento, usaremos o GitHub Copilot, para aumentar a qualidade dos testes unitários e diminuir o tempo gasto no desenvolvimento deles. 

GitHub Copilot na Geração de Testes Unitários 

Vamos abordar duas formas para fazer os testes unitários com o Copilot, uma delas é usando ele para criar os testes unitários, onde ele irá analisar os arquivos do seu projeto para entender o contexto e desenvolver o texto de forma automática. Ou podemos passar para ele todos os cenários que queremos testar, pois nem sempre queremos algo extremamente complexo, para não testar cenários desnecessários e não aumentar a quantidade de código no projeto.  

Dentro do código, podemos clicar com o direito do mouse dentro do arquivo do componente que queremos testar e seguir esse fluxo, Copilot > Generate Test, assim ele vai analisar o código e gerar um teste unitário usando a lib que estiver instalada no projeto, após ele gerar o teste, ele mostrará um preview do código do teste unitário, onde podemos analisar e aceitar ou recusar o teste gerado. 

Mão no código 

Após você aceitar, já criará um arquivo com os testes unitários do component, fiz algumas modificações no teste gerado para ficar mais parecido com as regras que eu aplico nos testes dos projetos que trabalho, nesse exemplo abaixo ele já testou dois cenários, o primeiro é a renderização e navegação do sidebar de forma correta, e o outro a renderização dos “tiles” corretamente.

Mão no código

Customização e Eficiência

Caso você tenha um conjunto de cenários já listados, geralmente quando se trabalha com sprint, temos na própria task os cenários que a task terá que suprir  para poder passar para ser aceita, podemos listar esses cenários para o Copilot para que ele gere um teste unitário para esses pontos.

No exemplo abaixo, eu pedi para que ele fizesse um teste clicando em uma das opções do sidebar, mas você pode repassar para ele a lista de cenários na mesma linha, para acessar esse ‘inline copilot’, apertei ctrl + i, porém na sua máquina pode ter um atalho de teclado diferente, você pode acessar apertando no botão direito do mouse na tela do vscode, Copilot > Start inline chat.

Ele gerou o código com a opção de aceitar ou não a sugestão de código dele.

Porém, eu posso querer que ele use algo específico nos testes, como exemplo eu não gosto de usar o fireEvent, então iremos trocar para userEvent, que simulará melhor a ação do usuário, já que ele simula o movimento do mouse levando até o botão para ser clicado. Então, na imagem abaixo eu pedi para que ele usasse o userEvent nos testes.

E esse foi o código final que ele me gerou, já trazendo o import do userEvent e mudando o fireEvent para userEvent. Quando ele gera ele já vem com um comentário, você pode ler para entender melhor o código e depois retirar os comentários, para não poluir seu código.

Mão no código

Revisões de Código com GitHub Copilot e dicas

Lembrando que o copilot é um  assistente, então todo código gerado por ele, terá que ser revisado e sempre rodem os testes antes de abrir uma pr, pois caso sua pipeline não tenha nenhum validador que rode os testes nela própria, pode ser que o teste suba quebrado por problemas de configuração ou de dependências usando padrões desatualizados. Lembrando que você tem que ter o jest bem configurado no seu projeto, e todas as dependências dele, se você tiver algum problema com a configuração, pode usar o próprio chat do Github Copilot para gerar uma solução ao problema, copiando o problema e colando lá, ou apertando no problema para jogar ele no chat, ele identifica o arquivo e te retorna o possível problema. Uma dica é não só usar o copilot para tentar achar uma solução, se você tentar X vezes e o erro continuar, você pode usar a internet, para encontrar uma solução, como exemplo de canal de busca, o stackoverflow, ou mesmo ler a doc da dependência que você tem problema, nem sempre o Copilot vai acertar o problema, ou a solução, às vezes ele retorna uma solução complexa, para um problema simples.

Um exemplo de uso:

Com isso, podemos entender que é possível diminuir o trabalho repetitivo dentro dos testes, como por exemplo, pensar em um mock para poder fazer o teste, ou criar o fluxo do clique em um botão.

E por fim, podemos pedir um code Review das mudanças feitas no código, para entender possíveis melhorias, lembrando que nem sempre uma sugestão dada pelo Copilot é a melhor para a realidade do projeto, então teremos que pensar se realmente aquilo é melhor para o projeto. Abaixo temos o retorno do code Review que pedi para ele fazer, primeiro ele mostra os arquivos que foram modificados, sugestões, e como corrigir.

Dependências

Esse projeto foi criado só para demonstração, e utilizei como ferramentas para essa criação, o jest, React, Typescript, as extensões github copilot, e github copilot chat.

Aqui na Invillia, nós estamos sempre em busca das melhores respostas para as nossas próximas inovações. 

Conheça nossa forma de revolucionar: www.invillia.ai/ggf