Quando se fala em Testes de Software, sempre tem muito assunto para ser discutido, e no ambiente Frontend não é diferente, eu sempre me perguntei o que devo testar, qual a melhor abordagem para os testes, como encaixo as regras de negócios? Perguntas como essas são as que eu busco responder nesse post.

Certo, mas antes de tudo isso, o que são testes unitários?
Para responder essa pergunta vamos para uma abordagem mais simples. O que seria uma unidade de código? Bom, se pensarmos que essa unidade representa uma pequena parte de um todo e que ela é feita para atender uma parte específica do projeto, pode se dizer que o "unitário" nada mais é do que um pedaço que vai ser testado, para ver se ele funciona como esperado. Em um pensamento mais amplo, aquela unidade tem a expectativa de atender um objetivo/ação necessária no ambiente da sua aplicação, seja realizar uma transação, clique de botão, preenchimento de formulário, ou algo nesse sentido, a sua expectativa é que justamente ela faça esse comportamento da maneira como você a projetou.

Mas, essa não é nem de longe a única definição de testes unitários, porém o que eu quero que você lembre de agora em diante é que o teste unitário, realiza uma ação e que com o seu teste você espera que essa ação sera realizada da maneira como você imaginou.

Qual a melhor abordagem para escrever os testes unitários no Frontend?
Você pode encontrar diferentes abordagens quando se fala em testes unitários no Frontend, mas a que eu mais li sobre e vi muitos posts sobre ela é a : Triple AAA (A's Pattern) ou padrão dos três A's. Essa abordagem nada mais é do que a divisão dos testes em três etapas:

1. Arrange / Arranjo: Local onde será setado toda a configuração inicial do teste, ou seja, onde será renderizado o seu componente, onde a variável receberá o seu valor inicial, onde será mockado alguma função.
2. Act / Ação: Como o nome indica é justamente uma ação que vai ser tomada naquele objeto que foi renderizado, seja um clique de botão, preenchimento de um input, fetch de dados ou qualquer tipo de ação que trará uma expectativa futura.
3. Assert / Expectativa : A expectativa é justamente o que você espera que aconteça depois da sua ação, ou seja, se você clicou em um link, você espera ser redirecionado para a página específica, se você preencheu um input, você espera que aquele valor esteja presente nele.

Nesse print acima, você a divisão desses três tópicos no ambiente Frontend, onde estou testando um componente Header/cabeçalho e eu sigo esses três passos do padrão dos 3 A's.

O que devo testar?
No Frontend os testes são um pouco diferentes do Backend, ou seja, aqui você vai testar alguns comportamentos da sua aplicação que vão ser entregues diretamente ao cliente. Você deve escolher aqueles componentes que são partes importantes da sua aplicação, ou seja, aqueles que não podem realizar um comportamento incomum para o cliente, como por exemplo:
Formulários, Links, Carregamento de dados (fetchs), redirecionamentos, funções utilitárias

Mas o que faz com que esses testes sejam importantes?
Todos os testes de maneira geral, vão garantir o que se chama de Qualidade de Software, ou seja vai entregar a expectativa de um Software funcional, com base nas regras de negócios do cliente e principalmente entregando aquilo que foi proposto em contrato. Mas, o teste unitário é somente a ponta desse iceberg, se você for buscar mais a fundo, vai encontrar outros testes, como é mostrado na imagem abaixo:

Nessa pirâmide você vai encontrar o teste unitário na base e os de integração e E2E (End to end), completando os três tipos de teste. Aqui eu não vou entrar em mais detalhes sobre esses dois outros tipos, pois o intuito é somente falar dos unitários, mas deixo aqui o exemplo para quem queira saber mais sobre. Logo mais vou fazer um post, mostrando como configurar o ambiente de testes no Next.js com Jest e Testing Library.

Agradeço por apreciar o meu post :)