关键词：
【中文标题】使用 Vue、Axios 和 Mocha 对 HTTP 请求进行单元测试【英文标题】：Unit testing HTTP request with Vue, Axios, and Mocha 【发布时间】：2017-06-05 23:48:03 【问题描述】：我真的很难尝试使用 Mocha/Chai-Sinon 在 VueJS 中测试请求，使用 Axios 作为请求库，并尝试了 Moxios 和 axios-mock-adaptor 的混合。下面的例子是后者。
我要做的是在创建组件时发出请求，这很简单。
但测试要么抱怨 results 变量未定义，要么抱怨 async timout。
我通过为getData() function? Or should Ireturn 的变量分配值来做对了吗？任何帮助将不胜感激。
组件
// Third-party imports
import axios from 'axios'
// Component imports
import VideoCard from './components/VideoCard'
export default
name: 'app',
components:
VideoCard
,
data ()
return
API: '/static/data.json',
results: null
,
created ()
this.getData()
,
methods:
getData: function ()
// I've even tried return instead of assigning to a variable
this.results = axios.get(this.API)
.then(function (response)
console.log('then()')
return response.data.data
)
.catch(function (error)
console.log(error)
return error
)
测试
import Vue from 'vue'
import App from 'src/App'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
let mock = new MockAdapter(axios)
describe('try and load some data from somewhere', () =>
it('should update the results variable with results', (done) =>
console.log('test top')
mock.onGet('/static/data.json').reply(200,
data:
data: [
id: 1, name: 'Mexican keyboard cat' ,
id: 2, name: 'Will it blend?'
]
)
const VM = new Vue(App).$mount
setTimeout(() =>
expect(VM.results).to.be.null
done()
, 1000)
)
)
【问题讨论】：
【参考方案1】：我不确定 moxios 模拟适配器，但我也遇到过类似的问题。我最终将 axios 和 moxios 与 vue-webpack 模板一起使用。我的目标是伪造检索一些博客文章，并断言它们被分配给 this.posts 变量。
您的 getData() 方法应该像您说的那样返回 axios 承诺 - 这样，我们就有办法告诉测试方法承诺完成了。否则它将继续运行。
然后在 getData() 的成功回调中，您可以分配您的数据。所以它看起来像
return axios.get('url').then((response)
this.results = response
)
现在在你的测试中
it('returns the api call', (done) =>
const vm = Vue.extend(VideoCard)
const videoCard = new vm()
videoCard.getData().then(() =>
// expect, assert, whatever
).then(done, done)
)
注意 done() 的使用。这只是一个指南，您必须根据您正在做什么来修改它。如果您需要更多详细信息，请告诉我。我推荐使用 moxios 来模拟 axios 调用。
这是一篇关于测试对我有帮助的 api 调用的好文章。
https://wietse.loves.engineering/testing-promises-with-mocha-90df8b7d2e35#.yzcfju3qv
【讨论】：
感谢您的回复！你肯定在大方向上帮助了我；我已经在下面发布了我的答案。再次感谢！ 很高兴你得到它！干得好，存根请求绝对是要走的路。发布您的答案也很棒，这将帮助其他人。如果您对答案感到满意，可以将答案标记为已接受（： 奇怪，axios-mock-adapter 对我也不起作用，承诺似乎没有兑现。 Moxios 确实有效！【参考方案2】：非常感谢xenetics post above，他帮助我指出了正确的方向。
简而言之，我试图错误地访问数据，而我应该是using the $data property
我也放弃了axios-mock-adaptor 并重新使用moxios。
我确实必须 return 我的组件中的承诺，就像这样；
getData: function ()
let self = this
return axios.get(this.API)
.then(function (response)
self.results = response.data.data
)
.catch(function (error)
self.results = error
)
（使用let self = this 绕过了 axios 范围的“问题”）
然后为了测试这一点，我所要做的就是存根请求（在分别为 beforeEach() 和 afterEach() 执行 moxios.install() 和 moxios.uninstall 之后。
it('should make the request and update the results variable', (done) =>
moxios.stubRequest('./static/data.json',
status: 200,
responseText:
data: [
id: 1, name: 'Mexican keyboard cat' ,
id: 2, name: 'Will it blend?'
]
)
const VM = new Vue(App)
expect(VM.$data.results).to.be.null
VM.getData().then(() =>
expect(VM.$data.results).to.be.an('array')
expect(VM.$data.results).to.have.length(2)
).then(done, done)
)
【讨论】：
在 vue 中使用 axios 的 Cors 和预检错误
】在vue中使用axios的Cors和预检错误【英文标题】：Corsandpreflighterrorswithaxiosinvue【发布时间】：2018-12-2207:30:25【问题描述】：在我的应用程序中，我将laravel作为后端，jwt-auth作为身份验证，社交名流作为oauth2提供者，vue作为我的前... 查看详情
使用 Axios 和 Vue.js 进行 JWT 授权（标题）
】使用Axios和Vue.js进行JWT授权（标题）【英文标题】：JWTAuthorizationwithAxiosandVue.js(Header)【发布时间】：2019-06-1303:39:10【问题描述】：我对网络开发还是很陌生，所以如果解决方案很明显或者我的问题被问得不好，我提前道歉。所... 查看详情
如何对使用 Axios（或其他异步更新）的 Vue 组件进行单元测试？
】如何对使用Axios（或其他异步更新）的Vue组件进行单元测试？【英文标题】：HowtounittestVuecomponentthatusesAxios(orotherasyncupdate)?【发布时间】：2019-05-1609:25:02【问题描述】：我有一个Vue组件/视图，它使用Axios执行API请求并使用响应... 查看详情
使用 Mocha 和 Node.js 对私有函数进行单元测试
】使用Mocha和Node.js对私有函数进行单元测试【英文标题】：UnittestingofprivatefunctionswithMochaandNode.js【发布时间】：2014-04-0114:23:03【问题描述】：我正在使用Mocha来对为Node.js编写的应用程序进行单元测试。我想知道是否可以对尚未在... 查看详情
我如何使用 Mocha 和 Chai 对 Node 创建的端点进行异步测试？
】我如何使用Mocha和Chai对Node创建的端点进行异步测试？【英文标题】：HowicanuseMochaandChaitomakeanAsyncTestforEndpointscreatedbyNode?【发布时间】：2021-06-1422:30:20【问题描述】：describe(\'NotificationsAPI\',()=>/*GettingAllNotification*/describe(\'getNoti... 查看详情
axios使用总结(代码片段)
...功能。自从vue2.0之后，就不再对vue-resource更新，而是推荐使用axios技术详述使用方法在安装完成VUE后安装Axiosnpminstall--saveaxiosvue-axios从VUE框架中引入Axios，以便使用 查看详情
如何使用 sinon 和 Mocha 模拟对 mysql 查询 nodeJS 的 Promisify 调用？
】如何使用sinon和Mocha模拟对mysql查询nodeJS的Promisify调用？【英文标题】：HowtomockpromisifycallonmysqlquerynodeJSusingsinonandMocha?【发布时间】：2021-12-1013:56:58【问题描述】：这是我使用mysql的代码-import*asmysqlfrom\'mysql\';importpromisifyfrom\'util\'... 查看详情
vue安装并使用axios发送请求(代码片段)
前言本文主要介绍的是使用在Vue项目中安装并使用axios发送请求axios介绍axios是一种Web数据交互方式它是一个基于promise的网络请求库，作用于node.js和浏览器中，它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)本... 查看详情
使用 axios 和 vue.js 取消先前的请求
】使用axios和vue.js取消先前的请求【英文标题】：Cancelpreviousrequestusingaxioswithvue.js【发布时间】：2018-11-0402:24:02【问题描述】：我正在使用axios和vue.js。我已经谷歌了它，并查看了axios文档，但仍然不明白该怎么做。【问题讨论】... 查看详情
如何使用 axios 发送数组和表单数据 - Vue
】如何使用axios发送数组和表单数据-Vue【英文标题】：Howtosendarrayandformdatawithaxios-Vue【发布时间】：2021-10-2018:13:25【问题描述】：我正在做一个vue/laravel项目，我想用axios发送一个数组和表单数据。这是我的代码：submit()//TheFormData... 查看详情
为啥vue不使用ajax
vue也可以使用ajax。ajax只是一种技术实现方式，之前一般是指jquery封装的ajax方法。在vue中，可以使用axios代替，也可以自己封装一个类似的ajax方法。封装异步传输方法一般需使用XMLHttpRequest对象或fetch等方法实现。参考技术Aajax和... 查看详情
vue中使用axios（异步请求）和mock.js模拟虚假数据
一.使用axios1.安装npminstall--save axios2.引用importAxiosfrom‘axios‘Vue.prototype.Axios=Axios二.使用mock1.安装npminstall--savemockjs2.创建mock目录3.创建mock.js4.引用importmockDatafrom‘./mock/mock‘5.使用this.Axios.post 查看详情
一篇搞定vue请求和跨域
vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现 axios是一个基本Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护 axios发送AJAX请求 安装axiosnpminstal... 查看详情
Axios 响应数据和 Vue JS , 使用数据
】Axios响应数据和VueJS,使用数据【英文标题】：AxiosResponsedataandVueJS,Usingthedata【发布时间】：2018-03-2219:41:33【问题描述】：Vue新手，不太喜欢Javascript，所以我有一个Vue组件，它使用Axios来获取控制台中的一些数据。我根本无法将... 查看详情
使 Vue 数据对所有组件全局可用和可访问
...一个带有一些页面的简单Vuecli应用程序。在Users.vue中，我使用axios从API获取数据：<script>importaxiosfrom\'axios\'exportdefaultd 查看详情
使用 Vue.js、Axios 和 Django 过滤对象
】使用Vue.js、Axios和Django过滤对象【英文标题】：FilterobjectwithVue.js,AxiosandDjango【发布时间】：2019-04-2903:18:00【问题描述】：我有一个使用Vue.js和Django的项目。我正在尝试通过简单的搜索从数据库中获取列表。在Vue/Axios中，我有它... 查看详情
如何在 Vue 和 Laravel 中使用 axios 上传图像文件和数据对象？
】如何在Vue和Laravel中使用axios上传图像文件和数据对象？【英文标题】：HowcaniuploadimagefileanddataobjectwithaxiosinVue&Laravel?【发布时间】：2020-08-1002:32:22【问题描述】：我正在努力使用Vue、Laravel和Axios将图像和几个文本/数字数据字... 查看详情
如何使用 mocha sinon 存根对请求库进行单元测试？
】如何使用mochasinon存根对请求库进行单元测试？【英文标题】：HowtounittestRequestlibrarywithmochasinonstub?【发布时间】：2021-11-2618:37:36【问题描述】：如何使用Mocha、sinon和chai测试NPM请求库？我得到一个Error:getaddrinfoENOTFOUND。URL应该无... 查看详情