Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 16.1 — Teste de Renderização e Asserções com screen.getByText

Contexto: Teste de Renderização e Asserções com screen.getByText no contexto de Testes no Front-End com Vitest e Testing Library.

Requisitos de Execução:

  1. Testar componente <Botao texto='Entrar' /> conferindo presença do texto e papel acessível com @testing-library/react.

Resultado Esperado

Teste unitário de componente executado com 100% de cobertura com Vitest.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_16_1_SeuNome
  2. Envie na tarefa: Atividade Cap 16 - Testes no Front-End com Vitest e Testing Library
🔑 Gabarito de Código & Solução Comentada 
// Botao.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Botao } from './Botao';

describe('Botao Component', () => {
  it('renderiza o texto corretamente', () => {
    render(<Botao texto="Entrar" />);
    expect(screen.getByRole('button', { name: /entrar/i })).toBeInTheDocument();
  });
});

🔍 Nível 2: Prática

Problema 16.2 — Simulação de Eventos do Usuário com userEvent

Contexto: Simulação de Eventos do Usuário com userEvent no contexto de Testes no Front-End com Vitest e Testing Library.

Requisitos de Execução:

  1. Testar preenchimento de formulário e clique de botão com @testing-library/user-event.

Resultado Esperado

Evento de digitação e clique simulados com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_16_2_SeuNome
  2. Envie na tarefa: Atividade Cap 16 - Testes no Front-End com Vitest e Testing Library
🔑 Gabarito de Código & Solução Comentada 
// Form.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { FormLogin } from './FormLogin';

it('permite o usuario digitar credenciais', async () => {
  const user = userEvent.setup();
  render(<FormLogin />);
  const input = screen.getByPlaceholderText(/email/i);
  await user.type(input, 'admin@teste.com');
  expect(input).toHaveValue('admin@teste.com');
});

⚡ Nível 3: Integração

Problema 16.3 — Mock de Requisições HTTP com MSW (Mock Service Worker)

Contexto: Mock de Requisições HTTP com MSW (Mock Service Worker) no contexto de Testes no Front-End com Vitest e Testing Library.

Requisitos de Execução:

  1. Configurar handlers MSW para interceptar chamadas GET /api/produtos e testar renderização da lista.

Resultado Esperado

Requisição HTTP interceptada pelo MSW e renderizada no componente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_16_3_SeuNome
  2. Envie na tarefa: Atividade Cap 16 - Testes no Front-End com Vitest e Testing Library
🔑 Gabarito de Código & Solução Comentada 
// mswHandlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/produtos', () => {
    return HttpResponse.json([{ id: 1, nome: 'Teclado Mock' }]);
  }),
];

🏆 Nível 4: Desafio Corporativo

Problema 16.4 — Testes de Custom Hooks com renderHook e act

Contexto: Testes de Custom Hooks com renderHook e act no contexto de Testes no Front-End com Vitest e Testing Library.

Requisitos de Execução:

  1. Testar lógica do hook useContador isoladamente com renderHook(() => useContador()).

Resultado Esperado

Custom hook testado isoladamente sem necessidade de montar componente de UI.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_16_4_SeuNome
  2. Envie na tarefa: Atividade Cap 16 - Testes no Front-End com Vitest e Testing Library
🔑 Gabarito de Código & Solução Comentada 
// useContador.test.ts
import { renderHook, act } from '@testing-library/react';
import { useContador } from './useContador';

it('incrementa contador', () => {
  const { result } = renderHook(() => useContador());
  act(() => { result.current.incrementar(); });
  expect(result.current.count).toBe(1);
});