CODEWITHSUNDEEP
vue.jsvue-routervue-test-utils
Prasanna
Prasanna

Reputation: 4636

How to trigger a modified event with vue test utils?

I am fairly new to vue, and I have created a router-link with a VueRouter to navigate to a certain page. 

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

Now I need to mock this click.native function. I know there is a trigger function for vue components available from vue-test-utils.

But how am I to click.native from a trigger ?

my onRouteClicked looks like this

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

}

my test look like this

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

the routedIndex is not changing at all

Upvotes: 0

Views: 782

Answers (1)

Prasanna
Prasanna

Reputation: 4636

Yeah so after an entire day of effort I guess I should make this a Q&A.

The problem was that I was not using VueRouter. Importing VueRouter and my routes and using them with a localVue did the trick for me.

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

And on my tests

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

Upvotes: 1

Related Questions