Vue.js 单元测试VUE上的事件单击

我无法使我的

单击
-事件测试正常工作

我使用的是Vuetify组件：
v-btn
，但我的
单击
-事件似乎没有调度。我试着使用一个普通的按钮标签，但结果是一样的。我是测试新手，这实际上是我第一次运行，所以欢迎使用提示和指针

这是我正在测试的组件：


单击：{{counter}}
柜台
导出默认值{
名称：“单元测试”，
数据（）{
返回{
柜台:0
};
},
计算：{
计数（）{
把这个寄回柜台；
},
按钮样式（）{
返回{
边框：“纯色2px蓝色”，
背景：“黑色”，
填充：“5px12px”，
颜色：“白色”，
边界半径：“8px”
};
}
},
方法：{
addOne（）{
这个.counter++；
}
}
};

我在这里做了一个简单的测试，看看组件是否装载，检查标题的内容，并尝试为按钮分派事件，失败：

//库
从“Vue”导入Vue
从“Vuetify”导入Vuetify；
//乌提尔斯
从“./UnitTesting.vue”导入单元测试；
从'@vue/test-utils'导入{mount，createLocalVue}
const localVue=createLocalVue（）
Vue.use（Vuetify）；
描述（“UnitTesting.vue”，（）=>{
让虚张声势；
在每个之前（（）=>{
vuetify=新的vuetify（）
})
it（“测试单元测试组件”，（）=>{
常数包装=安装（单元测试{
localVue，
vuetify，
});
expect（wrapper.toBeTruthy（））
});
它（“测试按钮”，（）=>{
常数包装=安装（单元测试{
localVue，vuetify
});
const event=jest.fn（）；
const button=wrapper.find（“.v-btn”）；
expect（button.text（））.toContain（“计数器”）
const title=wrapper.find（“.marked”）；
expect（title.text（））.toContain（“单击：0”）；
button.vm.$on（“操作btn:单击”，事件）；
期望（事件）。已被调用的时间（0）；
按钮。触发器（“单击”）；
期望（事件）。达到要求的时间（1）；
})
})

如您所见，当我的测试预期已调度
click
-事件时，它会中断：

src/views/__测试失败__/UnitTesting.spec.js
● UnitTesting.vue›测试按钮
expected（jest.fn（））。toHaveBeenCalledTimes（expected）
预期呼叫数：1
收到的呼叫数：0
37 |预期（事件）。被催促的时间（0）；
38 |按钮触发（“点击”）；
>39 |预期（事件）。已被催收时间（1）；
|                   ^
40 |   })
41 | })
反对。（src/views/__测试__/UnitTesting.spec.js:39:19）
测试套件：1个失败，1个通过，共2个
测试：1次失败，2次通过，共3次
快照：共0个
时间：2.249秒

我做错什么了吗？
试着模仿
addOne
而不是
event

您需要模拟实际事件，而不是创建组件不知道的新事件

wrapper.vm.addOne=jest.fn（）；
expect（wrapper.vm.addOne）.toHaveBeenCalledTimes（1）；
问题似乎在于您正在收听的事件名称。没有
操作btn：从
v-btn
单击了
事件。但是，有一个
单击事件。更改事件名称可以解决以下问题：

//button.vm.$on（“操作btn:单击”，事件）；//不要这样做
按钮.vm.$on（“单击”，事件）；
它不是这样工作的，而是将类型更改为“单击”