Skip to content

Vue Testing Explained — Unit and Component Testing

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Vue Testing Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue applications are tested with Vitest (Unit Testing) and Vue Test Utils (component mounting). These tools provide component mounting, assertions, and mocking capabilities.

What You'll Learn

  • Setting up Vitest for Vue
  • Mounting components with Vue Test Utils
  • Testing props, events, and slots
  • Testing composables
  • Mocking API calls

Why It Matters

Testing ensures your Vue components render correctly, emit proper events, and handle edge cases. Vue Test Utils provides a virtual environment for isolating component behavior.

import { mount } from "@vue/test-utils";
import { describe, it, expect, vi } from "vitest";
import CounterButton from "./CounterButton.vue";

describe("CounterButton", () => {
  it("renders with initial count", () => {
    const wrapper = mount(CounterButton, { props: { initialCount: 5 } });
    expect(wrapper.text()).toContain("Count: 5");
  });

  it("increments on click", async () => {
    const wrapper = mount(CounterButton, { props: { initialCount: 0 } });
    await wrapper.find("button").trigger("click");
    expect(wrapper.text()).toContain("Count: 1");
  });

  it("emits event with payload", async () => {
    const wrapper = mount(CounterButton, { props: { initialCount: 0 } });
    await wrapper.find("button").trigger("click");
    expect(wrapper.emitted("update")).toBeTruthy();
    expect(wrapper.emitted("update")[0]).toEqual([1]);
  });
});

Expected output: All three tests pass, verifying rendering, interaction, and event emission for the CounterButton component.

← Previous Vue Transitions and Animations Explained — Motion in Vue Next → Vue Dynamic Components Explained — Render Components Dynamically

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Vue