Mocking composables and stores in Vue - Step-by-Step Execution

Concept Flow - Mocking composables and stores

Start Test Setup

↓

Import composable/store

↓

Mock composable/store

↓

Use mock in test

↓

Run test assertions

↓

Test ends

This flow shows how to replace real composables or stores with mocks during testing to control behavior and verify outcomes.

Execution Sample

Vue

import { ref } from 'vue'
import { useCounter } from '@/composables/counter'
vi.mock('@/composables/counter', () => ({
  useCounter: () => ({ count: ref(10), increment: vi.fn() })
}))

const { count, increment } = useCounter()

This code mocks the useCounter composable to return a fixed count and a mock increment function for testing.

Execution Table

Step	Action	Evaluation	Result
1	Import useCounter composable	useCounter is real composable	useCounter function imported
2	Mock useCounter with vi.mock	Mock replaces original	useCounter now returns count=10 and mock increment
3	Call useCounter()	Calls mocked version	Returns count=10 (ref) and increment mock function
4	Access count.value	count is ref(10)	Value is 10
5	Call increment()	Calls mock function	No real increment logic runs
6	Test assertions run	Check count and increment calls	Pass or fail based on mock behavior

💡 Test ends after assertions; mocks isolate composable behavior for controlled testing.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
count	undefined	ref(10)	ref(10)	ref(10)	ref(10)
increment	undefined	mock function	mock function	mock function called	mock function called

Key Moments - 3 Insights

Why does count.value stay 10 even after calling increment()?

Because increment is a mock function with no real logic, count.value does not change. See execution_table step 5.

How does mocking affect the original composable?

Mocking replaces the original composable during tests, so calls use the mock version, not the real one. See execution_table step 2.

What is the purpose of using ref(10) in the mock?

Using ref(10) simulates reactive state so tests can access count.value like in real composable. See execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 4?

A ref(10)

B ref(0)

C undefined

D mock function

💡 Hint

Check the 'Result' column at step 4 in the execution_table.

At which step does the mock replace the original composable?

A Step 3

B Step 1

C Step 2

D Step 5

💡 Hint

Look at the 'Action' column describing mocking in the execution_table.

If increment was not mocked, what would happen when calling increment() at step 5?

A increment would be undefined

B count.value would increase

C count.value would stay 10

D Test would fail immediately

💡 Hint

Compare behavior of mock vs real composable in the key_moments section.

Concept Snapshot

Mocking composables and stores in Vue tests:
- Use vi.mock() to replace composables/stores
- Provide mock implementations returning refs or mock functions
- Calls to composables use mocks during tests
- Allows controlled state and behavior
- Helps isolate and test components reliably

Full Transcript

This visual execution shows how to mock Vue composables and stores during testing. First, the real composable is imported. Then vi.mock replaces it with a mock version returning fixed reactive state and mock functions. When the composable is called, the mock version runs, returning controlled values. Accessing reactive refs like count.value shows the mocked value. Calling mocked functions like increment does not run real logic but tracks calls. This isolation helps tests focus on component behavior without depending on real composable logic. The variable tracker shows count and increment states across steps. Key moments clarify why count.value stays fixed and how mocking replaces the original composable. The quiz tests understanding of mock effects and state changes. This approach is essential for reliable unit testing in Vue projects.