Testes front-end
O que e como testar na sua aplicação de maneira rápida e produtiva.
Na segunda edição da JS+ Talks falamos um pouco sobre como testar as nossas aplicações front-end usando React, Jest e React Testing library. Nesse artigo darei um breve resumo da talk que está disponível no canal da Juntos no youtube.
Vamos lá. Com o passar das eras, as nossas aplicações foram ganhando cada vez mais complexidade no front, desde micro interações com UI, até gerenciamento e compartilhamento de dados através de inúmeros componentes que se comunicam entre si ou não.
Diante desse cenário, surge a necessidade de trazer mais segurança e previsibilidade ao nosso código no front, algo que já temos no backend a muito tempo e que agora se tornou igualmente importante para nós frontends ou frontenders seja lá como você queira chamar.
Não vou me estender sobre as razões do tema, já dou uma breve pincelada sobre o tema na talk (vídeo acima). Vamos aqui focar um em um setup bem básico para que você possa acompanhar a talk e conduzir seus próprios testes.
Indo direto ao ponto.
Vamos criar uma aplicação react usando o create-react-app e escrever um dos testes que temos lá na talk, o mais simples deles. Um button que recebe uma prop como texto e quando clicado, tem seu texto alterado para uma string contida dentro de um setState.
No caso acima estou usando styled-components, se preferir, pode usar css importando no seu componente.
Escrevendo nosso teste passo a passo
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import Button from "./Button";Nas linhas acima, estamos importando nosso componente, uma extensão para o método expect do jest e os artefatos render e fireEvent.
Acima temos a estrutura do nosso caso de testes. Uma descrição, temos na Juntos o padrão de inserir a tag do componente, mas você pode criar o seu próprio padrão. Assim como uma frase descritiva para o case em questão.
Dentro do case temos comentários que eu particularmente uso para guiar a escrita do teste. As sentenças: given, when e then, onde sempre que possível divido os testes em 3 etapas na seguinte frase:
Dados os valores iniciais e esperados, quando alguma ação acontecer, então espero que o resultado da ação esteja de acordo com o esperado.
Essa metodologia de testes também é conhecida como AAA (Arrange, Act, Assert).
A seguir temos o teste escrito com comentários sobre o que está acontecendo linha a linha:
Pronto. Temos nosso primeiro caso de testes que verifica se o botão está renderizado corretamente com o texto que foi passado via props. O jest irá gerar para você uma pasta chamada __snapshots__ (geralmente no mesmo nível de diretório aonde está o seu arquivo de testes) lá, ele irá guardar todos os snapshots contidos no seu teste, recomendo que ao longo do processo você confira eles.
O próximo passo então é escrever o caso no qual o botão é clicado e o texto dentro dele é alterado pelo setState. A seguir, novamente, o código comentado:
E é só. Temos as funções principais do nosso botão cobertas por testes. Na talk do vídeo no início do post, temos testes mais complexos e elaborados, porém, todos seguem o mesmo princípio e estrutura do que fizemos até aqui.
O link para o repositório com todos os testes segue abaixo:
E por hoje é só pessoal. Espero ter ajudado e até a próxima.
