0Pricing
Vue Academy · Lección

Montaje y consulta de componentes

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

Montaje y consulta de componentes es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Renderizar componentes en las pruebas

Para probar un componente, debe renderizarlo en el DOM de jsdom y después inspeccionar el resultado. @vue/test-utils proporciona mount y un objeto wrapper con utilidades de consulta.

mount: renderizado completo

mount renderiza el componente y todos sus componentes hijos de verdad. Úselo cuando el comportamiento dependa de que los hijos rendericen contenido real.

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

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

shallowMount: simular los componentes hijos

shallowMount renderiza el componente, pero reemplaza los componentes hijos por stubs ligeros. Esto aísla la unidad que se está probando de los detalles internos de sus hijos.

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

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

mount frente a shallowMount

Elija según la intención:

  • mount — estilo de integración; le importa cómo se renderizan los hijos.
  • shallowMount — estilo unitario; solo prueba la lógica y la plantilla de este componente.

El montaje superficial es más rápido y evita fallos en cascada provocados por errores en los componentes hijos.

find: coincidencia opcional

wrapper.find(selector) recibe un selector CSS y devuelve un wrapper. Si no hay coincidencias, exists() del resultado es false en lugar de lanzar un error.

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

get: coincidencia obligatoria

wrapper.get(selector) funciona como find, pero lanza un error si falta el elemento. Úselo cuando el elemento deba estar presente; el mensaje de error es más claro que un acceso posterior a null.

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

Elegir entre find y get

Use get para los elementos que siempre deberían existir, al comprobar su contenido. Use find cuando esté probando la presencia o ausencia de un elemento, como un banner de error que solo se renderiza algunas veces.

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

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

findAll: varios elementos

wrapper.findAll(selector) devuelve un array de wrappers para cada coincidencia. Es perfecto para comprobar la longitud de listas e iterar sobre las filas.

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

Leer texto con text()

wrapper.text() devuelve el contenido de texto concatenado y sin espacios en los extremos del elemento (incluidos sus hijos). Es ideal para comprobar el texto visible sin preocuparse por el marcado exacto.

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

Inspeccionar el marcado con html()

wrapper.html() devuelve la cadena HTML renderizada. Es útil para depurar una prueba que falla o comprobar atributos y estructura.

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

Buscar componentes hijos

Además de los selectores CSS, find y findComponent aceptan una referencia de componente para localizar una instancia específica de un componente hijo.

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

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

Comprobación rápida

Compruebe su comprensión de las consultas con Test Utils.

Repaso

Ha aprendido a renderizar y consultar componentes:

  • mount renderiza los hijos de verdad; shallowMount los reemplaza por stubs para aislarlos.
  • find devuelve un wrapper que puede estar vacío; get lanza un error cuando no encuentra el elemento.
  • findAll devuelve un array para las listas.
  • text() lee el texto visible; html() devuelve el marcado renderizado.
  • findComponent localiza un componente hijo específico.

Preguntas frecuentes

¿La lección «Montaje y consulta de componentes» es gratis?

Sí — el texto completo de «Montaje y consulta de componentes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Montaje y consulta de componentes»?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() y data-testid Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Montaje y consulta de componentes»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configuración de Vitest para proyectos Vue
  2. Montaje y consulta de componentes
  3. Pruebas de interacciones y eventos del usuario
  4. Simulación de composables, stores y API
← Volver a Vue Academy