🚀 Capítulo 17: Testes - Simulador

🎯 Objetivo da Aula

Ao final desta aula, você entenderá como escrever testes automatizados para os seus componentes React usando a biblioteca React Testing Library, garantindo que as funções da sua nave funcionem antes de decolar.

---

🏢 O Cenário Prático (Seu Desafio)

Você não quer descobrir que o botão de acelerar está quebrado no meio de uma perseguição! Seu desafio hoje é criar um Simulador de Voo (Testes de Componente) para garantir que o botão de acelerar do Capítulo 4 realmente aumenta a velocidade na tela!

---

🧠 Fundamentos: A Teoria Traduzida

Testar em React é muito visual. Nós usamos uma ferramenta que “desenha” o componente em uma memória virtual e simula um usuário mexendo nele.

As principais funções que usamos são:

1. render: Desenha o componente para o teste.
2. screen: É como os olhos do usuário. Serve para procurar textos ou botões na tela (ex: screen.getByText('Acelerar')).
3. fireEvent: Simula ações do usuário, como cliques (ex: fireEvent.click(botao)).

---

📖 Exemplo Guiado: Testando o Botão de Acelerar

Vamos escrever um teste para o componente que tem o botão de acelerar.

🛠️ Passo a Passo (Código do Teste)

Crie um arquivo chamado App.test.jsx na pasta src e adicione o código:

import { render, screen, fireEvent } from '@testing-library/react';
import { expect, test } from 'vitest'; // Vitest é o executor padrão do Vite
import App from './App';
 
test('deve aumentar a velocidade ao clicar no botão acelerar', () => {
  // 1. Desenhamos o componente
  render(<App />);
 
  // 2. Procuramos o botão e o texto da velocidade
  const botaoAcelerar = screen.getByText('Acelerar');
  
  // 3. Verificamos se começa em 0
  expect(screen.getByText('Velocidade Atual: 0 km/h')).toBeTruthy();
 
  // 4. Simulamos o clique
  fireEvent.click(botaoAcelerar);
 
  // 5. Verificamos se mudou para 10
  expect(screen.getByText('Velocidade Atual: 10 km/h')).toBeTruthy();
});

🕹️ Como Executar e Testar no VS Code

1. Para rodar os testes em projetos Vite, geralmente instalamos o Vitest e rodamos:

   npm run test

2. O terminal mostrará se o teste passou (verde) ou se falhou (vermelho).

---

🛠️ Prática Obrigatória 1

Escreva um teste que verifique se o título “Velocímetro da Nave” está aparecendo na tela assim que o componente carrega.

---

🛠️ Prática Obrigatória 2

Escreva um teste para o botão “Frear” (da prática do Capítulo 4), garantindo que ele diminui a velocidade quando clicado.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

test('deve mostrar o título do velocímetro', () => {
  render(<App />);
  expect(screen.getByText('Velocímetro da Nave')).toBeTruthy();
});

---

← Capitulo Anterior | Proximo Capitulo →