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

Posted 2023-02-22

【中文标题】在 Jest 中测试 Global Vue.prototype.$http 方法，它在 Vue 中使用 axios

【英文标题】：Testing Global Vue.prototype.$http method in Jest which uses axios in Vue

【发布时间】：2020-09-12 09:51:09

【问题描述】：

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

//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 中测试这些组件，显然使用 mock I can mocks I can do

jest.mock('axios')

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

如何使用jest.mock 实现这一点？

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

【问题讨论】：

我首先建议将您的$http 改为正确的Vue Plugin。这将使模拟插件比当前设置更容易，并且对于当前期望 this.$http 存在的组件，界面不会改变。

您需要以某种方式模拟响应。你可以试试 Moxios。它使用现有的 Axios 实例。

【参考方案1】：

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

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

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

【参考方案2】：

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

Vue.prototype.$http = axios;

【讨论】：

您需要在此答案中添加和解释，说明它如何解决问题。仅代码答案不足以解释为什么这是一个好的解决方案。