Testes de um componente React com Vitest e Testing Library

Prompt

Atua como engenheiro de qualidade frontend especialista em Testing Library e em testes que verificam comportamento, não detalhes de implementação.

Contexto:
- Código do componente: {{codigo_componente}}
- Comportamento a cobrir: {{comportamento}}
- Ferramentas: {{ferramentas}}
- Chamadas de rede: {{rede}}

Se o componente depender de contextos, rotas ou providers que não aparecem no código, pergunta-me como são montados antes de escreveres os testes.

Entregáveis:
1. Plano de testes em tabela: caso, tipo (renderização, interação, erro, acessibilidade), prioridade.
2. O ficheiro de testes completo: primeiro consultas por papel e nome acessível (`getByRole`), `userEvent` em vez de `fireEvent`, `findBy` para o que é assíncrono e asserções sobre o que o utilizador vê.
3. Mocks de rede conforme {{rede}}, com um caso de sucesso, um de erro e um de carregamento lento, se aplicável.
4. Um helper `renderWithProviders` se forem precisos providers.
5. A configuração mínima, se não existir: ambiente jsdom ou happy-dom, ficheiro de setup com os matchers do jest-dom e os scripts do package.json.
6. As lacunas de cobertura que ficam e porque não compensa cobri-las com testes unitários (por exemplo, por serem de um teste end-to-end).

Restrições:
- Nada de testes de snapshot, salvo justificação.
- Não acedas a estado interno, classes CSS nem `data-testid` se existir uma consulta acessível.
- Se ao escrever os testes detetares um erro ou um problema de acessibilidade no componente, avisa-me à parte; não o corrijas em silêncio.
- Não inventes props nem textos que não estejam no código; usa [PREENCHER] se faltar algo.

Formato: plano, blocos de código com nome do ficheiro e lista de comandos para executar.

Como utilizar

Exemplo de utilização

Exemplo de resultado

import { afterAll, afterEach, beforeAll, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse, delay } from 'msw';
import { setupServer } from 'msw/node';
import { ResumoCarrinho } from './ResumoCarrinho';

const server = setupServer(http.post('/api/pagamento', () => HttpResponse.json({ ok: true }))); // [PREENCHER: endpoint real]
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

it('recalcula o total quando a quantidade muda', async () => {
  const user = userEvent.setup();
  render(<ResumoCarrinho />);
  const quantidade = screen.getByRole('spinbutton', { name: /quantidade/i });
  await user.clear(quantidade);
  await user.type(quantidade, '3');
  expect(screen.getByText(/total/i)).toHaveTextContent('[PREENCHER: total esperado]');
});

it('desativa Pagar e mostra um erro se a API falhar', async () => {
  server.use(http.post('/api/pagamento', async () => { await delay(100); return new HttpResponse(null, { status: 500 }); }));
  const user = userEvent.setup();
  render(<ResumoCarrinho />);
  const pagar = screen.getByRole('button', { name: /pagar/i });
  await user.click(pagar);
  expect(pagar).toBeDisabled();
  expect(await screen.findByRole('alert')).toBeInTheDocument();
});

Dados-chave

Categoria

Programação e desenvolvimento · React

Tipo de resultado

Código

Nível

Intermédio

Pensado para

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificado em

Pendente de verificação editorial

Variáveis

Código do componente, Comportamento a cobrir, Ferramentas e Chamadas de rede

Idioma

Português

Preço

Gratuito, sem registo

Atualizado

07/11/2026

Perguntas frequentes