Introdução a testes unitários com Jest e Testing Library React.js

É de extrema importância a implementação de testes em seus projetos, principalmente naqueles que serão grandes, e que existem uma grande probabilidade de inclusão de novos desenvolvedores durante o processo de criação.

“No começo criar testes pode atrasar o desenvolvimento e não mostrar explicitamente a vantagem da criação desses testes, mas com o crescimento da aplicação ou sendo uma aplicação pequena mas muito importante, é essencial ter essa confiança de desenvolver sabendo que o código novo não vai afetar a funcionalidade do antigo e abranger várias situações que podem acontecer com o componente.”

Entendendo os testes

As vezes algumas dúvidas surgem, do tipo, como que eu irei testar um componente? O que eu preciso testar nele? Preciso checar o valor das variáveis? O foco desses testes não são checar todas as linhas e entranhas do código, você precisa testar o tem que acontecer com o componente, como se fosse realmente um usuário.
Um exemplo de linha de raciocínio de testes, sendo ele um <Button />, quais são as funcionalidades de um botão?:

• Deve apareça na tela,
• Deve ter um atributo (href, role, onClick, etc...),
• Deve chamar uma função quando houver um click(onClick),
• Deve estar desativado quando eu mandar desativado,
• Deve estar ativo quando eu mandar ativado.

Criando nosso projeto

Para criar um projeto com tudo organizado e configurado, utilize o comando:

yarn create next-app --exemple with-jest with-jest-ap

Todos os testes terão uma extensão .test.jsx ou spec.jsx , é uma boa prática incluir todos em uma pasta na raiz do projeto chamada __tests__, agora para rodar o nosso primeiro teste que já vem implementado, basta digitar no console

yarn test

E Teremos um output parecido com esse:

Basta pressionar a tecla “a” e ele ia rodar no formato --watch passando esse parâmetro, é como se o teste ficasse assistindo toda alteração que é salva no projeto e ele roda os testes novamente, evitando o trabalho de ficar digitando yarn dev toda hora no console.

Testes na prática:

A estrutura base do teste ficaria mais ou menos assim:

describe('<Componente />', () => {
  it('should test', () => {
    expect()
  });
});

• describe: seria um conjunto de testes de um mesmo componente (No caso o <Home />),
• it: seria uma unidade de teste, uma boa prática começar com “should” para ficar mais intuitivo,
• expect: espera que contem algo.

“Uma boa prática seria na parte do “describe” sempre colocar o nome do Componente <Home /> para ficar claro onde o teste falhou, já que nunca teremos dois componentes com o mesmo nome.”

Agora trazendo para um cenário um pouco mais real, iremos testar um componente <Button /> checando algumas coisas simples, como texto e atributo.

6- Importação necessárias para rodar os testes,
7- Importação do componente.
9- Agrupamento dos testes, descrever o componente para ficar fácil a identificação,
10- O teste em si, lembrando de sempre começar com should, para ficar intuitivo,
11- Utilizando o render() função para "renderizar" o componente,
13- Nós capturamos o componente através do
getByRole() e jogamos ele na variável button,
15- Chamamos expect() funcão para chegar se o button existe no documento com a função toBeInTheDocument().

E com isso encerro a primeira parte da introdução de testes unitários utilizando Jest e Testing Library no React.js. Claro que tudo isso é apenas um pedaço desse mundo gigante de testes no Front-end, essa introdução foi só para mostrar na pratica como podemos testar alguns componentes um pouco mais simples.

Fontes:
https://pt-br.reactjs.org/
https://jestjs.io/pt-BR/
https://testing-library.com/