Vue-Routerと単体テスト

Lachlan Miller
Aug 28, 2017 · 5 min read

ほとんどのウェッブアプリにルータがあります。なので、ルータのテストは不可欠です。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

)

    Lachlan Miller

    Written by

    I write about frontend, Vue.js, and TDD. You can reach me on @lmiller1990 on Github.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade