如何使用 vue test utils 触发修改事件？答案

【问题标题】：How to trigger a modified event with vue test utils?如何使用 vue test utils 触发修改事件？
【发布时间】：2019-06-01 07:34:53
【问题描述】：

我是 vue 的新手，我创建了一个带有 VueRouter 的 router-link 来导航到某个页面。

<router-link
  @click.native="onRouteClicked(index)"
/>

现在我需要模拟这个click.native 函数。我知道 vue-test-utils 提供了一个用于 vue 组件的 trigger 函数。

但是我如何从触发器到click.native？

我的 onRouteClicked 看起来像这样

methods: {
 onRouteClicked: function (index) {
   this.routedIndex = index;
 }

}

我的测试是这样的

const myRouteWrapper = navBar.find('[to="/myroute"]');
myRouteWrapper.trigger('click')
expect(myComp.vm.routedIndex).equal(1);

routedIndex 完全没有变化

【问题讨论】：

您是否在methods 对象上定义了onRouteClicked 函数？我相信应该会触发点击事件。
@jom 我已经更新了我的问题。是的，onRouteClicked 确实在方法对象内
TBH，我对 vue-test-utils 不是很熟悉，但我确实注意到 find 方法需要 3 different types of selectors。在这种情况下，也许我会检查库是否真的将单个 router-links 转换为 HTML 锚标记，其中 #/myroute 作为 href 属性，我们可以改为使用 navBar.find('[href="#/myroute"]')。
@jom 嗨，我发现了问题。在我的测试中，我没有使用带有 localVue 的 VueRouter。因此，router-link 从未被转换为，而又从未真正触发过点击事件。虽然花了很多时间才发现这一点。我应该回答我自己的问题还是将解决方案作为评论留下，以便被问题困扰的人可以找到解决方案。
我会说用这个解决方案回答你自己的问题，人们将来可能会发现这很有用，就像我一样;)

标签： vue.js vue-router vue-test-utils

【解决方案1】：

是的，所以经过一整天的努力，我想我应该把这个作为问答环节。

问题是我没有使用VueRouter。导入VueRouter 和我的路线并将它们与localVue 一起使用对我来说是诀窍。

import VueRouter from 'vue-router'
import { mount, createLocalVue } from '@vue/test-utils'

var localVueInstance = createLocalVue()
localVueInstance.use(VueRouter)

var router = new VueRouter({
   routes: [],
   mode: 'history'
})

在我的测试中

var wrapper = mount(navBarComp, {
    propsData,
    localVue: localVueInstance,
    router 
});
var myRouteWrapper = wrapper.find('[href="/myroute"]');
myRouteWrapper.trigger('click')

【讨论】：