0Pricing
Vue Academy · Aula

Montagem e consulta de componentes

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() e data-testid.

Montagem e consulta de componentes é uma aula grátis de Vue 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Renderizando componentes nos testes

Para testar um componente, você precisa renderizá-lo no DOM do jsdom e depois inspecionar o resultado. @vue/test-utils oferece mount e um objeto wrapper com auxiliares de consulta.

mount: Renderização completa

mount renderiza o componente e todos os seus componentes filhos de verdade. Use-o quando o comportamento depender de os filhos renderizarem uma saída real.

import { mount } from "@vue/test-utils"
import Card from "./Card.vue"

const wrapper = mount(Card, {
  props: { title: "Hello" },
})

shallowMount: Componentes filhos simulados

shallowMount renderiza o componente, mas substitui os componentes filhos por simulações leves. Isso isola a unidade em teste dos detalhes internos dos filhos.

import { shallowMount } from "@vue/test-utils"
import Page from "./Page.vue"

const wrapper = shallowMount(Page)
// child components appear as <child-stub />

mount versus shallowMount

Escolha com base na intenção:

  • mount — no estilo de integração; você se importa com a forma como os filhos são renderizados.
  • shallowMount — no estilo unitário; você testa apenas a lógica e o template deste componente.

A montagem superficial é mais rápida e evita falhas em cascata causadas por erros nos componentes filhos.

find: Correspondência opcional

wrapper.find(selector) recebe um seletor CSS e retorna um wrapper. Se nada corresponder, exists() do resultado será false, em vez de lançar uma exceção.

const title = wrapper.find("h1")
expect(title.exists()).toBe(true)
expect(title.text()).toBe("Hello")

get: Correspondência obrigatória

wrapper.get(selector) funciona como find, mas lança uma exceção se o elemento estiver ausente. Use-o quando o elemento precisar estar presente — a mensagem de erro é mais clara do que um acesso posterior a um valor nulo.

const button = wrapper.get("button.submit")
// throws immediately with a helpful message if absent

Escolhendo entre find e get

Use get para elementos que sempre devem existir, verificando seu conteúdo. Use find quando estiver testando presença ou ausência, por exemplo, uma faixa de erro que só é renderizada algumas vezes.

expect(wrapper.find(".error").exists()).toBe(false)

const label = wrapper.get("label")
expect(label.text()).toBe("Email")

findAll: Vários elementos

wrapper.findAll(selector) retorna uma matriz de wrappers para cada correspondência. É perfeito para verificar o tamanho de listas e percorrer linhas.

const items = wrapper.findAll("li")
expect(items).toHaveLength(3)
expect(items[0].text()).toBe("First")

Lendo texto com text()

wrapper.text() retorna o conteúdo de texto concatenado e sem espaços nas extremidades do elemento e de seus filhos. É ótimo para verificar o texto visível sem se preocupar com a marcação exata.

expect(wrapper.text()).toContain("3 results found")

Inspecionando a marcação com html()

wrapper.html() retorna a cadeia HTML renderizada. É útil para depurar um teste que falhou ou verificar atributos e estrutura.

console.log(wrapper.html())
// <div class="card"><h1>Hello</h1></div>
expect(wrapper.html()).toContain("class=\"card\"")

Encontrando componentes filhos

Além dos seletores CSS, find e findComponent aceitam uma referência de componente para localizar uma instância específica de um componente filho.

import { findComponent } from "@vue/test-utils"
import Avatar from "./Avatar.vue"

const avatar = wrapper.findComponent(Avatar)
expect(avatar.exists()).toBe(true)

Verificação rápida

Verifique sua compreensão das consultas com os utilitários de teste.

Recapitulação

Você aprendeu a renderizar e consultar componentes:

  • mount renderiza os filhos de verdade; shallowMount os substitui por simulações para proporcionar isolamento.
  • find retorna um wrapper que pode estar vazio; get lança uma exceção quando o elemento não é encontrado.
  • findAll retorna uma matriz para listas.
  • text() lê o texto visível; html() retorna a marcação renderizada.
  • findComponent localiza um componente filho específico.

Perguntas Frequentes

A aula “Montagem e consulta de componentes” é grátis?

Sim — o texto completo de “Montagem e consulta de componentes” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Montagem e consulta de componentes”?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() e data-testid. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 “Montagem e consulta de componentes”?

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 Vue Academy?

Sim. Cada aula de Vue 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

  1. Configuração do Vitest para projetos Vue
  2. Montagem e consulta de componentes
  3. Testes de interações e eventos do usuário
  4. Simulação de composables, stores e APIs
← Voltar para Vue Academy