vue-router を利用している component をテストしたい

普通の component のとき

vue-router を使っていない component のテストは、vue-templates/webpack が参考になります。

import Vue from 'vue'
import Hello from 'src/components/Hello'

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const vm = new Vue({
      template: '<div><hello></hello></div>',
      components: { Hello }
    }).$mount()
    expect(vm.$el.querySelector('.hello h1').textContent).to.contain('Hello World!')
  })
})

vue-rotuer を使っているとき

上の例では vue-router を利用していないため、component の中で v-link 等を使っていると、うまく動作しません。

そこで、上の例を参考に、vue-router を利用できるようにしてみました。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Hello from 'src/components/Hello'

Vue.use(VueRouter)

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const App = Vue.extend({
      template: '<div><router-view></router-view></div>',
    })
    const router = VueRouter({ abstract: true })
    router.map({ '/': { component: Hello } })
    router.start(App, document.createElement('div'))
    counst vm = router.app

    expect(vm.$el.querySelector('.hello h1').textContent).to.contain('Hello World!')
  })
})