React: escrevendo seus primeiros testes com Jest e Testing Library

Entendendo testes automatizados - Apresentação

Apresentando o instrutor e o curso

Olá! Meu nome é João Vitor Veronese Vieira, sou o criador do canal no YouTube Manual do FrontEnd, além de estar presente no Instagram e TikTok. Sou desenvolvedor sênior FrontEnd há quase 10 anos, formado em Ciência da Computação. Nasci no Rio Grande do Sul, atualmente trabalho para uma empresa dos Estados Unidos e estou cursando pós-graduação em Software Engineering FrontEnd.

Audiodescrição: João é um homem branco, de olhos castanhos, e veste uma camisa azul marinha. O cenário ao fundo está iluminado pela cor azul.

Seja muito bem-vindo ao nosso curso de testes iniciais em React. Neste curso, vamos aprender sobre testes unitários, testes de integração e testes end-to-end utilizando a aplicação React Checklist de estudos. Esta aplicação é uma lista de tarefas para um plano de estudos, onde podemos adicionar itens para estudar, excluí-los, editá-los, criar novos itens e concluir aqueles que já foram estudados, integrando-os à lista de concluídos.

Explicando a aplicação e os testes

Sejam todos bem-vindos e vamos começar!

Toda a aplicação desenvolvida em React, ao longo da carreira React aqui da Alura, utiliza uma API com um JSON Server, que é responsável por retornar os to-dos, ou seja, os itens. Ao longo do curso, vamos criar testes unitários e visualizar toda a cobertura (coverage) para entender o que falta testar e como podemos testar melhor.

Também vamos criar testes end-to-end que executam automaticamente e realizam testes na nossa aplicação, garantindo que conseguimos criar, editar e excluir itens. Nesse contexto, é possível visualizar o teste sendo realizado e garantindo que a edição está funcionando. Nos dias de hoje, com tanto código sendo construído e o foco tão grande em tecnologias e novas aplicações, se não testarmos nossas aplicações, a qualidade de vida não será tão boa. Isso ocorre porque, a cada deploy, é um novo teste, e torcemos para que tudo passe, para que a correção de um problema não cause outro.

Destacando a importância dos testes

Os testes, sejam eles unitários, de integração ou end-to-end, nos ajudam a ter confiança de que a aplicação funciona, permitindo que façamos deploy sem problemas ou dores de cabeça em momentos inoportunos, como uma sexta-feira à noite ou durante o fim de semana.

Para participar deste curso, é recomendável ter conhecimento em HTML, CSS, JavaScript e React. Todo o restante sobre testes será aprendido durante as aulas e vídeos. Vamos aprender juntos sobre testes, a importância deles, como executá-los e as boas práticas. Estamos aguardando na próxima aula.

[♪]

Entendendo testes automatizados - O que são testes e por que são essenciais

Introduzindo a importância dos testes em React

Olá, desenvolvedores. Iniciando a primeira aula do nosso curso de testes iniciais em React, vamos entender o que são esses testes e por que eles são tão essenciais no mundo do desenvolvimento de software.

Para começar e dar um contexto, vamos refletir: confiaríamos em um aplicativo que pode falhar apenas porque clicamos em um botão? Quando atualizamos um aplicativo no celular, por exemplo, esperamos que ele não apresente novos erros. Ou, ao clicar em algo importante, como realizar um pagamento, esperamos que funcione corretamente. Para que isso aconteça, alguém precisou testar e garantir que tudo estava funcionando antes mesmo de a versão ser disponibilizada.

Comparando testes de software com situações do cotidiano

Fazendo uma analogia com a vida real, muitos de nós conferimos se tiramos o ferro elétrico da tomada ao sair de casa. Da mesma forma, no desenvolvimento de software, precisamos realizar checagens, que são os nossos testes. Provavelmente, já passamos pela dúvida de estar longe de casa e nos perguntarmos se realmente tiramos o ferro da tomada.

Agora, imagine criar um aplicativo ou sistema e ter esse sentimento toda vez que o atualizamos, adicionamos uma nova funcionalidade ou fazemos qualquer tipo de alteração. Pior ainda, corrigimos um problema, mas não percebemos que essa correção afetou outra parte do sistema. Concordamos que essa situação não proporciona uma boa qualidade de vida para a pessoa desenvolvedora.

Destacando os benefícios dos testes de software

Sem testes, cada mudança se torna uma roleta russa. Nunca sabemos se haverá erro, se algo deixará de funcionar, se teremos sucesso, se o cliente reclamará ou nos elogiará. Como está a confiança do nosso time? Haverá falhas ou não? Os testes evitam retrabalho, aumentam a confiança nas entregas e diminuem a frustração dos usuários. Esse é um bom argumento para convencer a liderança sobre a importância de criar testes.

