Vue Academy · Aula

Testes Unitários com Vue Test Utils

Escreva testes unitários de componentes com o Vue Test Utils.

Testes Unitários com Vue Test Utils é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. 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 3 aulas no total.

Testando componentes

Vue Test Utils permite renderizar um componente em um teste, inspecionar seu resultado e simular a interação do usuário. Depois, você verifica se o componente se comporta conforme o esperado.

mount

A função mount renderiza um componente por completo, incluindo todos os seus componentes filhos. Ela retorna um objeto wrapper com auxiliares para consultar e interagir com o resultado renderizado.

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

const wrapper = mount(Counter)

shallowMount

shallowMount renderiza o componente, mas substitui seus componentes filhos por simulações. Isso isola o componente em teste dos seus filhos, o que é ideal para testes unitários verdadeiros.

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

const wrapper = shallowMount(ParentComponent)
// child components are stubbed out

mount versus shallowMount

Use mount quando quiser testar um componente junto com seus filhos e shallowMount quando quiser isolar apenas esse componente. A montagem superficial mantém os testes focados e rápidos.

Encontrando elementos

Use wrapper.find com um seletor CSS para localizar um elemento. find retorna um wrapper para esse elemento, que você pode inspecionar ou com o qual pode interagir.

const button = wrapper.find("button")
const title = wrapper.find(".title")

Verificando o resultado renderizado

Verifique o texto ou o HTML renderizado para confirmar que o componente exibe o que você espera.

test("renders the message", () => {
  const wrapper = mount(Greeting, {
    props: { name: "Sam" }
  })
  expect(wrapper.text()).toContain("Hello, Sam")
})

Testando propriedades

Transmita propriedades pelas opções de montagem e verifique se o componente as renderiza corretamente. Isso confirma que o componente reage às suas entradas.

const wrapper = mount(UserCard, {
  props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")

Disparando eventos

Simule ações do usuário com trigger. Ele retorna uma promessa; portanto, aguarde-a para permitir que Vue atualize o DOM antes da verificação.

test("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.find("button").trigger("click")
  expect(wrapper.text()).toContain("1")
})

Definindo valores de entrada

Use setValue em um wrapper de entrada para simular a digitação e, em seguida, verifique o comportamento resultante.

const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")

Testando eventos emitidos

Quando um componente emite um evento, wrapper.emitted o registra. Verifique se o evento correto foi disparado com a carga correta.

test("emits submit with form data", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.find("form").trigger("submit")
  expect(wrapper.emitted("submit")).toBeTruthy()
  expect(wrapper.emitted("submit")[0]).toEqual([{ user: "" }])
})

Montando um teste

Um teste completo de componente monta o componente, interage com ele e verifica o resultado ou os eventos emitidos.

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

test("adds a todo", async () => {
  const wrapper = mount(TodoInput)
  await wrapper.find("input").setValue("Buy milk")
  await wrapper.find("button").trigger("click")
  expect(wrapper.emitted("add")[0]).toEqual(["Buy milk"])
})

Verificação rápida

Teste seus conhecimentos sobre Vue Test Utils.

Recapitulação

Vue Test Utils renderiza componentes com mount (árvore completa) ou shallowMount (filhos simulados). Consulte com find, simule ações com trigger e setValue (aguardando seu término) e faça verificações com text() ou emitted(). Transmita props pelas opções de montagem. Em seguida, você testará o aplicativo inteiro de ponta a ponta.

Perguntas Frequentes

A aula “Testes Unitários com Vue Test Utils” é grátis?

Sim — o texto completo de “Testes Unitários com Vue Test Utils” é 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 3 aulas no total.

O que vou aprender em “Testes Unitários com Vue Test Utils”?

Escreva testes unitários de componentes com o Vue Test Utils. 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 3.

Quanto tempo leva a aula “Testes Unitários com Vue Test Utils”?

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

← Voltar para Vue Academy