我正在努力尝试使用Mocha / Chai-Sinon在VueJS中测试请求,Axios作为请求库并尝试了Moxios和axios-mock-adapter的混合.以下示例与后者有关.
我正在尝试做的是在创建组件时发出请求,这很简单.
但测试要么抱怨结果变量未定义,要么是异步时间.
我是通过分配getData()函数的变量来做的吗？或者我应该回归价值观？任何帮助,将不胜感激.
零件
// 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)
})
})
解决方法
我不确定moxios模拟适配器,但我有类似的斗争.我最终使用了vue-webpack模板使用axios和moxios.我的目标是伪造一些博客文章,并声称它们被分配到this.posts变量.
你的getData()方法应该像你说的那样返回axios promise – 这样,我们就可以通过某种方式告诉测试方法完成了promise.否则它会继续下去.
然后在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调用.
https://wietse.loves.engineering/testing-promises-with-mocha-90df8b7d2e35#.yzcfju3qv
