🍑

Composition API で @vue/test-utils 使ってみた

4 min read

これまでの経緯

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 を読むべし。

Wrapper | Vue Test Utils

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

ログインするとコメントできます