Unit testing 在vuex操作返回的承诺内测试VueJS方法

我有一个Vue组件，它使用vuex存储中的映射操作，该操作返回一个承诺。当组件调用映射操作并且映射操作已解决时，我调用另一个vue方法

vm.$router.push（）

。我想断言调用了

push

方法。下面是我的组件、测试和一些助手方法，这些方法是我创建的，用于使用vuex和vue路由器对组件进行细分

这是我的

.vue

组件，其中包含一些console.log以跟踪发生的情况。

允诺
从“vuex”导入{mapActions}
导出默认值{
方法：{
…映射动作（['promiseAction']），
允诺{
const vm=this
vm.$router.push（“/some/route”）
console.log（'承诺之前'）
console.log（vm.promiseAction（））
返回vm.promiseAction（）.then（函数（响应）{
console.log（'内部承诺'）
vm.$router.push（“/some/other/route”）
})
}
}
}

这是我的测试。我用的是摩卡、卡玛、柴和jquery chia

从“@/components/Testing”导入测试
描述（'Testing.vue'，（）=>{
const mount=componentHelper（测试）
it.only（'在从操作返回的承诺中断言某事'，（）=>{
const promise=新承诺（resolve=>resolve（'success'））
const promiseAction=stubAction（'promiseAction'）。返回（承诺）
常量vm=mount（）
const routerPush=sinon.spy（虚拟机$router，'push'）
$（'.单击承诺'）。单击（）
期待（允诺）被召唤
expect（routerPush.to.have.been.calledWith（'/some/route'）//此过程通过
返回vm.$nextTick（（）=>{
console.log（'innexttick'）
expect（routerPush.to.have.been.calledWith（'/some/other/routes'）//这永远不会发生
})
})
})

这是我的助手文件。我不确定这是否100%必要，但我想在这篇文章中包含所有内容

从“Vue”导入Vue
从“Vuex”导入Vuex
从“vue路由器”导入VueRouter
Vue.use（Vuex）
Vue.use（VueRouter）
让div
在每个之前（（）=>{
//为要装载到的组件创建dom元素
div=document.createElement（'div'）
document.body.appendChild（div）
})
之后（（）=>{
//每次测试后清理文档节点
Array.prototype.forEach.call（document.queryselectoral（'body*：not（[type=“text/javascript”]）），node=>{
node.parentNode.removeChild（节点）
})
})
//删除存储配置对象
常量存储配置={
动作：{}
}
/**
*设置将模拟存储附加到组件的函数
*并将组件安装到测试div元件上
*
*这样使用：
*const mount=componentHelper（您的组件）
*做一些设置
*调用mount（）实例化模拟组件
*
*@param组件
*@返回{function（）}
*/
window.componentHelper=函数（组件）{
const router=new VueRouter（{}）
return（）=>{
//1.将存根存储连接到组件
component.store=新的Vuex.store（storeConfig）
component.router=路由器
//2.将组件装载到dom元素
//3.返回vue实例
返回新的Vue（组件）。$mount（div）
}
}
/**
*创建要添加到假存储的操作
*返回可以对其断言的sinon存根
*@param actionName
*/
window.stubAction=（actionName）=>{
//1.创建存根
const stub=sinon.stub（）
//2.创建将放置在存储中的操作函数，并将其添加到存储中
storeConfig.actions[actionName]=函数（上下文，…args）{
//3.调用此操作时，它将调用存根
//返回存根，以便可以针对存根返回值进行断言
//示例：stubAction（'fakeAction'）。返回（'xyz'）
返回存根（…args）
}
//4.返回放置在断言操作返回中的存根
返回存根
}

当我运行此测试时，这就是我得到的结果。

LOG日志：“承诺前”
LOG LOG:Promise{u c:[]，_a:undefined，_s:1，_d:true，_v:'success'，_h:0，_n:true}
测试.vue
✓ 在从一个动作返回的承诺中断言某事
PhantomJS 2.1.1（Linux 0.0.0）：成功执行了4次中的1次（0.045秒/0.018秒）
总数：1成功
====================================================覆盖范围摘要===============================
报表：31.58%（6/19）
分行：100%（0/0）
功能：0%（0/2）
行数：31.58%（6/19）
================================================================================
日志：“在nextTick内”
错误日志：'[Vue warn]：nextTick中的错误：“AssertionError:应使用参数/some/other/routes调用推送
/一些/路线/一些/其他/路线”
(见于)"
错误日志：AssertionError{message:'应使用参数/some/other/routes调用推送
/some/route/some/other/routes'，showDiff:false，actual:push，expected:undefined，stack:undefined，line:210，sourceURL:'http://localhost:9877/absolute/home/doug/Code/projects/vue-测试沙箱/节点_模块/chai/chai.js？AB7CF506D9D77C111C878B110B7F25348630760'}
日志：“内部承诺”

正如您所看到的，测试通过了，但是promise中的代码直到测试完成后才运行。我说的是这一部分

return vm.promiseAction().then(function (response) {
    console.log('inside promiseAction')
    vm.$router.push('/some/other/route')
  })

我还注销了promise函数console.log（vm.promiseAction（）），您可以看到它正是您所期望的

我怎样才能让考试等待承诺？我原以为下一步可能是答案，但它似乎不起作用

---

谢谢您的帮助。

单击按钮并不是一个真正的好方法。此外，我甚至不确定点击按钮是否真的值得测试。如果Vue的事件处理程序无法正常工作，则会出现更大的问题

相反，我会建议你做一个好朋友

//execute the handler
const test = vm.promise()

// test that the pre-async actions occured
expect(promiseAction).to.have.been.called
expect(routerPush).to.have.been.calledWith('/some/route')

// test the post-async action occurred
return test.then(() => {
  expect(routerPush).to.have.been.calledWith('/some/other/routes')
})