Testing Global Vue.prototype.$http method in Jest which uses axios in Vue

Question

I have a global prototype defined in my Vue project in main.js as follows

//main.js

import axios from 'axios';
import Vue from 'vue';

Vue.prototype.$http=axios.create({
   baseURL: 'https://example.com/api/' 
});

Various vue components directly call this.$http.get or this.$http.post for performing requests. How do I test these components in Jest, apparently using mock I can mocks I can do

jest.mock('axios')

but my project is huge and changing every instance of this.$http to axios is not feasible.

How to achieve this using jest.mock?

Also how to test if a single component is doing multiple API calls on different endpoints?

I'd first suggest making your $http into a proper Vue Plugin. That will enable mocking the plugin more easily than the current setup, and the interface will not change for your components that currently expect this.$http to exist. — Ross Allen
– Ross Allen, Commented May 25, 2020 at 18:07
You will need to mock responses somehow any way. You can try Moxios. It uses existing Axios instance. — Estus Flask
– Estus Flask, Commented May 26, 2020 at 6:33

Anil kumar · Accepted Answer · 2021-01-26 05:25:54Z

1

You can refer below code that is giving an idea that how i managed to solve this problem in my project In My project i have defined global prototype such as-

//main.js
import axios from 'axios'
Vue.prototype.$http = axios  //global prototype

And now in my components i can use 'axios' by referring this.$http. Now In my jest file have to test axios get request i.e this.$http.get('/url')

// test.spec.js

import axios from 'axios'
    
jest.mock("axios", () => ({
    get: () => Promise.resolve({ data: [{ val: 1 }] })
})); 
    
it('your test name' () => {
    const wrapper = mount('your component name', {
        mocks : {
            $http : axios   
        }   
    })
})

edited Jan 26, 2021 at 5:25

answered Jan 12, 2021 at 17:20

Anil kumar

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ömer Faruk PARLAR · Accepted Answer · 2021-12-17 07:33:50Z

0

axios.defaults.baseURL = "https://example.com/api/";

Vue.prototype.$http = axios;

answered Dec 17, 2021 at 7:33

Ömer Faruk PARLAR

1711 silver badge6 bronze badges

1 Comment

Brian Tompsett - 汤莱恩 Over a year ago

You need to add and explanation to this answer explaining how it solves the problem. A code only answer is not sufficient to explain why this is a good solution.

Collectives™ on Stack Overflow

Testing Global Vue.prototype.$http method in Jest which uses axios in Vue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related