vue-cli2.0 jest自动化测试报错
问题背景
项目是用vue-cli2.0搭的框架,与问题无关的不说了,脚手架集成了jest单元测试,一直没用到,最近领导开会提了自动化测试的事情,正好项目中有jest,于是想把项目中的jest用起来。
问题描述
关于页面的测试用例jest已执行通过了,但是对于异步请求的接口测试用例有一个问题,该问题导致了在执行jest异步测试用例时有问题,我觉得是因为项目中把axios库绑定到了this上了,在浏览器端通过this可以正常访问到axios(实际是在this.__proto__.__proto__上),但是执行jest的时候是在node环境,在node环境打印出来wrapper.vm找不到绑定的axios,应该是node环境中和浏览器环境中的this指向不一样导致的,所以结果在终端打印的接口返回值始终为空。
错误信息
console.log src\views\TestDemo.vue:98
TypeError: Cannot read property 'adornUrl' of undefined
at VueComponent._callee$ (E:\jpj-wx\src\views\TestDemo.vue:113:38)
at tryCatch (E:\jpj-wx\node_modules\babel-runtime\node_modules\regenerator-runtime\runtime.j
s:62:40)
at Generator.invoke [as _invoke] (E:\jpj-wx\node_modules\babel-runtime\node_modules\regenera
tor-runtime\runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (E:\jpj-wx\node_modules\babel-runtime\
node_modules\regenerator-runtime\runtime.js:114:21)
at step (E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
at E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:35:14
at new Promise (<anonymous>)
at new F (E:\jpj-wx\node_modules\babel-runtime\node_modules\core-js\library\modules\_export.
js:36:28)
at E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:14:12
at VueComponent.fetchAppList (E:\jpj-wx\src\views\TestDemo.vue:142:10)
at VueComponent.handleClick (E:\jpj-wx\src\views\TestDemo.vue:94:12)
at invokeWithErrorHandling (E:\jpj-wx\node_modules\vue\dist\vue.runtime.common.dev.js:1850:2
6)
at HTMLButtonElement.invoker (E:\jpj-wx\node_modules\vue\dist\vue.runtime.common.dev.js:2175
:14)
at HTMLButtonElement.original._wrapper (E:\jpj-wx\node_modules\vue\dist\vue.runtime.common.d
ev.js:6889:25)
at invokeEventListeners (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom\living\events\
EventTarget-impl.js:219:27)
at HTMLButtonElementImpl._dispatch (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom\liv
ing\events\EventTarget-impl.js:126:9)
at HTMLButtonElementImpl.dispatchEvent (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom
\living\events\EventTarget-impl.js:87:17)
at HTMLButtonElementImpl.dispatchEvent (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom
\living\nodes\HTMLElement-impl.js:36:27)
at HTMLButtonElement.dispatchEvent (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom\liv
ing\generated\EventTarget.js:61:35)
at Wrapper.trigger (E:\jpj-wx\node_modules\@vue\test-utils\dist\vue-test-utils.js:3759:16)
at _callee$ (E:\jpj-wx\test\unit\specs\TestDemo.spec.js:79:34)
at tryCatch (E:\jpj-wx\node_modules\babel-runtime\node_modules\regenerator-runtime\runtime.j
s:62:40)
at Generator.invoke [as _invoke] (E:\jpj-wx\node_modules\babel-runtime\node_modules\regenera
tor-runtime\runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (E:\jpj-wx\node_modules\babel-runtime\
node_modules\regenerator-runtime\runtime.js:114:21)
at step (E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
at E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:35:14
at new Promise (<anonymous>)
at new F (E:\jpj-wx\node_modules\babel-runtime\node_modules\core-js\library\modules\_export.
js:36:28)
at Object.<anonymous> (E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:14:1
2)
at Object.asyncFn (E:\jpj-wx\node_modules\_jest-jasmine2@21.2.1@jest-jasmine2\build\jasmine_
async.js:124:345)
at resolve (E:\jpj-wx\node_modules\_jest-jasmine2@21.2.1@jest-jasmine2\build\queue_runner.js
:46:12)
at new Promise (<anonymous>)
at mapper (E:\jpj-wx\node_modules\_jest-jasmine2@21.2.1@jest-jasmine2\build\queue_runner.js:
34:499)
at promise.then (E:\jpj-wx\node_modules\_jest-jasmine2@21.2.1@jest-jasmine2\build\queue_runn
er.js:74:39)
at process._tickCallback (internal/process/next_tick.js:68:7)
相关代码
// vue代码
<button id="btn" @click="handleClick">异步请求数据</button>
handleClick() {
this.fetchAppList().then(data => {
this.list = data
})
}
async fetchAppList() {
const rs = await this.$axios({
// 下面一行报错,this取不到$axios,继而取不到adornUrl方法
url: this.$axios.adornUrl('/sapi/appList'),
method: 'get'
})
const { data: { code, msg, appList } } = rs
if (code !== 0) {
this.$vux.toast.show({
type: 'warn',
text: msg || '服务访问异常',
isShowMask: true
})
return false
}
return appList
}
// jest代码
describe('测试异步', () => {
it('测试点击事件请求接口', done => {
const wrapper = shallowMount(TestDemo)
wrapper.find('#btn').trigger('click')
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.list).toEqual([])
done()
})
})
it('测试第三方库解决异步问题', async () => {
const wrapper = shallowMount(TestDemo)
wrapper.find('#btn').trigger('click')
await flushPromises()
expect(wrapper.vm.list).toEqual([])
})
// 下面的用例无法解决this的问题
it('测试直接传入vm', done => {
const wrapper = shallowMount(TestDemo)
wrapper.vm.fetchAppList(wrapper.vm).then(data => {
console.log(data)
wrapper.vm.$nextTick(() => {
expect(data).toEqual({})
done()
})
})
})
})
尝试方法
- 在用例里临时用toEqual([])让测试用例执行通过
- 尝试过在用例里通过wrapper.vm.fetchAppList(wrapper.vm),直接调用接口方法并把vue实例传进去,然后在接口方法里接收,无效
- 在网上查阅资料都是直接解决异步的自动化测试问题,没有提及执行异步的测试用例this指向的问题
- 哪位大神路过帮忙分析一下啊,看怎么样解决?我目前分析的结论就是node环境和浏览器环境this的指向会有区别,但找不到解决办法。亟待解决!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论