0Pricing
Vue Academy · Lesson

Mounting and Querying Components

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

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

All lessons in this course

  1. Vitest Setup for Vue Projects
  2. Mounting and Querying Components
  3. Testing User Interactions and Events
  4. Mocking Composables, Stores, and APIs
← Back to Vue Academy