背景
Vue.js本家からは公式のテストライブラリは提供されておらず、非公式でvue-test, avoriaz, vue-testing, revue, vue-unit等が公開されています。それらの中で一番Star数が多いavoriazついて調査した内容をまとめます。
前提
- Karma + Mocha + Chaiを利用する
- 以下のHelloコンポーネントをテスト対象とする
Hello.vue
<template>
<div id="hello">
<img src="http://vuejs.org/images/logo.png">
<h1>{{ msg }}</h1>
<h2 class="subtitle">Essential Links</h2>
<h2>Ecosystem</h2>
<h3>nickname: {{ user.nickname }}</h3>
</div>
</template>
<script>
export default {
name: 'hello',
props: ['user'],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
hello: () => {
return 'world'
}
}
}
</script>
<style scoped>
#hello {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.subtitle {
font-size: 16px;
}
</style>
準備
インストール
$ npm install --save-dev avoriaz
API
mount
- レンダリングされたVueコンポーネントのラッパーオブジェクトを返します。
- 第2引数は任意で、Vue APIに沿った
store,propsDataなどを渡すことが出来ます。
Hello.spec.js
import Hello from '../../src/components/Hello.vue'
import { mount } from 'avoriaz'
describe('Hello.vue', () => {
it('mount', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
})
})
contains
指定のセレクターが含まれているか検証できます。
it('contains', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.contains('img')).to.be.eql(true)
expect(wrapper.contains('h1')).to.be.eql(true)
expect(wrapper.contains('h2')).to.be.eql(true)
})
data
dataは、Vueインスタンスのdataオブジェクトを返します。dataオブジェクト内に、指定の値が入っているか検証できます。
it('data', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
let msg = 'Hello World'
wrapper.setData({msg: msg})
expect(wrapper.find('h1')[0].text()).to.be.eql(msg)
expect(wrapper.data().msg).to.be.eql(msg)
})
find
セレクターで指定したDOMノードかVueコンポーネントの配列が返ります。指定したエレメントが存在するか検証できます。
it('find', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.find('h2').length).to.be.eql(2)
expect(wrapper.find('h2')[0].is('h2')).to.be.eql(true)
})
hasAttribute
指定した属性が存在するか検証できます。
it('hasAttribute', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.hasAttribute('id', 'hello')).to.be.eql(true)
})
instance
Vueコンポーネントのインスタンスオブジェクトを返します。このオブジェクトを通じて、methodsやdataオブジェクトにアクセスできます。
it('instance', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.instance().hello()).to.be.eql('world')
expect(wrapper.instance().msg).to.be.eql('Welcome to Your Vue.js App')
})
isVueComponent
Vueコンポーネントかどうか検証できます。（使うのか・・？）
it('isVueComponent', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.isVueComponent).to.be.eql(true)
})
methods
Vueオブジェクトのメソッドにアクセスできます。
it('methods', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.methods().hello()).to.be.eql('world')
})
但しmethods()を利用すると、以下のWarningが表示されvm経由で呼び出すことが案内されています。
warning: functions returned by methods() will not have this bound to the vue instance. Calling a method that uses this will result in an error. You can access methods by using the vue instance. e.g. to call a method function named aMethod, call wrapper.vm.aMethod(). See https://github.com/eddyerburgh/avoriaz/issues/15
name
コンポーネント名の検証ができます。(使うかな・・・？）
it('name', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.name()).to.be.eql('hello')
})
propsData
propDataのオブジェクトを返します。
it('propsData', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.propsData().user.nickname).to.be.eql('John')
})
但しpropsData()を利用すると、以下のWarningが表示されvm経由で呼び出すことが案内されています。
warning: functions returned by propsData() will not have this bound to the vue instance. Calling a propsData function that uses this will result in an error. You can access propsData functions by using the vue instance. e.g. to call a method function named propsDataFunc, call wrapper.vm.$props.propsDataFunc(). See https://github.com/eddyerburgh/avoriaz/issues/15
text
指定オブジェクトの文字列を返します。
it('text', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.find('h1')[0].text()).to.be.eql('Welcome to Your Vue.js App')
})
vm
vmプロパティは、Vueコンポーネントのオブジェクトを保持しています。それを通じて、data、methodsオブジェクトなどにアクセスできます。
it('vm', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.vm.user.nickname).to.be.eql('John')
})
shallow
全ての子コンポーネントをスタブして、レンダリングしたラッパーオブジェクトを返します。子コンポーネントは <!----> というコメントアウト文字列に置換されます。
describe('shallow', () => {
const wrapper = shallow(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
expect(wrapper.isVueComponent).to.be.eql(true)
})
selectors
多数のavoriazメソッドは、セレクターを引数に取ります。
タグセレクター
HTMLタグで指定します。またタグ指定はjQueryのように、子孫要素や子要素指定も可能です。
it('tag selectors', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
// タグを指定する
const div = wrapper.find('div')[0]
expect(div.is('div')).to.be.eql(true)
// 子孫要素指定
const img1 = wrapper.find('div img')[0]
expect(img1.is('img')).to.be.eql(true)
// 子要素指定
const img2 = wrapper.find('div > img')[0]
expect(img2.is('img')).to.be.eql(true)
})
idセレクター
id属性値で指定できます。
it('id selectors', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
const hello = wrapper.find('#hello')[0]
expect(hello.is('div')).to.be.eql(true)
})
classセレクター
class属性値で指定できます。
it('class selectors', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
const subtitle = wrapper.find('.subtitle')[0]
expect(subtitle.is('h2')).to.be.eql(true)
})
属性セレクター
jQuery同様に[]内に属性と値をイコールで挟んで記述することで、属性指定できます。
it('attribute selectors', () => {
const wrapper = mount(Hello, {
propsData: {
user: {nickname: 'John'}
}
})
const src1 = wrapper.find('[src]')[0]
expect(src1.is('img')).to.be.eql(true)
const src2 = wrapper.find('[src="http://vuejs.org/images/logo.png"]')[0]
expect(src2.is('img')).to.be.eql(true)
// ダブルコーテーション囲みでも問題ない
const src3 = wrapper.find("[src='http://vuejs.org/images/logo.png']")[0]
expect(src3.is('img')).to.be.eql(true)
})
まとめ
avoriazはドキュメント、サンプルコード共に充実しており、APIもとてもシンプルでした。Karma + Mocha, Karma + Jasmineなど各種テストライブラリの組み合わせのサンプルコードも公開されており、最初の導入の敷居はとても低い印象です。avoriazのようなフレームワーク専用のテストライブラリを利用することで、テストコードが書きやすくなので、コンポーネントのユニットテストを導入したい場合には利用すべきだと思いました。