title: Mocking an API call with Vue and Jest/Vue test utils
body: <p>I'm using Vue for the frontend and Python/Django for the backend. I would like to write tests to ensure that my API calls to my backend are working as expected but I'm having trouble mocking out the Axios calls.</p>
  
  <p>I'm probably set this up wrong but you can see that I have one function that is meant to be called inside of the components "created" hook. Thus when the component is created this function makes a call to my backend to retrieve information based on the query parameter that comes with the URL. This all works but I want to learn how to mock this API request to write better tests.</p>
  
  <p><strong>API Service</strong> This is used throughout the app to call the backend.</p>
  
  <p>file path: src/api/api.js</p>
  
  <pre><code>import axios from "axios";
  import { djangoServiceUser } from "../../config.js";
  
  export default axios.create({
    baseURL: "/api",
    timeout: 5000,
    headers: {
      "Content-Type": "application/json",
      Authorization: `Token ${djangoServiceUser}`
    }
  });
  </code></pre>
  
  <p><strong>Single File Component</strong></p>
  
  <p>This does work:</p>
  
  <pre><code>&lt;script&gt;
  import api from "@/api/api";
  
  export default {
    data() {
      return {
        loading: false,
        userBusinessOptions: null
      };
    },
    methods: {
      fetchBusinesses(fwt_user_id) {
        this.loading = true;
  
        api.get(`companies/${fwt_user_id}`).then(
          response =&gt; {
            this.loading = false;
            let businessNames = [];
            for (let i in response.data) {
              businessNames.push(response.data[i].name);
            }
            this.userBusinessOptions = businessNames;
          },
          error =&gt; {
            this.loading = false;
          }
        );
      }
    },
    created() {
      this.fetchBusinesses(this.$route.query.fwt_user_id);
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>beginApplicationVueTest.test.js</strong>
  file path: src/views/<strong>tests</strong>/beginApplicationVueTest.test.js</p>
  
  <pre><code>import { shallowMount } from "@vue/test-utils";
  import BeginApplication from "@/views/BeginApplication.vue";
  import Vuetify from "vuetify";
  import Vue from "vue";
  import api from "@/api/__mocks__/api";
  
  Vue.use(Vuetify);
  
  it("fetches businessses", () =&gt; {
    const $route = {
      query: { fwt_user_id: 35 }
    };
    const wrapper = shallowMount(BeginApplication, {
      mocks: {
        $route
      }
    });
    expect(wrapper.vm.$route.query.fwt_user_id).toBe(35);
  
    wrapper.vm.fetchBusinesses(wrapper.vm.$route.query.fwt_user_id);
    wrapper.vm.$nextTick(() =&gt; {
      expect(wrapper.vm.userBusinessOptions).toBe("test");
      done();
    });
  });
  </code></pre>
  
  <p><strong>Attempted mock API?</strong>
  file-path: src/api/<strong>mocks</strong>/api.js</p>
  
  <p>assume business_list.json is an example JSON response from the API.</p>
  
  <pre><code>[
    {
      "id": 90,
      "user": 67
    },
    {
      "id": 89,
      "user": 67
    }
  ]
  </code></pre>
  
  <pre><code>import businessList from "./data/business_list.json";
  
  export default {
    get: () =&gt; Promise.resolve({ data: businessList })
  };
  </code></pre>