Mocking composables and stores in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the composable correctly.

Vue

import { [1] } from '@/composables/useUser';

Drag options to blanks, or click blank then click option'

AuseUser

BUserStore

CgetUser

DuseStore

Attempts:

3 left

💡 Hint

Common Mistakes

Using the store name instead of the composable name.

Forgetting the curly braces around the import.

The composable is named useUser and should be imported with that exact name.

2fill in blank

medium

Complete the code to mock the store using Pinia's testing utilities.

Vue

import { createTestingPinia } from '@pinia/testing';

const pinia = createTestingPinia({
  [1]: false
});

Drag options to blanks, or click blank then click option'

AdisableActions

BmockActions

CstubActions

DfakeActions

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect option names like 'mockActions' which do not exist.

Confusing the option with disabling the entire store.

The option stubActions controls whether actions are stubbed or not in the testing Pinia instance.

3fill in blank

hard

Fix the error in mocking a composable by completing the jest.mock statement.

Vue

jest.mock('@/composables/useUser', () => ({
  [1]: () => ({ name: 'Test User' })
}));

Drag options to blanks, or click blank then click option'

AgetUser

BuseUser

CuserStore

DmockUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function name that does not match the composable.

Forgetting to return an object from the mocked function.

The mocked function must match the composable name useUser to replace it correctly.

4fill in blank

hard

Fill both blanks to mock a Pinia store and override a getter.

Vue

import { setActivePinia, createPinia } from 'pinia';

setActivePinia(createPinia());
const store = useUserStore();
store.[1] = [2];

Drag options to blanks, or click blank then click option'

Aname

B'Mock User'

CuserName

D'Test User'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong property name like 'userName' which does not exist.

Assigning a variable instead of a string literal.

The store property name is overridden with the string 'Test User' to mock the getter value.

5fill in blank

hard

Fill all three blanks to mock a composable and test its returned value.

Vue

import { mount } from '@vue/test-utils';
import Component from '@/components/UserProfile.vue';

jest.mock('@/composables/useUser', () => ({
  [1]: () => ({
    name: '[2]'
  })
}));

const wrapper = mount(Component);
expect(wrapper.text()).toContain('[3]');

Drag options to blanks, or click blank then click option'

AuseUser

BMock User

DgetUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different composable name in the mock.

Mismatching the mocked name and the expected text in the test.

The composable useUser is mocked to return a name 'Mock User'. The test checks that the component renders this name.