Frontend Academy · Aula

@testing-library/react: render userEvent

Renderize componentes em um DOM simulado, consulte por função e texto de rótulo, dispare interações do usuário com userEvent e faça asserções sobre a saída visível.

@testing-library/react: render userEvent é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Filosofia do Testing Library

@testing-library incentiva testes que se assemelham à forma como os usuários interagem com a interface. Consulte por função, rótulo e texto — não por detalhes de implementação, como nomes de classes CSS ou elementos internos do componente.

Instalando o Testing Library

Instale o Testing Library para React e o pacote userEvent para simular interações do usuário.

npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

render() — Montar um componente

render(<Component />) monta o componente em um DOM simulado. Ele retorna funções de consulta para encontrar elementos.

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Consultando elementos

Prefira as consultas nesta ordem: getByRole (acessível), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Use queryBy* ao testar a não existência. Use findBy* para elementos assíncronos.

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent — Simulando ações do usuário

userEvent simula interações reais do usuário: digitação, cliques e navegação pelo teclado. É mais realista do que o antigo fireEvent.

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

Testando o envio de formulários

Preencha os campos do formulário e envie-o. Faça asserções sobre o resultado — o que o usuário vê após o envio.

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

Verificadores personalizados do jest-dom

@testing-library/jest-dom adiciona verificadores úteis: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), toHaveFocus().

Testando atualizações assíncronas de componentes

Use waitFor() ou findBy* para elementos que aparecem de forma assíncrona (após uma busca, após um tempo limite).

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Testando estados de carregamento e erro

Simule a resposta de fetch para testar diferentes estados. O MSW (Mock Service Worker) é a melhor ferramenta para simular respostas de API nos testes.

Testes de acessibilidade

O Testing Library incentiva naturalmente a acessibilidade — se você não consegue consultar um elemento por função ou rótulo, é provável que ele esteja inacessível. Use jest-axe para auditorias automatizadas de acessibilidade nos testes.

Não teste detalhes de implementação

Evite: consultar por nomes de classes CSS, importar o estado interno do componente e testar se métodos específicos foram chamados. Teste o comportamento pela perspectiva do usuário: o que ele vê e o que acontece quando interage.

Verificação rápida

Qual função de consulta do Testing Library deve ser preferida para encontrar elementos interativos?

Recapitulação: @testing-library/react

render() monta componentes em um DOM simulado. Consulte por função, rótulo e texto — não por detalhes de implementação. userEvent.setup() para interações realistas do usuário. findBy* para elementos assíncronos. jest-dom para asserções legíveis. Teste pela perspectiva do usuário: o que ele vê e faz. Componentes acessíveis são mais fáceis de testar.

Perguntas Frequentes

A aula “@testing-library/react: render userEvent” é grátis?

Sim — o texto completo de “@testing-library/react: render userEvent” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “@testing-library/react: render userEvent”?

Renderize componentes em um DOM simulado, consulte por função e texto de rótulo, dispare interações do usuário com userEvent e faça asserções sobre a saída visível. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “@testing-library/react: render userEvent”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Configuração do Jest e testes básicos
@testing-library/react: render userEvent
@testing-library/vue: montagem de componentes
Simulação de módulos e chamadas de API

← Voltar para Frontend Academy