Mocking composables and stores in Vue - Performance & Optimization

Performance: Mocking composables and stores

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how much code and state logic runs during testing or development.

Testing or developing Vue components that use composables or stores

Vue

import { vi } from 'vitest';
import { useUserStore } from '@/stores/user';

vi.mock('@/stores/user', () => ({
  useUserStore: () => ({
    user: { name: 'Test' },
    fetchUser: vi.fn()
  })
}));

export default {
  setup() {
    const userStore = useUserStore();
    return { userStore };
  }
};

Mocking the store returns a lightweight fake object, avoiding full logic and state updates, speeding up rendering and tests.

📈 Performance Gainsaves multiple reflows, reduces test runtime by avoiding heavy store initialization

Testing or developing Vue components that use composables or stores

Vue

import { useUserStore } from '@/stores/user';

export default {
  setup() {
    const userStore = useUserStore();
    return { userStore };
  }
};

Directly importing and using the real store or composable runs full logic and state updates, causing slower tests and more DOM updates.

📉 Performance Costtriggers multiple reflows and repaints during tests, blocks rendering for longer due to full store initialization

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using real composables/stores in tests	High (full reactive tree)	Multiple reflows per state change	High paint cost due to frequent updates	[X] Bad
Mocking composables/stores with lightweight fakes	Low (minimal reactive nodes)	Single or no reflows	Low paint cost with fewer updates	[OK] Good

Rendering Pipeline

When composables or stores are mocked, the browser skips heavy state setup and reactive updates, reducing work in style calculation, layout, and paint.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout due to reactive state updates

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how much code and state logic runs during testing or development.

Optimization Tips

1Always mock composables and stores in tests to reduce reactive state complexity.

2Avoid running full store logic during development previews to improve responsiveness.

3Use lightweight fake implementations to minimize layout and paint costs.

Performance Quiz - 3 Questions

Why does mocking Vue composables or stores improve test performance?

A Because it increases the number of DOM nodes

B Because it avoids running full reactive state logic and side effects

C Because it forces more layout recalculations

D Because it adds more network requests

DevTools: Performance

How to check: Record a performance profile while running tests or interacting with components using real vs mocked stores. Compare scripting and rendering times.

What to look for: Look for reduced scripting time and fewer layout/repaint events when mocks are used, indicating better interaction responsiveness.