How to mock axios (Jest + Vue)

I recently had to mock axios while writing tests for a huge frontend project at work. I'm writing this tutorial because I know that sometime in the future I will be googling this again and I might as well save future me the stress and document what I found right now.

First off, install jest-mock-axios with npm install -D jest-mock-axios or yarn add -D jest-mock-axios.

Next up, create a new folder __mocks__ in your Jest root directory. Your Jest root directory is defined in your project's package.json.

"jest": {
    "roots": [
      "spec/client"
    ],
}

Next, create a new file and name it axios.js. Make sure to place it in your newly created __mocks__ folder.

Place the code below in axios.js

// __mocks__/axios.js
import mockAxios from "jest-mock-axios";
export default mockAxios;

At this point, set-up is complete. Below is an example usage of the mocked version of axios you just finished setting up using this tutorial.

// Uploader.vue

import Uploader from "Uploader";
import mockAxios from "jest-mock-axios";
import { shallowMount } from "@vue-test-utils";

describe("Uploader.vue", () => {
  test("it should delete uploaded file", () => {
    const wrapper = shallowMount(Uploader);
    wrapper.setData({ uploads: [{ name: "Upload 1", public_id: "test_id" }] });
    wrapper.find(".uploads>li:first-child").trigger("click");
    mockAxios.mockResponse({ status: 200 });

    expect(wrapper.emitted("filedeleted").length).toEqual(1);
  });
});

For more information on the possibilities of jest-mock-axios, visit this link.