30
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 <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.
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.
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.
30