关键词：
【中文标题】事件点击单元测试VUE【英文标题】：Event Click on unit testing VUE 【发布时间】：2020-10-10 02:57:33 【问题描述】：我的click-event 测试无法运行。
我正在使用 Vuetify 组件：v-btn，但我的 click-event 似乎没有调度。我尝试使用普通按钮标签，但结果相同。我是测试新手，这实际上是我的第一次运行，所以欢迎提示和指点。
这是我正在测试的组件：
<template>
<div>
<div class="marked">
<h2>Clicks: counter </h2>
</div>
<v-btn @click="addOne" :style="buttonStyle">Counter</v-btn>
</div>
</template>
<script>
export default
name: "UnitTesting",
data()
return
counter: 0
;
,
computed:
count()
return this.counter;
,
buttonStyle()
return
border: "solid 2px blue",
background: "black",
padding: "5px 12px",
color: "white",
borderRadius: "8px"
;
,
methods:
addOne()
this.counter++;
;
</script>
我在这里有一个简单的测试，看看组件是否挂载，检查标题的内容，并尝试为按钮分派事件，失败：
// Library
import Vue from "vue"
import Vuetify from "vuetify";
// Utils
import UnitTesting from "../UnitTesting.vue";
import mount, createLocalVue from '@vue/test-utils'
const localVue = createLocalVue()
Vue.use(Vuetify);
describe("UnitTesting.vue", () =>
let vuetify;
beforeEach(() =>
vuetify = new Vuetify()
)
it("Testing UnitTesting Component", () =>
const wrapper = mount(UnitTesting,
localVue,
vuetify,
);
expect(wrapper).toBeTruthy()
);
it("Testing button", () =>
const wrapper = mount(UnitTesting,
localVue, vuetify
);
const event = jest.fn();
const button = wrapper.find(".v-btn");
expect(button.text()).toContain("Counter")
const title = wrapper.find(".marked");
expect(title.text()).toContain("Clicks: 0");
button.vm.$on("action-btn:clicked", event);
expect(event).toHaveBeenCalledTimes(0);
button.trigger("click");
expect(event).toHaveBeenCalledTimes(1);
)
)
如您所见，我的测试在预期 click-event 已被调度时中断：
FAIL src/views/__tests__/UnitTesting.spec.js
● UnitTesting.vue › Testing button
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
37 | expect(event).toHaveBeenCalledTimes(0);
38 | button.trigger("click");
> 39 | expect(event).toHaveBeenCalledTimes(1);
| ^
40 | )
41 | )
at Object.<anonymous> (src/views/__tests__/UnitTesting.spec.js:39:19)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 2 passed, 3 total
Snapshots: 0 total
Time: 2.249 s
我是不是做错了什么？
【问题讨论】：
【参考方案1】：问题似乎出在您正在收听的事件名称上。没有来自v-btn 的action-btn:clicked 事件。但是，有一个click 事件。更改活动名称可以解决问题：
//button.vm.$on("action-btn:clicked", event); // DON'T DO THIS
button.vm.$on("click", event);
【讨论】：
【参考方案2】：尝试像 addOne 这样模拟而不是 event
您需要模拟实际事件，而不是创建组件不知道的新事件
wrapper.vm.addOne = jest.fn();
expect(wrapper.vm.addOne).toHaveBeenCalledTimes(1);
【讨论】：
它不是这样工作的，它确实将类型更改为“点击”vue+elementtable如何给指定的单元格添加点击事件
<el-table@row-click="openDetails"> </el-table>//对应的methods中//点击行事件 methods: openDetails(row) //具体操作 , 查看详情
在单元测试中触发 vue-select 下拉项选择
...tils和@testing-library/vue以及在浏览器中以编程方式触发点击事件以强制选择列表项。然 查看详情
如何使用 vue-test-utils 在单元测试期间触发窗口事件
】如何使用vue-test-utils在单元测试期间触发窗口事件【英文标题】：Howtotriggerawindoweventduringunittestingusingvue-test-utils【发布时间】：2019-09-0808:14:37【问题描述】：我已经添加了“attachToDocument”，但我仍然无法在窗口上触发keyup事件... 查看详情
使用 vue-test-utils 测试两个不同的点击事件
】使用vue-test-utils测试两个不同的点击事件【英文标题】：Testingtwodifferentclickeventswithvue-test-utils【发布时间】：2020-01-0814:32:39【问题描述】：尝试测试两个不同按钮上的单击事件是否调用了两个方法。结果返回第二个事件的mock方... 查看详情
Jest / Vue 测试实用程序 - 来自子组件范围插槽的方法 - [Vue 警告]：事件“点击”的无效处理程序：未定义
...t/Vue测试实用程序-来自子组件范围插槽的方法-[Vue警告]：事件“点击”的无效处理程序：未定义【英文标题】：Jest/Vuetestutils-Methodcomingfromsubcomponentscopedslot-[Vuewarn]:Invalidhandlerforevent"click":gotundefined【发布时间】：2021-10-0215:... 查看详情
单元测试包含 vuetify 的 vue 组件
...】：例如，如何在你的组件内部触发v-autocomplete中的change事件，以便我我尝试了类似的方法：importSomethingAutocompletefrom"@/components/SomethingAutocomplete.vu 查看详情
单元测试Vuetify v-select @change事件？
】单元测试Vuetifyv-select@change事件？【英文标题】：UnitTestVuetifyv-select@changeevent?【发布时间】：2020-07-1321:46:25【问题描述】：无法编写测试Vuetifyv-select@change事件的测试。事件处理程序select_change不在测试内部调用。Demo.vue<div>&l... 查看详情
Jest Vue，测试触发点击按钮，预期 1，收到：0
】JestVue，测试触发点击按钮，预期1，收到：0【英文标题】：JestVue,testtriggerclickbutton,Expected1,received:0【发布时间】：2020-02-0700:07:00【问题描述】：我对触发点击的单元测试有问题。错误：预期：1，收到：0我正在使用Vue、Jest和Vue... 查看详情
element-ui之解决可编辑表格点击行操作或者选择日期选择器（统归为可编辑单元格）仍触发行点击事件的问题(代码片段)
...期选择器（统归为可编辑单元格）仍触发行点击事件的问题 如图所示，在我们点击日期选择器和操作查看时都分别触发了行点击事件，而有的时候我们通常并不希望点击操作或者日期选择器（可以统归为... 查看详情
单元测试 Vue 插件
】单元测试Vue插件【英文标题】：UnittestingaVueplugin【发布时间】：2019-12-2523:14:51【问题描述】：我有一个控制台记录数据的插件。logData.spec.jsimportVuefrom\'vue\'importcreateLocalVuefrom\'@vue/test-utils\'importlogDatafrom\'./logData\'describe(\'logDataplu... 查看详情
单元测试一个打字稿vue组件
】单元测试一个打字稿vue组件【英文标题】：Unittestatypescriptvuecomponent【发布时间】：2017-10-2608:38:27【问题描述】：我需要能够测试我的组件（方法、计算属性、数据……）。但是，当我在单元测试中导入我的vue组件时：importPagin... 查看详情
在本机反应中单元测试触摸事件
】在本机反应中单元测试触摸事件【英文标题】：Unittestingtoucheventsinreactnative【发布时间】：2016-05-1009:39:40【问题描述】：我正在尝试使用this指南测试驱动反应本机代码。reactnative被reactjs覆盖，可以使用jestjs进行浅层渲染和测试... 查看详情
单元测试应用程序生命周期事件
】单元测试应用程序生命周期事件【英文标题】：Unittestingapplicationlifecycleevents【发布时间】：2011-04-2708:32:40【问题描述】：我创建了一个继承System.Web.UI.Page的类。在该类中，我覆盖了一些应用程序生命周期事件，例如page_load和pa... 查看详情
如何用工厂函数组织Vue单元测试？
】如何用工厂函数组织Vue单元测试？【英文标题】：HowtoorganizeVueunittestwithfactoryfunctions?【发布时间】：2020-02-2416:14:43【问题描述】：我正在尝试使用工厂函数为我的Dashboard.vue组件编写单元测试，以便我可以根据需要覆盖store和wra... 查看详情
单元测试 angularjs 指令的事件广播
】单元测试angularjs指令的事件广播【英文标题】：Unittestingangularjsdirectives\'seventbroadcast【发布时间】：2015-07-2910:52:49【问题描述】：我以前从未测试过我的angularjs指令，我为当前公司编写的指令也是使用事件将指令传达给指令和... 查看详情
Vue 和 Jest 单元测试组件
】Vue和Jest单元测试组件【英文标题】：VueandJestunittestingcomponents【发布时间】：2019-01-0209:17:46【问题描述】：我是Vuejs的新手，我开始使用Jest进行单元测试。我不知道从哪里以及如何开始。我有这段Vue代码，我想用Jest进行测试。... 查看详情
Vue单元测试输入值未设置
】Vue单元测试输入值未设置【英文标题】：VueUnittestInputvaluenotset【发布时间】：2021-09-1318:48:13【问题描述】：我正在使用带有typescript的Vue，并尝试对登录页面的输入值进行单元测试。测试设置输入值，然后检查该值是否等于输... 查看详情
带有笑话的Vue Cli单元测试如何运行单个测试
】带有笑话的VueCli单元测试如何运行单个测试【英文标题】：VueCliunittestwithjesthowtorunsingletest【发布时间】：2019-07-2108:43:50【问题描述】：我有使用vuecli3的vue应用程序。在设置过程中，我选择jest作为测试框架。要运行我的单元测... 查看详情