Mocking composables and stores in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is mocking in the context of Vue composables and stores?

Mocking means creating fake versions of composables or stores to test components without using real data or logic. It helps isolate parts during testing.

beginner

Why do we mock composables or stores in Vue tests?

We mock them to control their behavior, avoid side effects, and test components independently from actual data or network calls.

intermediate

How can you mock a composable in Vue 3 using the Composition API?

You can replace the composable import with a mock function that returns fixed values or reactive refs during tests.

intermediate

What is a common tool to mock Pinia stores in Vue tests?

Pinia stores can be mocked by creating a fake store instance or using testing utilities like 'createTestingPinia' to simulate store behavior.

beginner

How does mocking improve test reliability in Vue applications?

Mocking removes dependencies on real data or APIs, making tests faster, more predictable, and easier to debug.

What is the main purpose of mocking a composable in Vue tests?

A To add new features to the composable

B To improve component styling

C To increase app performance in production

D To isolate component tests from real composable logic

Mocking isolates tests by replacing real composable logic with controlled fake data.

Which Vue store library is commonly mocked using 'createTestingPinia'?

A Pinia

B Vuex

C Redux

D MobX

'createTestingPinia' is a utility for mocking Pinia stores in tests.

When mocking a composable, what should the mock return?

A Random values each time

B The original composable's code

C Fixed or controlled reactive values

D Nothing at all

Mocks return fixed or controlled reactive values to simulate expected behavior.

Which Vue API is most relevant when mocking composables?

A Composition API

B Options API

C Vue Router

D Vue CLI

The Composition API is used to create and mock composables.

Mocking stores helps tests by:

A Making tests slower

B Removing side effects and dependencies

C Changing production code

D Adding network calls

Mocking removes side effects and external dependencies, improving test reliability.

Explain how you would mock a Pinia store in a Vue 3 test.

Think about how to isolate store logic from the component during testing.

Describe why mocking composables is useful when testing Vue components.

Consider what problems mocking solves in testing.