38
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.”
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
Um exemplo de linha de raciocínio de testes, sendo ele um
<Button />
, quais são as funcionalidades de um botão?: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 consoleyarn 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.A estrutura base do teste ficaria mais ou menos assim:
describe('<Componente />', () => {
it('should test', () => {
expect()
});
});
<Home />
),“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
13- Nós capturamos o componente através do
15- Chamamos
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.
38