Javascript @使用jest测试UTIL（vue引导）在b-modal上未触发ok侦听器

我将vue引导b-modal与

@ok=“save”

挂钩一起使用

mycomponent.vue如下所示：

开放模态
从“Vue”导入Vue；
从“vue类组件”导入组件；
从“/RestClient”导入{RestClient}；
@组件（{name:“fooController”}）
导出默认类FooController扩展Vue{
公共名称=”；
public add（）：void{
这个.$root.$emit（“bv:：show:：modal”，“modal detail”）；
}
public save（）：void{
console.log（“在保存方法中”）；
RestClient.create（this.fooName）；
}
}

RestClient.ts如下所示：

导出类RestClient{
静态创建（有效负载：字符串）{
返回有效载荷；
}
}

测试如下所示：

从“@vue/test-utils”导入{createLocalVue，mount}”；
从“引导vue”导入引导vue；
从“/MyComponent.vue”导入MyComponent；
从“/RestClient”导入{RestClient}；
jest.mock（“./RestClient.ts”，（）=>({
RestClient：{
create:jest.fn（（）=>{
返回{}；
//返回承诺。解决（{}）；
})
}
}));
描述（“组件测试”，（）=>{
const localVue=createLocalVue（）；
localVue.use（BootstrapVue）；
它（“在确定模式时应调用REST客户机上的create方法”，（完成）=>{
常量包装=装入（MyComponent{
附件文档：正确，
localVue
});
expect（wrapper.isVueInstance（））.toBe（true）；
//只有一个按钮：打开模式按钮
包装器。查找（“按钮”）。触发器（“单击”）；
const modal=wrapper.find（“模态细节”）；
modal.vm.$emit（“ok”）；
返回wrapper.vm.$nextTick（）。然后（（）=>{
expect（RestClient.create）.toBeCalled（）；
返回wrapper.vm.$nextTick（）.then（完成）；
});
});
});

我直接在模态上发出

ok

事件。 然后，我正在监视save方法中要执行的console.log语句，在执行测试时，在终端中看不到该语句

因此，不会调用

RestClient.create

-方法。

---

为什么？

@ok

是一个自定义Vue事件，而不是本机浏览器DOM事件。

.provent

修饰符对自定义Vue事件无效。

@ok

是自定义Vue事件，而不是本机浏览器DOM事件。

.provent

修改器对自定义Vue事件无效。

删除

.provent

仍然不会触发

保存
-method查看，我认为
@ok
事件在这种情况下特定于Vue-bootstrap。是的，这是BootstrapVue的自定义Vue组件事件（我编写了代码）那么，我如何测试modal.vm.$emit（“ok”）是否实际调用了关联的方法呢？如果使用JEST，那么使用
JEST.fn（）
设置一个模拟保存函数，您仍然可以使用Vue test utils找到ok按钮并单击它。注意：模态使用转换，因此在安装模态后，您需要等待
完成
requestAnimationFrame
，然后再搜索按钮并单击它。您可以看到我们如何在删除
时测试modals。prevent
仍然不会触发
save
-method查看，我认为
@ok
事件在本例中是特定于vue-bootstrap的。是的，这是BootstrapVue的自定义vue组件事件（我编写了代码），因此如何测试modal.vm.$emit（“ok”）是否实际调用了关联的方法？如果使用JEST，则使用
JEST.fn（）
设置一个模拟保存函数，您仍然可以使用Vue test utils找到“确定”按钮并单击它。注意：模态使用转换，因此在安装模态后，您需要等待
完成
requestAnimationFrame
，然后再搜索按钮并单击它。你可以看到我们是如何测试模态的