Além disso, os testes evitam grandes prejuízos financeiros. É lógico pensar que, ao evitar falhas e aumentar o sucesso das entregas, diminuímos as reclamações dos clientes. Esperamos, assim, conquistar mais clientes, tornar nossa aplicação mais conhecida e recomendada, e, com isso, trazer mais lucro para a empresa na qual trabalhamos.

Explicando a definição e os pilares dos testes de software

Pensando na solução para todos esses problemas e tudo que já comentamos, vale ressaltar que os testes evitam retrabalho, aumentam nossa confiança, previnem e diminuem a frustração dos usuários, além de evitar prejuízos financeiros para nossa equipe. A solução para os testes pode ser visualizada como uma pirâmide, onde juntamos e colocamos um ponto sobre o outro, provando ser a solução correta e com benefícios suficientes para implementação em nossa empresa.

A definição de testes de software é que eles são processos utilizados para verificar se um sistema, ou apenas uma parte dele, está de fato funcionando. Ao longo deste vídeo, destacamos quatro pilares positivos dos testes de software: a confiança que eles trazem, a economia ao detectar bugs mais cedo durante o processo de desenvolvimento, evitando gastos maiores no futuro, a agilidade, pois podemos fazer mudanças maiores e mais rápidas sem medo de quebrar tudo, e, finalmente, eles funcionam como uma documentação viva. Ou seja, os testes descrevem exatamente como o sistema deve funcionar e, conforme o sistema evolui, os testes evoluem junto. Diferente de uma página no Word que pode se tornar defasada se não for atualizada, os testes obrigatoriamente se mantêm atualizados junto com o sistema.

Comparando testes manuais e automatizados

Podemos estar pensando: quais são as opções para aplicarmos isso? Temos duas opções: os testes manuais, nos quais uma pessoa executa e observa a execução para entender os resultados, e os testes automatizados, que são scripts ou ferramentas que verificam automaticamente se o código está correto, seguindo as instruções que nós, como pessoas desenvolvedoras, passamos.

Entendemos que temos duas opções, mas precisamos escolher qual delas utilizar. Nos dias de hoje, não é necessário explicar muito por que os testes manuais são inviáveis. Primeiro, há o custo de uma pessoa que precisa executar os testes manualmente a cada atualização, o que gera muito trabalho. Além disso, devemos refletir sobre quantas pessoas seriam necessárias em uma equipe, por exemplo, com 20 pessoas desenvolvedoras. Agora, se já parece difícil, imagine como seria em uma Big Tech, onde podemos ter mil pessoas desenvolvedoras ou mais. A beleza da nossa área é que temos a opção de automatizar o que precisamos, e a melhor opção são os testes automatizados.

Introduzindo a próxima aula sobre categorização de testes automatizados

Na próxima aula, vamos mostrar uma imagem que ajudará a entender melhor como os testes automatizados podem ser categorizados e em quais situações devemos aplicar cada um deles.

Entendendo testes automatizados - A pirâmide de testes e as ferramentas mais utilizadas

Introduzindo a importância dos testes automatizados

Na aula passada, compreendemos o que são os testes, todos os benefícios que eles trazem para nossa equipe e nosso trabalho, além de sua importância. Também entendemos que atualmente dispomos de ferramentas suficientes e que é muito mais eficiente realizarmos isso de forma automatizada.

Se já tivemos contato com o código de qualquer aplicação, seja no trabalho, na faculdade ou mesmo para aprender algo, é comum notarmos que temos 15, 20 componentes em nossas aplicações, além de páginas, funções e estilos. Na verdade, geralmente lidamos com muito mais componentes e arquivos. Como testamos cada um deles? Quando testamos cada um deles? E de que forma fazemos isso utilizando as melhores práticas? Será que criamos um arquivo único e colocamos tudo lá dentro?

Explicando a pirâmide de testes

A boa notícia é que muitas pessoas desenvolvedoras no passado já enfrentaram esse problema. Por isso, convencionou-se no mercado três tipos de testes automatizados que podem nos ajudar de acordo com nossa necessidade, com o que nossa aplicação precisa e com o que nós, como time de engenharia, decidimos priorizar. Para facilitar esse entendimento, existe uma forma gráfica que prometemos na aula passada e que agora trouxemos para demonstrar essas categorias, chamadas de pirâmide de testes.

Na parte inferior da pirâmide, temos a escrita "unidade", onde ficam os testes que chamamos de unitários. No lado esquerdo, deixamos um símbolo de lebre, simbolizando a velocidade, e no lado direito, um símbolo de dinheiro. Na parte inferior, temos apenas um símbolo de dinheiro, mas na parte superior, temos três. O que isso quer dizer? Os testes unitários ou de unidade ficam na base da pirâmide porque são os testes mais rápidos e baratos de serem executados. Por isso, recomenda-se que os testes unitários sejam os mais numerosos em nossa aplicação.

Detalhando os tipos de testes

Vamos imaginar uma aplicação de e-commerce, por exemplo. Recomenda-se que todas as pequenas unidades, funções e componentes sejam testados unitariamente. Isso significa testar um por um, a menor parcela do sistema. Por isso, em termos numéricos, eles geralmente são muito mais numerosos que os testes de integração, que estão no meio da pirâmide.

