Introduction

Testing Vue.js applications often involves making HTTP requests. To ensure reliable and predictable tests, it's essential to mock those requests. One popular tool for mocking HTTP requests is `axios-mock-adapter`, which allows you to simulate API responses for testing purposes. In this guide, we'll explore how to use `axios-mock-adapter` to mock HTTP requests in Vue.js and provide sample code to demonstrate the process.

Sample Code

Let's create a Vue.js application and mock an HTTP request using `axios-mock-adapter`:

<div id="app">
  <button @click="fetchData">Fetch Data</button>
  <div v-if="data">
    <h2>{{ data.title }}</h2>
    <p>{{ data.body }}</p>
  </div>
const axiosInstance = axios.create();
const mock = new axiosMockAdapter(axiosInstance);
mock.onGet('/data').reply(200, {
  title: 'Mocked Data',
  body: 'This is a mock response for testing.'
});
const app = new Vue({
  el: '#app',
  data: {
    data: null
  },
  methods: {
    fetchData() {
      axiosInstance.get('/data').then(response => {
        this.data = response.data;
      });
    }
  }
});
            

In this code:

• We create a Vue component that includes a button to fetch data and a section to display the fetched data.
• We create an instance of `axios` called `axiosInstance` and an `axios-mock-adapter` instance called `mock` to intercept and mock HTTP requests.
• Using `mock.onGet()`, we define a mock response for the URL '/data' with a status code of 200 and sample data.
• In the Vue instance, when the "Fetch Data" button is clicked, we use `axiosInstance` to make a GET request to '/data'. The response data is then displayed in the template when available.