How can I mock API calls in my Vue tests?

How can I mock API calls in my Vue tests?

You can use libraries like Jest or Vue Test Utils to mock API calls in your Vue tests. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example using Jest:

import { shallowMount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';
import axios from 'axios';

jest.mock('axios');

describe('MyComponent', () => {
  it('fetches data from API', async () => {
    const data = { data: 'some data' };
    axios.get.mockResolvedValue(data);

    const wrapper = shallowMount(MyComponent);
    await wrapper.vm.fetchData();

    expect(wrapper.vm.apiData).toBe('some data');
  });
});

This mocks the axios GET request and tests the component's behavior.

What if I want to test error handling?

You can simulate an error response by using mockRejectedValue. Here's how:

axios.get.mockRejectedValue(new Error('API error'));
const wrapper = shallowMount(MyComponent);
await wrapper.vm.fetchData();
expect(wrapper.vm.error).toBe('API error');

This will test how your component handles API errors.