Os testes de integração acoplam uma parte ou mais do sistema atuando em conjunto. Enquanto os testes de unidade testam apenas uma única função com uma responsabilidade específica, os testes de integração verificam como esses componentes se comportam em conjunto. Imagine que os testes de unidade podem ser para uma função que formata uma data, enquanto os testes de integração podem envolver um componente de calendário e um componente de formulário atuando juntos para pegar a data que o usuário selecionou.

Explorando os testes end-to-end

Por fim, no topo da pirâmide, temos os testes end-to-end, que são um acrônimo para representar "de ponta a ponta". Esses testes são mais caros de serem executados porque não são realizados em código; precisam necessariamente ser executados contra a aplicação em produção. No cenário de e-commerce, um bom exemplo de teste end-to-end seria um usuário entrar no e-commerce, adicionar um produto no carrinho e conseguir fechar a compra. Tudo isso é um único teste end-to-end.

É importante que nós, como pessoas desenvolvedoras, consigamos tomar essa decisão e ajudar nosso time a entender quando devemos focar nos testes de unidade, quando criar mais testes de integração ou end-to-end, pensando principalmente na proporção ideal entre o custo e o benefício que cada um deles trará para nosso time.

Apresentando a metodologia do troféu de testes

Como comentamos anteriormente, existe uma metodologia que já está em uso há algum tempo. Trouxemos uma metodologia mais recente que propõe algumas mudanças para facilitar o entendimento e atualizar a forma como enxergamos a pirâmide de testes. Essa nova metodologia foi criada por Kent C. Dodds e é chamada de troféu de testes.

Na base do troféu de testes, ao invés de termos os testes de unidade, recomenda-se uma pequena parcela de testes estáticos, aqueles que não mudam. A importância dos testes de unidade é reforçada na segunda camada, de baixo para cima. Os testes de integração possuem um papel muito mais importante, pois, segundo Kent C. Dodds, especialmente no mundo front-end, eles fazem mais sentido. Durante o curso, veremos que, para testar um componente, precisamos interagir com todo o ciclo e fluxo desse componente, desde o markup, template, HTML, até a lógica em JavaScript e, muitas vezes, o estilo que ele utiliza.

Comparando testes de unidade e integração

Diferente dos testes de unidade, onde podemos testar uma função pura, como formatar uma data, os testes de integração se aproximam mais do componente, pois ele precisa que alguns pilares funcionem para ser testado por completo. No topo, ainda temos os testes de sistema, ou testes end-to-end.

Apresentamos essa metodologia para mostrar que existe muita literatura sobre testes de software, mas podemos adaptá-la conforme fizer mais sentido para nosso projeto. Se não tivermos tempo para codificar todos os testes de unidade necessários, podemos diminuir esses testes e criar mais testes de integração. Se tivermos créditos suficientes para rodar as pipelines que executam os testes end-to-end, talvez faça mais sentido focar nesses testes de ponta a ponta.

Escolhendo ferramentas de teste

Lembramos que não existe uma solução única no desenvolvimento de software. Cada caso deve adotar a metodologia que fizer sentido para o time e o projeto. Com o passar dos anos, diversas ferramentas foram criadas para facilitar a criação e manutenção desses testes. No mundo JavaScript, é difícil escolher qual ferramenta usar. Para aumentar nosso arsenal de ferramentas e ter clareza sobre nossas escolhas, vamos analisar algumas delas.

Alguns exemplos de ferramentas disponíveis no mercado hoje, validadas e famosas para testes de software JavaScript, incluem Jest, Vitest, Testing Library, Enzyme, Karma, Mocha, Jasmine, Playwright, Cypress e Selenium. Cada uma delas geralmente é especializada em uma das três categorias: end-to-end, unidade ou integração, e muitas vezes se complementam. Para cobrir as três categorias na pirâmide de softwares da nossa aplicação, podemos usar uma ou mais dessas ferramentas.

Concluindo e preparando para a próxima aula

Pode parecer que vamos gastar semanas para escolher apenas uma delas, mas podemos pensar de outra forma. Na próxima aula, apresentaremos uma ferramenta interessante para acompanhar as tendências do mercado e descobrir quais dessas ferramentas possuem uma comunidade maior e mais suporte. Além disso, explicaremos mais sobre as ferramentas que escolheremos para seguir o curso. Até a próxima aula!

Sobre o curso React: escrevendo seus primeiros testes com Jest e Testing Library

O curso React: escrevendo seus primeiros testes com Jest e Testing Library possui 445 minutos de vídeos, em um total de 65 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Entendendo testes automatizados
• Primeiros testes com Jest + RTL
• Seletores e eventos
• Acessibilidade nos testes
• Testes comportamentais e estados
• Mocks, Stubs e cobertura de código
• Testes End-to-End (E2E) com Cypress