Como pessoas iniciantes na programação, uma das ferramentas que pode nos dar confiança em quase toda linha de código que a gente escreve são os testes unitários.
Além disso, o mercado espera que advoguemos pela qualidade do nosso trabalho. Por isso, em entrevistas de emprego costumam perguntar: “Você tem alguma familiaridade com testes unitários?”
E pra você que está estudando ReactJS, esse artigo vai te ajudar a responder essa pergunta com um “SIM”bem grandão. 🙂 Vamos nessa?
O que são testes unitários?
Testes unitários são testes realizados de forma isolada para garantir qualidade para pequenas partes do seu código, como as funções, as classes e por aí vai.
3 benefícios de realizar testes unitários
- Encontrar e corrigir bugs, otimizando o tempo da pessoa QA
- Aumentar a confiabilidade da sua aplicação
- Servir como documentação
Vamos aprender como fazer os testes unitários dos componentes numa aplicação bem simples em reactjs?
Ferramentas
Em vez de usar Jest, vamos usar o vitest como ambiente para rodar nossos testes. Esta é uma alternativa para projetos criados com vite. Se você ainda não conhece o vitest, se liga no que sua própria documentação diz sobre ele:
Vitest é uma estrutura de teste de unidade extremamente rápida, desenvolvida pela Vite.
Já para criação do testes a gente vai automatizar a forma como a pessoa usuária poderia interagir com a nossa tela. Pra isso vamos usar o testing library react que segundo a documentação é:
Uma família completa de pacotes para criar testes utilizando boas praticas centradas no comportamento da pessoa usuária.
Entendendo um teste unitário
Bloco de teste
- Renderizar o componente que queremos testar
- Encontrar os elementos que queremos interagir
- Interagir com esses elementos
- Afirmar o resultado esperado
describe, test e expect
- describe serve para criarmos um conjunto de testes
- test serve para criar um caso de teste
- expect serve para descrever o que esperamos com resultado ideal para aquele teste
screen, render, userEvent, queryBy…/findBy…, toBeInTheDocument/toHaveTextContent
- screen é o que nos permite visualizar a tela e a partir daí encontrar os nós do DOM
- render é o metodo que renderiza nosso componente no ambiente de testes
- userEvent simula alguns eventos e interações da pessoa usuária
- queryBy…/findBy… são as queries, alguns dos muitos metódos que nos ajudam a encontrar, buscar, trazer um ou mais elementos da tela
- toBeInTheDocument/toHaveTextContent são os matchers, alguns dos muitos metodos que nos ajudam a comparar o resultado esperado com o resultado recebido. Eles nos ajudam também com o log de mensagens de erro.
Vamos para o tutorial
Configurando ambiente
Vamos usar o vite para criar nosso projeto que vem um contador por padrão, não esqueça de escolher react as duas vezes que aparecem para escolher a linguagem:
npm create vite@latest aprendendo-testes
Vamos entrar no projeto:
cd aprendendo-testes
Vamos baixar as dependências importante para o projeto reactjs funcionar:
npm install
Agora vamos configurar nosso projeto para receber e rodar testes unitários com vitest e testing library react:
Passo 1: Instalar as dependências como dependências de desenvolvimento
npm install vitest -D
npm install @vitest/ui @testing-library/jest-dom @testing-library/react @testing-library/react-hooks @testing-library/user-event jsdom -D --force
Passo 2: Inserir os scripts no package.json
"test": "vitest", "test:ui": "vitest --ui"
Passo 3: Inserir a propriedade test no vite.config
test: {
globals: true,
setupFiles: 'src/setupTests.js',
}
Passo 4: Criar o setupTests.js
import '@testing-library/jest-dom'
export { default as userEvent } from '@testing-library/user-event'
Agora vamos criar nossos testes:
Passo 5: Criar arquivo de testes
App.test.jsx
Passo 6: Incluir a config do jsdom no arquivo de cada teste
/** * @vitest-environment jsdom */
Passo 7: Importar tudo que é necessário para realizar os testes
import { describe, test } from 'vitest'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import App from './App'
Passo 8: Agora vamos escrever nosso primeiro teste que cobre os caos de renderizar corretamente o h1 e testa se o contador funciona:
describe('App', () => {
test('should return the correct text', () => {
render(<App />)
expect(screen.getByText('Vite + React')).toBeInTheDocument()
})
test('should return 1 when the user click one time at button', () => {
render(<App />)
const buttonElement = screen.getByRole('button')
expect(screen.queryByText('count is 0')).toBeInTheDocument()
userEvent.click(buttonElement)
waitFor(() => expect(screen.queryByText('count is 1')).toBeInTheDocument() )
})
})
Passo 9: Agora vamos rodar nossos testes:
npm run test ou npm run test:ui
Prontinho! Esse aqui é o resultado esperado:
Espero que esse guia tenha te ajudado. Me conta nos comentários se tentou fazer.
Continue seus estudos e avance:
- TDD (Programação orientada a testes): https://www.youtube.com/watch?v=Z9RzEyNwICg
- Mais um tutorial de testes em uma aplicação reactjs usando vite e vitest, com repositório no github para forkar e clonar o projeto: https://github.com/simaraconceicao/testing-reactjs-using-vitest
- Documentação do React Testing Library: https://testing-library.com/docs/
- Documentação do Vitest: https://vitest.dev/guide/#configuring-vitest
- Documentação do Vite: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
- Estude sobre melhores práticas e pensamento crítico para criação de testes
Até a próxima!🚀👩🏾💻