Composition API で @vue/test-utils 使ってみた
これまでの経緯
jest で Unit Test 描けるようになった。
次のステップ行ってみよう。
「「 Component Test だ！」」
環境とか
- Jest
- Vue.js Composition API
環境を整える
必要なものを import する。
import { createLocalVue, shallowMount } from '@vue/test-utils'
import VueCompositionApi from '@vue/composition-api'
import CalendarTemperatureDefaultNode from '@/component/page/customers/show/tabs/covid_19_measures/temperature/components/calendar-temperature-default-node.vue'
const localVue = createLocalVue()
localVue.use(VueCompositionApi)
createLocalVue はいわゆる new Vue みたいなことをしている。
const localVue = createLocalVue()
であとは
localVue.use(VueCompositionApi)
で Composition API を use に登録したりなど。
ちなみに Carely ( iCARE が開発するサービス ) では buefy を利用していて
import Buefy from 'buefy'
// ...
localVue.use(Buefy)
のように改めて use に登録しなきゃなので注意。
スナップショットテスト
スナップショットが一致するかどうかのテスト。
テストしたいコンポーネント
下のようなテストコンポーネントを用意した。
<template>
<div class="justify-content-center">
<div>hoge</div>
</div>
</template>
テストしたいコンポーネントをマウントする
describe , it, expect の使い方は割愛( まずは Unit Test で使いながら学ぶべし )
shallowMount でテストしたいコンポーネントでマウントする。
toMatchSnapshot でスナップショットテストを実行。
import { createLocalVue, shallowMount } from '@vue/test-utils'
import VueCompositionApi from '@vue/composition-api'
import TestNode from '@/component/test-node.vue'
const localVue = createLocalVue()
localVue.use(VueCompositionApi)
describe('TestNode.vue', () => {
it('スナップショットテスト', () => {
const wrapper = shallowMount(TestNode, {
localVue,
})
expect(wrapper.html()).toMatchSnapshot()
})
})
スナップショットは下記のように作られてるはず。
__snapshots__/test-node.spec.ts.snap
innerText テスト
任意の DOM に値が入っているかのテストする。
describe を次のように書き加えてみる。
describe('TestNode.vue', () => {
it('DOM が正しく作られていること', () => {
const wrapper = shallowMount(CalendarTemperatureDefaultNode, {
localVue,
})
expect(wrapper.find('.justify-content-center div').text()).toEqual('hoge')
expect(wrapper.html()).toMatchSnapshot()
})
})
})
.find で要素を探索。探索結果の DOM の中の値を text() で書き出している。
.toEqual の通りの値が渡っているかテスト。
.find 意外にも wrapper は色々あるので 公式 Doc を読むべし。
props で値を与えてみる
props 付きのコンポーネントもテストしてみる。
<template>
<div class="justify-content-center">
<div>{{ data }}</div>
</div>
</template>
import { defineComponent, PropType } from '@vue/composition-api'
export default defineComponent({
name: 'TestNode',
props: {
data: {
type: String,
required: true,
},
} as const,
})
再び discribe を書き換えてみる
describe('TestNote.vue', () => {
it('DOM が正しく作られていること', () => {
const wrapper = shallowMount(CalendarTemperatureDefaultNode, {
localVue,
propsData: {
data: 'hogehoge',
},
})
expect(wrapper.find('.justify-content-center div').text()).toEqual('hogeho')
expect(wrapper.html()).toMatchSnapshot()
})
})
propsData でテスト props を与えている。
Next Stage
click で Component Test したい。
感想
作るのが大変。
いくらでもテスト作れてしまいそう。
UT は作れるだけ作ったもん勝ちなところがある。
Component Test は、どのパターンはテストしてどのパターンはテストしないと考えないといけない。難しい。
テスト作るのも難しい。
テストのピラミッドを開発者と一緒に眺めてみよう！ | DevelopersIO
Discussion