Vitest + RTL Vitest e RTL: Testes

Última atualização: 2026-11-03

Vitest + RTL Vitest e RTL: Testes

O Vitest é um runner de testes muito rápido que compartilha sua configuração com o Vite, e a React Testing Library deixa você testar componentes do jeito que um usuário faria: render monta o componente, getByRole o consulta por semântica, userEvent simula interações, e as asserções miram o comportamento em vez de detalhes de implementação. Essa mudança é o que faz os testes sobreviverem a uma refatoração. Como o runner reutiliza o pipeline do Vite, o mesmo grafo de módulos que alimenta o servidor de dev alimenta a suíte.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Counter from './Counter'

describe('Counter', () => {
  it('increments the number after a click', async () => {
    render(<Counter />)
    expect(screen.getByRole('status')).toHaveTextContent('0')
    await userEvent.click(screen.getByRole('button', { name: '+1' }))
    expect(screen.getByRole('status')).toHaveTextContent('1')
  })
})

Retorna：describe e it organizam os casos; render monta o componente e retorna os manipuladores de consulta; screen.getByRole e companhia consultam elementos por semântica; expect afirma o resultado.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

O Counter acima muda com os botões enquanto o painel de casos abaixo acende uma entrada de cada vez — o fluxo da RTL de uma consulta getByRole mais uma asserção expect que passa (demonstração simulada).

💡 Pontos-chave

🏷️ Mais Dados e Engenharia

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós