0Pricing
Vue Academy · Aula

Testes de interações e eventos do usuário

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() e flushPromises() assíncrono.

Testes de interações e eventos do usuário é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 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.

Simulando o comportamento do usuário

Além de renderizar, os testes devem imitar o que um usuário faz: clicar em botões, digitar em campos de entrada e enviar formulários. Os wrappers de @vue/test-utils oferecem métodos para disparar eventos do DOM e atualizar o Vue em seguida.

trigger para eventos de clique

wrapper.trigger("click") dispara um clique no elemento. Como ele atualiza o DOM, retorna uma promessa — use await para que as asserções vejam o resultado.

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

Por que os testes são assíncronos

O Vue atualiza o DOM de forma assíncrona. Depois de uma interação, o novo estado não fica visível até o próximo ciclo de atualização. Aguardar a promessa de trigger permite que o DOM se estabilize antes da verificação.

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 digitar em um campo, use wrapper.setValue(value) no wrapper do campo de entrada. Isso define o valor e dispara um evento de input para que v-model seja atualizado.

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

Caixas de seleção e listas suspensas

setValue se adapta ao elemento: passe um booleano para caixas de seleção e o valor da opção para uma lista suspensa.

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

Verificando eventos emitted

Os componentes se comunicam com o componente pai por meio de eventos emitted. wrapper.emitted() retorna um registro de todos os eventos emitidos pelo componente, agrupados por nome.

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

Inspecionando payloads emitted

wrapper.emitted("name") retorna uma matriz de matrizes de argumentos de emissão. O primeiro argumento da primeira emissão é 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" })

Um teste de envio de formulário

Combine as partes: preencha um campo, envie o formulário e depois verifique o payload emitted.

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" })
})

Operações assíncronas em componentes

Muitos manipuladores chamam APIs e atualizam o estado quando a promessa é resolvida. A microtarefa pode ainda não ter sido executada quando a verificação ocorre, então é preciso aguardar.

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

flushPromises

flushPromises, dos utilitários de teste, resolve todas as microtarefas pendentes (funções de retorno de then). Aguarde-o depois de disparar uma ação assíncrona, para que as promessas resolvidas e as atualizações resultantes do DOM sejam aplicadas.

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

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

Combinando testes assíncronos

O padrão é: montar, interagir, usar await flushPromises() e verificar. Marque a função de teste como async para poder usar await em todo o código.

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)
})

Verificação rápida

Verifique sua compreensão dos testes de interação.

Recapitulação

Você aprendeu a testar interações e eventos:

  • trigger("click") dispara eventos; aguarde-o porque o Vue atualiza o DOM de forma assíncrona.
  • setValue define valores de campos de entrada, caixas de seleção e listas suspensas, além de disparar eventos de entrada para v-model.
  • wrapper.emitted() registra eventos emitted; emitted("name")[0][0] lê o primeiro payload.
  • Para manipuladores assíncronos, use await flushPromises() antes de fazer asserções.
  • Marque os testes como async para usar await.

Perguntas Frequentes

A aula “Testes de interações e eventos do usuário” é grátis?

Sim — o texto completo de “Testes de interações e eventos do usuário” é 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 “Testes de interações e eventos do usuário”?

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

Quanto tempo leva a aula “Testes de interações e eventos do usuário”?

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