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

Nesse guia, eu trago uma introdução de teste unitários utilizando duas ferramentas, Jest e Testing Library no 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/