How to Mock API in Vue Test: Simple Guide with Examples

To mock an API in a Vue test, use Jest's jest.mock() to replace the API call module with a fake version. Then, write your test with @vue/test-utils to check component behavior without real network requests.

Syntax

Use jest.mock('module-path', () => mockImplementation) to replace the real API module with a mock. Then import your component and mount it with @vue/test-utils. Inside tests, you can control the mock's return values.

• jest.mock(): Replaces the real module.
• mockImplementation: Defines fake API responses.
• mount(): Renders the Vue component for testing.

javascript

import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
import api from '@/api'

jest.mock('@/api', () => ({
  fetchData: jest.fn()
}))

Example

This example shows how to mock an API call fetchData in a Vue component test. The mock returns fake data, so the component renders it without real network calls.

javascript

import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
import api from '@/api'

jest.mock('@/api', () => ({
  fetchData: jest.fn()
}))

describe('MyComponent', () => {
  it('renders data from mocked API', async () => {
    api.fetchData.mockResolvedValue({ message: 'Hello from mock!' })

    const wrapper = mount(MyComponent)
    await wrapper.vm.$nextTick() // wait for promises

    expect(wrapper.text()).toContain('Hello from mock!')
  })
})

Output

PASS  MyComponent renders data from mocked API

Common Pitfalls

Common mistakes when mocking APIs in Vue tests include:

• Not mocking the exact module path used by the component.
• Forgetting to await asynchronous updates after mock resolves.
• Mocking after importing the component, which can cause the real API to be used.

Always mock before importing the component and use await to wait for updates.

javascript

/* Wrong: mocking after import causes real API call */
import MyComponent from '@/components/MyComponent.vue'
import api from '@/api'

jest.mock('@/api', () => ({ fetchData: jest.fn() }))

/* Right: mock before import */
jest.mock('@/api', () => ({ fetchData: jest.fn() }))
import MyComponent from '@/components/MyComponent.vue'

Quick Reference

Step	Description
1. jest.mock()	Mock the API module before importing the component.
2. mockResolvedValue()	Set the fake API response for async calls.
3. mount()	Render the component with Vue Test Utils.
4. await nextTick()	Wait for Vue to update after async data.
5. expect()	Check the component output for expected text or elements.

Key Takeaways

Always mock API modules before importing Vue components in tests.

Use jest.mock() with mockResolvedValue() to fake async API responses.

Mount components with @vue/test-utils and await Vue updates with nextTick().

Check rendered output to confirm component reacts correctly to mocked data.

Avoid common mistakes like mocking after import or missing async waits.