@testing-library/svelte: render e fireEvent
Renderize componentes em testes, consulte o DOM e simule interações do usuário.
@testing-library/svelte: render e fireEvent é uma aula grátis de Sveltejs 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Biblioteca de testes
@testing-library/svelte oferece utilitários para renderizar Componentes e interagir com eles como um usuário.
Renderização
Monte um Component em um DOM virtual.
import { render } from "@testing-library/svelte";
const { getByText } = render(MyComp, { props: { name: "Ada" } });Métodos de consulta
Use getByText, getByRole e getByLabelText para encontrar elementos como um usuário faria.
fireEvent
Simule interações do usuário: click, entrada e envio.
import { fireEvent } from "@testing-library/svelte";
await fireEvent.click(getByRole("button"));Biblioteca user-event
Para interações mais realistas (digitação e navegação pelo teclado), use @testing-library/user-event.
Atualizações assíncronas
Depois de uma interação, aguarde as microtarefas para que as atualizações do Svelte sejam concluídas.
Asserções
Use expect com comparadores do jest-dom, como toBeInTheDocument e toHaveAttribute.
expect(getByText("Hello, Ada!")).toBeInTheDocument();Propriedades de Componentes
Passe as propriedades como segundo argumento para render.
Eventos de Componentes
Faça testes dos despachantes de eventos passando uma função espiã como propriedade de retorno de chamada.
Instantâneo do DOM
Capture um instantâneo do HTML renderizado para testar regressões.
Boa prática
Faça testes da perspectiva do usuário. Evite testar diretamente o estado interno.
Verificação rápida
O que render faz?
Recapitulação
Use render + fireEvent + jest-dom para testar Componentes Svelte como em interações reais do usuário.
Perguntas Frequentes
A aula “@testing-library/svelte: render e fireEvent” é grátis?
Sim — o texto completo de “@testing-library/svelte: render e fireEvent” é 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 Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “@testing-library/svelte: render e fireEvent”?
Renderize componentes em testes, consulte o DOM e simule interações do usuário. Você pratica Sveltejs 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 Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs 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/svelte: render e fireEvent”?
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 Sveltejs Academy?
Sim. Cada aula de Sveltejs 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 Vitest para projetos Svelte
- @testing-library/svelte: render e fireEvent
- Testando stores e reatividade
- Simulação de módulos e Fetch