How do I mock Axios in Vue.js testing with Vue Testing Library?

How do I mock Axios in Vue.js testing with Vue Testing Library?

You can mock Axios by using Jest's mocking capabilities. First, install Axios and Vue Testing Library if you haven't already.

What are the steps to set up the mock?

1. Import Axios and the necessary testing utilities. 2. Use jest.mock('axios') to mock Axios. 3. Write your test cases using axios.get or axios.post as needed.

Can you show me an example test case?

Sure! Here's a simple example:

import { render, screen } from '@testing-library/vue';
import axios from 'axios';
import MyComponent from './MyComponent.vue';

jest.mock('axios');

test('fetches and displays data', async () => {
  axios.get.mockResolvedValue({ data: { message: 'Hello World' } });
  render(MyComponent);
  const message = await screen.findByText('Hello World');
  expect(message).toBeInTheDocument();
});