Vue.js~jestを使ってのテスト~

15682 ワード
Vue.js JavaScript Jest JavaScript テキストリンク

はじめに

なかなかできなくてやっと簡単なテストならできたので
忘れないうちにメモ
間違いがあったらご指摘いただけると嬉しいです。

テスト対象

<template>
  <div>
    <p>{{num}}</p>
    <button class="increment__button" @click="increment">足す</button>
    <button class="decrement__button" @click="decrement">引く</button>
    <button class="reset__button" @click="reset">リセット</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    increment() {
      return this.num++;
    },
    decrement() {
      if(this.num <= 0) return
      return this.num--;
    },
    reset() {
      return (this.num = 0);
    },
  },
};
</script>

ボタンをクリックで数字を足したり、引いたり
ただそれだけの物。

そしてこれをテストしてみる

テストコード

import Test1 from '../../src/components/test1'
import {mount} from '@vue/test-utils'

const wrapper = mount(Test1)
const vm = wrapper.vm
describe('test1', () => {
  it('初期値は0？', () => {
    expect(wrapper.html()).toContain('<p>0</p>')
  })
  it('buttonがあるか？', () => {
    expect(wrapper.contains('button')).toBe(true)
  })
})

describe('test2', () => {
  it('increment', () => {
    const button = wrapper.find('.increment__button')
    expect(vm.num).toBe(0)
    button.trigger('click')
    expect(vm.num).toBe(1)
    button.trigger('click')
    expect(vm.num).toBe(2)
  })
  it('decrement', () => {
    vm.num = 1
    const button = wrapper.find('.decrement__button')
    button.trigger('click')
    expect(vm.num).toBe(0)
    button.trigger('click')
    expect(vm.num).toBe(0)
  })
  it('reset', () => {
    vm.num = 5
    const button = wrapper.find('.reset__button')
    expect(vm.num).toBe(5)
    button.trigger('click')
    expect(vm.num).toBe(0)
  })
})

まず始めにテスト対象のコンポーネントをmount()の引数に入れて
それをwrapperとして色々するみたい

コンポーネントから取得

const button = wrapper.find('.increment__button')

これはTest1コンポーネント内のclass="increment__button"を取得
JavaScriptのdocument.getElementById()みたいな感じ？
そして今回のだとclickイベントが各ボタンにあるので、それをtrigger()を使う事で実行できる

button.trigger('click')

dataの取得

wrapper.vm.num//0
wrapper.vm.num = 10
wrapper.vm.num//10

これでコンポーネントのdataのnumの値を取得
代入もできる

以上を踏まえてもう一度確認

const button = wrapper.find('.increment__button')
    expect(vm.num).toBe(0)
    button.trigger('click')
    expect(vm.num).toBe(1)
    button.trigger('click')
    expect(vm.num).toBe(2)

最初の結果はなにもしてないので(0)
次にclickイベントが実行されるのでインクリメントされた結果が(1)
となる。
残り二つのボタンもやってることはほぼ同じ
今わかってるのはここまで。

Vuex使用時とかのテストをできなきゃなぁ。。。

インタフェースの継承と継承を区別する-契約34
C++オブジェクトクラス向けインスタンステーマ9