router-link and router-view stub components

[eddyerburgh]

Should we include router-view and router-link stub components?

Currently I have to do something like this to test the text rendered in a router-link:

const RouterLink = {
  name: 'router-link',
  render: function (h) {
    return h('div', this.$slots.default)
  },
  props: ['to']
}

const wrapper = shallow(Component, {
  stubs: {
    RouterLink
  },
})

expect(wrapper.find(RouterLink).props().to).toBe('/best/')
expect(wrapper.find(RouterLink).text()).toBe('best')

We could extract that logic into a component exported by vue-test-utils:

import { RouterLink } from 'vue-test-utils'

const wrapper = shallow(Component, {
  stubs: {
    RouterLink
  },
})

expect(wrapper.find(RouterLink).props().to).toBe('/best/')
expect(wrapper.find(RouterLink).text()).toBe('best')

[sandiya-baranidaran]

Hi,
Thank you for your post.

I have my navMenu.vue.html as Follows:

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <router-link to="/" :exact="false" router-link-active="true" >
                            <span class="fa fa-upload"></span> Upload
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/counter">
                            <span class="fa fa-cog"></span> Admin
                        </router-link>
                    </li>
                </ul>
            </div>

and I would like to test the router-link. As your doesnt mention on how to test specific router at a time. Please could you advise on how to do this.I am using vue-test-utils. I am very new to Jasmine and Karma.Please help.

[lmiller1990]

This seems like a good feature, consider vue has an official router + flux store, the utils should reflect that.

Maybe we can also do something for vuex? I find myself writing a ton of boilerplate for components using a vuex store, might be something we could consider including.