How do I mock fetch in my Vue tests?

How do I mock fetch in my Vue tests?

You can use libraries like Jest or Vue Test Utils to mock fetch 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';

global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve({ data: 'mocked data' }) }));

test('fetches data on mount', async () => {
  const wrapper = shallowMount(MyComponent);
  await wrapper.vm.$nextTick();
  expect(global.fetch).toHaveBeenCalledTimes(1);
  expect(wrapper.vm.data).toBe('mocked data');
});

What if I want to test error handling?

You can simulate an error by making the fetch function reject. Here's how:

global.fetch = jest.fn(() => Promise.reject('API is down'));

test('handles fetch error', async () => {
  const wrapper = shallowMount(MyComponent);
  await wrapper.vm.$nextTick();
  expect(wrapper.vm.error).toBe('API is down');
});