vue.js - 在 Jest 中测试 Global Vue.prototype.$http 方法，它在 Vue 中使用 axios

Question

我在 main.js 的 Vue 项目中定义了一个全局原型，如下所示

//main.js

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

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

各种 vue 组件直接调用this.$http.get或this.$http.post执行请求。我如何在 Jest 中测试这些组件，显然使用模拟我可以模拟我可以做

jest.mock('axios')

但是我的项目很大，将每个实例更改this.$http为 axios 是不可行的。

如何使用jest.mock？

另外如何测试单个组件是否在不同的端点上进行多个 API 调用？

Answer 1

您可以参考下面的代码，了解我如何在我的项目中设法解决这个问题在我的项目中，我定义了全局原型，例如 -

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

现在在我的组件中，我可以通过引用来使用“axios” this.$http。现在在我的笑话文件中必须测试 axios 获取请求，即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   
        }   
    })
})

Answer 2

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

Vue.prototype.$http = axios;