How can I mock API calls in Vue.js?

How can I mock API calls in Vue.js?

You can use libraries like Axios Mock Adapter or Mock Service Worker to mock API calls in Vue.js.

Can you show me an example using Axios Mock Adapter?

Sure! First, install Axios Mock Adapter. Then, you can set it up like this:

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);

mock.onGet('/api/data').reply(200, { data: 'mocked data' });

What about using Mock Service Worker?

Mock Service Worker intercepts network requests at the service worker level. You can set it up like this:

import { setupWorker, rest } from 'msw';

const worker = setupWorker(
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json({ data: 'mocked data' }));
  })
);

worker.start();

Are there any best practices for mocking in Vue.js?

Yes! Keep your mocks simple, ensure they mimic real API responses, and clean up after tests to avoid side effects.