0Pricing
Vue Academy · Lección

Pruebas de interacciones y eventos del usuario

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() y flushPromises() asíncrono

Pruebas de interacciones y eventos del usuario es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 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.

Simular el comportamiento del usuario

Además de renderizar, las pruebas deberían imitar lo que hace un usuario: hacer clic en botones, escribir en campos de entrada y enviar formularios. Los objetos wrapper de @vue/test-utils exponen métodos para enviar eventos del DOM y actualizar Vue después.

trigger para eventos de clic

wrapper.trigger("click") dispara un clic en el elemento. Como actualiza el DOM, devuelve una promesa; use await para que las comprobaciones vean el resultado.

const button = wrapper.get("button")
await button.trigger("click")
expect(wrapper.text()).toContain("Clicked once")

Por qué las pruebas son asíncronas

Vue actualiza el DOM de forma asíncrona. Después de una interacción, el nuevo estado no es visible hasta el siguiente tick. Espere la promesa de trigger para que el DOM se estabilice antes de hacer la comprobación.

it("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.get("button").trigger("click")
  expect(wrapper.get(".count").text()).toBe("1")
})

setValue para campos de entrada

Para escribir en un campo, use wrapper.setValue(value) en el wrapper del campo de entrada. Establece el valor y envía un evento input para que v-model se actualice.

const input = wrapper.get("input")
await input.setValue("hello@example.com")
expect(input.element.value).toBe("hello@example.com")

Casillas de verificación y selectores

setValue se adapta al elemento: pase un booleano para las casillas de verificación y el valor de la opción para un selector.

await wrapper.get("input[type=checkbox]").setValue(true)
await wrapper.get("select").setValue("tr")

Comprobar eventos emitidos

Los componentes se comunican hacia arriba mediante eventos emitidos. wrapper.emitted() devuelve un registro de todos los eventos que ha emitido el componente, agrupados por nombre.

await wrapper.get("button").trigger("click")
expect(wrapper.emitted()).toHaveProperty("submit")

Inspeccionar las cargas útiles emitidas

wrapper.emitted("name") devuelve un array de arrays de argumentos de cada emisión. El primer argumento de la primera emisión es emitted("name")[0][0].

await wrapper.get("button").trigger("click")
const events = wrapper.emitted("submit")
expect(events).toHaveLength(1)
expect(events[0][0]).toEqual({ email: "a@b.com" })

Una prueba de envío de formulario

Combine las piezas: rellene un campo, envíe el formulario y, después, compruebe la carga útil emitida.

it("emits submit with the email", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.get("input").setValue("a@b.com")
  await wrapper.get("form").trigger("submit.prevent")
  expect(wrapper.emitted("submit")[0][0]).toEqual({ email: "a@b.com" })
})

Operaciones asíncronas en componentes

Muchos controladores llaman a API y actualizan el estado cuando se resuelve la promesa. Es posible que la microtarea aún no se haya ejecutado cuando se realice la comprobación, por lo que debe esperar.

async function load() {
  loading.value = true
  data.value = await fetchData()
  loading.value = false
}

flushPromises

flushPromises de Test Utils resuelve todas las microtareas pendientes (callbacks de then). Espere a que termine después de activar una acción asíncrona para que se apliquen las promesas resueltas y las actualizaciones del DOM resultantes.

import { flushPromises } from "@vue/test-utils"

await wrapper.get("button").trigger("click")
await flushPromises()
expect(wrapper.text()).toContain("Loaded")

Integrar las pruebas asíncronas

El patrón es: montar, interactuar, await flushPromises() y comprobar. Marque la función de prueba como async para poder usar await en todo el proceso.

it("shows results after fetch", async () => {
  const wrapper = mount(SearchBox)
  await wrapper.get("input").setValue("vue")
  await wrapper.get("form").trigger("submit.prevent")
  await flushPromises()
  expect(wrapper.findAll("li")).toHaveLength(2)
})

Comprobación rápida

Compruebe su comprensión de las pruebas de interacción.

Repaso

Ha aprendido a probar interacciones y eventos:

  • trigger("click") dispara eventos; espérelo porque Vue actualiza el DOM de forma asíncrona.
  • setValue establece los valores de campos de entrada, casillas de verificación y selectores, y dispara eventos de entrada para v-model.
  • wrapper.emitted() registra los eventos emitidos; emitted("name")[0][0] lee la primera carga útil.
  • Para los controladores asíncronos, use await flushPromises() antes de hacer la comprobación.
  • Marque las pruebas como async para usar await.

Preguntas frecuentes

¿La lección «Pruebas de interacciones y eventos del usuario» es gratis?

Sí — el texto completo de «Pruebas de interacciones y eventos del usuario» 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 «Pruebas de interacciones y eventos del usuario»?

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() y flushPromises() asíncrono 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 3 de 4.

¿Cuánto tiempo toma la lección «Pruebas de interacciones y eventos del usuario»?

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