React JS: crie testes com Jest e Testing Library e garanta o funcionamento do Front-end

Conhecendo testes no Front-end - Apresentação

Boas-vindas! Meu nome é Neilton Seguins, estou muito contente de ter você comigo neste curso de React JS: testes automatizados no front-end. Eu te acompanharei nessa jornada!

Autodescrição: Sou um homem negro de pele escura, com cabelos curtos e também escuros. Tenho olhos castanhos escuros. Estou utilizando óculos com armação retangular e uma camiseta na cor azul escura. Ao fundo, há uma parede lisa com iluminação degradê, do azul ao rosa.

Quais os pré-requisitos?

Se você não tem nenhum conhecimento em React e nunca desenvolveu nenhuma aplicação React, recomendamos que você faça os cursos da Formação de React com JavaScript. Ou, se você estiver um pouco mais avançado, React com TypeScript.

O que vamos aprender?

Neste curso, vamos escrever testes para a aplicação do Bytebank, uma startup de um banco digital. Essa empresa não tem ainda uma cultura de escrita de testes, essa será a nossa tarefa!

Nessa jornada, vamos entender as vantagens de escrever testes para o nosso front-end. Descobriremos como utilizar bibliotecas comuns, como JS e o Test Library, para testar componentes React. Também simularemos a interação de pessoas usuárias com a nossa página, como ações de transferência e depósito, e estudaremos como buscar elementos na tela, utilizando o Test Library!

Estou muito empolgado para começar essa jornada de aprendizado, e você? Espero que você esteja também. Vamos começar o curso?

Conhecendo testes no Front-end - Importância dos testes

Vamos imaginar que somos pessoas desenvolvedoras front-end na start-up de banco digital Bytebank. Essa empresa está na fase de construção do MVP (Mínimo Produto Viável) para apresentá-lo a futuros investidores. Uma parte da aplicação já está pronta, vamos conferir, a seguir.

Aplicação do Bytebank

Ao acessá-la, temos a tela de quando o usuário está logado. Há uma barra preta na parte superior. À esquerda, temos o logotipo do Bytebank. À direita, o nome da pessoa logado. No caso, Joana Fonseca Gomes.

O corpo da página tem o fundo verde bem claro. Na lateral esquerda, há um menu com links para outras áreas da aplicação:

• Inicial
• Transferências
• Investimentos
• Outros serviços

Na lateral direita, há uma seção de extrato. No momento, não há transações listadas.

A parte central da página é dividida em dois componentes. Na parte superior, há um retângulo verde em que podemos checar o saldo. Atualmente, temos R$1000,00. Na parte inferior, temos um retângulo cinza, em que é possível realizar uma transação. Vamos preencher os campos dessa área para realizar nossa primeira transação:

• Selecione um tipo de transação: Depósito
• Digite um valor: 500

Ao pressionar o botão "Realizar transação", o depósito será listado na seção "Extrato", na lateral direita. É possível verificar o mês, a data completa, o tipo de transação e o valor.

Notaremos que o saldo mudou de R$1000,00 para R$500,00. Como fizemos um depósito, era esperado que o saldo mudasse de R$1000,00 para 1500,00. Ou seja, encontramos um erro na aplicação. Em breve, nos aprofundaremos nessa questão.

Vamos fazer uma nova transação. Dessa vez, uma transferência:

• Selecione um tipo de transação: Transferência
• Digite um valor: 500

Ao pressionar "Realizar transação", a transferência será listada abaixo do depósito, na área "Extrato", à direita. No componente de saldo, percebemos que o saldo aumentou de R$500,00 para R$1000,00.

Em outras palavras, parece que os sinais estão invertidos. No depósito, deveríamos somar o valor ao saldo e, na transferência, deveríamos subtrair, mas o contrário está acontecendo.

A importância dos testes

Se a Bytebank desenvolvesse uma cultura de testes, esse erro não aconteceria. Os testes asseguram a qualidade e confiabilidade da aplicação, pois garantem o que código faz ou não faz. É muito importante que os testes estejam presentes desde o começo do desenvolvimento.

Por exemplo, se essa aplicação já fosse de grande escala e tivesse milhares de clientes, um erro desses causaria problemas para muitas pessoas. É até difícil de imaginar a gravidade! O time de pessoas desenvolvedoras teria que investir bastante tempo procurando o bug no código. Já se tivéssemos testes, isso não seria necessário. Ou seja, os testes também trazem uma economia de tempo para quem desenvolve.

Agora que entendemos a escrita de testes, você pode estar se perguntando o podemos testar no front-end. Vamos estudar esse assunto no próximo vídeo.

Conhecendo testes no Front-end - Testes manuais

Agora que já conhecemos algumas das vantagens de testar aplicações, você deve estar se perguntando o que podemos testar em uma aplicação front-end, como a do Bytebank. Vamos conferir, a seguir.

Testes manuais

A pessoa responsável pela qualidade do código é geralmente chamada de Quality Assurance (ou QA). No Bytebank, essa pessoa ainda não foi contratada, então a própria pessoa desenvolvedora ficará responsável por realizar os testes.

Como a empresa não tem uma cultura de testes automatizados, ela faria os testes manualmente. Ou seja, teria que testar todo o fluxo como se fosse uma pessoa usuária. Checaria o logotipo e o nome na barra superior, o menu à esquerda com os links para outras páginas, a seção de extrato à direita. Assim com fizemos no vídeo anterior, a pessoa poderia realizar uma transação para conferir se ela aparece no extrato e se o saldo é alterado como esperado.

Contudo, vamos imaginar se a aplicação tivesse crescido bastante, ganhado inúmeras funcionalidades e houvesse várias informações em processamento, além de muitas partes se comunicando entre si. Testar todo o fluxo manualmente seria bastante trabalhoso e até improdutivo. Afinal, temos que garantir que, ao inserir uma nova funcionalidade, as demais partes da aplicação continuam funcionando normalmente.

Por isso, pessoas desenvolvedoras empregam testes automatizados! Podemos investir um pouco de tempo do nosso dia para escrever testes automatizados, garantindo a qualidade e confiabilidade do código, além de uma economia de tempo futuramente.

Agora que entendemos que escrever testes automatizados é muito melhor que testar a aplicação manualmente, vamos conhecer sobre os tipos de testes aplicáveis para programas e quais são interessantes para o front-end.

Sobre o curso React JS: crie testes com Jest e Testing Library e garanta o funcionamento do Front-end

O curso React JS: crie testes com Jest e Testing Library e garanta o funcionamento do Front-end possui 100 minutos de vídeos, em um total de 47 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:

• Conhecendo testes no Front-end
• Criando os primeiros testes
• Simulando interações com a página
• Explorando o Jest
• Pensando em CI/CD