Question

我对vue相当陌生，并且已经使用VueRouter创建了router-link以导航到特定页面。

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

现在，我需要模拟此click.native函数。我知道trigger有一个vue-test-utils函数可用于vue组件。

但是我如何从触发器进入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完全没有改变

Answer 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')

如何使用vue test utils触发修改后的事件？

1 个答案: