Vue Academy · Lesson

Unit Testing with Vue Test Utils

Write component unit tests with Vue Test Utils.

Unit Testing with Vue Test Utils is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Testing Components

Vue Test Utils lets you render a component in a test, inspect its output, and simulate user interaction. You then assert that the component behaves as expected.

mount

The mount function renders a component fully, including all of its child components. It returns a wrapper object with helpers to query and interact with the rendered output.

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

const wrapper = mount(Counter)

shallowMount

shallowMount renders the component but replaces its child components with stubs. This isolates the component under test from its children, which is ideal for true unit tests.

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

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

mount vs shallowMount

Use mount when you want to test a component together with its children, and shallowMount when you want to isolate just this component. Shallow mounting keeps tests focused and fast.

Finding Elements

Use wrapper.find with a CSS selector to locate an element. find returns a wrapper for that element you can inspect or interact with.

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

Asserting Rendered Output

Check the rendered text or HTML to verify the component shows what you expect.

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

Testing Props

Pass props through the mount options and assert the component renders them correctly. This verifies the component reacts to its inputs.

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

Triggering Events

Simulate user actions with trigger. It returns a promise, so await it to let Vue update the DOM before asserting.

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

Setting Input Values

Use setValue on an input wrapper to simulate typing, then assert on the resulting behavior.

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

Testing Emitted Events

When a component emits an event, wrapper.emitted records it. Assert that the right event fired with the right payload.

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

Putting a Test Together

A complete component test mounts the component, interacts with it, and asserts on output or emitted events.

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

Quick Check

Test your knowledge of Vue Test Utils.

Recap

Vue Test Utils renders components with mount (full tree) or shallowMount (stubbed children). Query with find, simulate actions with trigger and setValue (awaiting them), and assert on text() or emitted(). Pass props via mount options. Next you will test the whole app end-to-end.

Frequently asked questions

Is the “Unit Testing with Vue Test Utils” lesson free?

Yes — the full text of “Unit Testing with Vue Test Utils” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Unit Testing with Vue Test Utils”?

Write component unit tests with Vue Test Utils. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Unit Testing with Vue Test Utils” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy