Vue Routerの単体テストについて

ほとんどのウェッブアプリにルータがあります。なので、ルータのテストは不可欠です。Jest、AvoriazでVueアプリのルータの単体テストが簡単に書けます。ソースコードはこちらです。この前の投稿で作ったテンプートから始めます。最初は、vue-router、avoriaz をインストールします。yarn add vue-router avoriaz --save次に、以下のファイルを作成します。client/Home.vue

<template>
  <div>
    Home
    <router-view></router-view> 
 </div>
</template>

<script>
  export default {
    name: 'Home'
  }
</script>

<style scoped>
</style>

client/User.vue

<template>
  <div>
    {{ $route.params.user }}
  </div>
</template>

<script>
  export default {
    name: 'User'
  }
</script>

<style scoped>
</style>

client/router.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import User from './User.vue'
import Home from './Home.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          name: 'user',
          path: '/:user',
          component: User
        }
      ]
    }
  ]
})

export default router

client/App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
    name: 'App'
  }
</script>

<style scoped>
</style>

client/index.js

import Vue from 'vue'

import App from './App'
import router from './router'

new Vue({
  el: '#app',
  render: h => h(App),
  router: router,
  template: '<App />',
  components: { App  }
})

User.vueの {{ $route.params.user }}をテストしたいです。/#/Lily　というルートにアクセスしたら、Lilyが表示されるはずです。二つの取り組みかたを教えます。一つ目は、ルータをモックします。もう一つは、本当のルータを使います。モックルータ

// UserMockRouter.test.js
import Vue from 'vue'
import {mount} from 'avoriaz'

import User from './User.vue'

describe('User.vue', () => {
  it('should display the $route.user using a mocked route', () => {
    expect.assertions(1)

  const $route = { params: { user: 'Lily' }}

  const wrapper = mount(User, { globals: { $route } })

  expect(wrapper.text().trim()).toBe('Lily')
  })
})

ルータを使わずに、$routeという変数でモックします。本当のルータでテストしたい場合もあります。その場合は、このように書きます。

import Vue from 'vue'
import {mount} from 'avoriaz'
import VueRouter from 'vue-router'

import User from './User.vue'

test('should display the $route.user using a a real router', () => {
  expect.assertions(1)

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
      {
        name: 'user',
        path: '/:user',
        component: User
      }
    ]
  })

router.push({ name: 'user', params: { user: 'lachlan' } })

const wrapper = mount(User, { router })
  wrapper.update()

expect(wrapper.text().trim()).toBe('lachlan')
})

本当のルータを使いますが、必要な部分だけを定義します。wrapper.update()を呼び出すと、Vue.nextTick()も呼びされて、コンポーネントはまたレンダーします。ソースコード: https://github.com/lmiller1990/vue-webpack-jest-express/tree/mock-router

Vue Routerの単体テストについて

ミラーロッキー