Mocking composables and stores in Vue - Mini Project: Build & Apply

Mocking composables and stores in Vue

📖 Scenario: You are building a Vue 3 application that uses composables and Pinia stores to manage state and logic. To ensure your components work correctly, you want to write tests that mock these composables and stores.This project will guide you step-by-step to create a mock composable and a mock Pinia store, then use them in a test setup.

🎯 Goal: Build a Vue test setup that mocks a composable called useUser and a Pinia store called useCartStore. You will create the mock data, configure mock implementations, apply the mocks in a test, and finalize the test setup.

📋 What You'll Learn

Create a mock user object with specific properties

Create a mock cart store with an items property and an action

Mock the useUser composable to return the mock user

Mock the useCartStore Pinia store to use the mock store

Use the mocks in a test setup for a Vue component

💡 Why This Matters

🌍 Real World

In real Vue projects, mocking composables and stores allows developers to write focused tests that do not depend on actual backend data or complex state logic. This makes tests faster and more reliable.

💼 Career

Understanding how to mock composables and stores is important for frontend developers working with Vue and Pinia, especially when writing unit and integration tests for components.

1

Create mock user data

Create a constant called mockUser with an object containing these exact properties: id set to 1, name set to 'Alice', and isLoggedIn set to true.

Vue

# Create a constant mockUser with id 1, name 'Alice', and isLoggedIn true
# Your code here

Hint

Use const mockUser = { id: 1, name: 'Alice', isLoggedIn: true } to create the mock user object.

2

Create mock cart store

Create a constant called mockCartStore with an object that has items set to an empty array, and an addItem method that is a jest mock function.

Vue

const mockUser = { id: 1, name: 'Alice', isLoggedIn: true }
# Create a constant mockCartStore with items: [] and addItem mock function
# Your code here

Hint

Use jest.fn() to create a mock function for addItem.

3

Mock composable and store imports

Use jest.mock to mock the useUser composable module to return mockUser, and mock the useCartStore Pinia store module to return mockCartStore.

Vue

const mockUser = { id: 1, name: 'Alice', isLoggedIn: true }
const mockCartStore = {
  items: [],
  addItem: jest.fn()
}
# Mock useUser composable and useCartStore Pinia store
# Your code here

Hint

Use jest.mock('module', () => ({ functionName: () => mockData })) pattern to mock modules.

4

Use mocks in test setup

Import mount from @vue/test-utils and a component called MyComponent. Then create a test block named 'renders with mocked composable and store' that mounts MyComponent and asserts the component exists.

Vue

const mockUser = { id: 1, name: 'Alice', isLoggedIn: true }
const mockCartStore = {
  items: [],
  addItem: jest.fn()
}

jest.mock('@/composables/useUser', () => ({
  useUser: () => mockUser
}))

jest.mock('@/stores/cart', () => ({
  useCartStore: () => mockCartStore
}))

# Import mount and MyComponent, then write a test that mounts MyComponent and checks it exists
# Your code here

Hint

Use mount to render the component and expect(wrapper.exists()).toBe(true) to check it rendered.