Vue Academy · Lesson

Mounting and Querying Components

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

Mounting and Querying Components is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. 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 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Rendering Components in Tests

To test a component you must render it into the jsdom DOM and then inspect the result. @vue/test-utils gives you mount and a wrapper object with query helpers.

mount: Full Render

mount renders the component and all of its child components for real. Use it when behavior depends on children rendering actual output.

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

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

shallowMount: Stub Children

shallowMount renders the component but replaces child components with lightweight stubs. This isolates the unit under test from its children’s internals.

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

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

mount vs shallowMount

Pick based on intent:

mount — integration-style; you care how children render.
shallowMount — unit-style; you only test this component’s logic and template.

Shallow mounting is faster and avoids cascading failures from child bugs.

find: Optional Match

wrapper.find(selector) takes a CSS selector and returns a wrapper. If nothing matches, the result’s exists() is false instead of throwing.

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

get: Required Match

wrapper.get(selector) is like find but throws if the element is missing. Use it when the element must be present — the error message is clearer than a later null access.

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

Choosing find or get

Use get for elements that should always exist (asserting their content). Use find when you are testing presence/absence, e.g. an error banner that only sometimes renders.

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

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

findAll: Multiple Elements

wrapper.findAll(selector) returns an array of wrappers for every match. Perfect for asserting list lengths and iterating rows.

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

Reading Text with text()

wrapper.text() returns the trimmed, concatenated text content of the element (and its children). Great for asserting visible copy without worrying about exact markup.

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

Inspecting Markup with html()

wrapper.html() returns the rendered HTML string. Useful for debugging a failing test or asserting on attributes and structure.

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

Finding Child Components

Beyond CSS selectors, find and findComponent accept a component reference to locate a specific child component instance.

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

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

Quick Check

Check your understanding of querying with Test Utils.

Recap

You learned how to render and query components:

mount renders children for real; shallowMount stubs them for isolation.
find returns a possibly-empty wrapper; get throws when missing.
findAll returns an array for lists.
text() reads visible text; html() returns rendered markup.
findComponent locates a specific child component.

Frequently asked questions

Is the “Mounting and Querying Components” lesson free?

Yes — the full text of “Mounting and Querying Components” is free to read here on the web, and the Vue Academy course includes 4 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 “Mounting and Querying Components”?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText(), data-testid. 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 4, so you can start here or from the beginning and move at your own pace.

How long does the “Mounting and Querying Components” 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