0Pricing
Vue Academy · Lesson

Mocking Composables, Stores, and APIs

vi.mock(), mocking useFetch, mocking Pinia stores, mocking router in tests.

Why Mock?

Unit tests should isolate the component under test. Real network calls, real stores, and heavy composables make tests slow and flaky. Mocking replaces those dependencies with controllable fakes.

vi.fn: A Mock Function

vi.fn() creates a tracked function. You can inspect how it was called and control what it returns. It is the building block of all mocking.

import { vi } from "vitest"

const onSave = vi.fn()
onSave("draft")
expect(onSave).toHaveBeenCalledWith("draft")
expect(onSave).toHaveBeenCalledTimes(1)

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