Categorias
front-end Linguagens de programação

Um guia prático de testes unitários para pessoas desenvolvedoras iniciantes no front-end usando ReactJS

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

  1. Encontrar e corrigir bugs, otimizando o tempo da pessoa QA
  2. Aumentar a confiabilidade da sua aplicação
  3. 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:

Até a próxima!🚀👩🏾‍💻

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *