Avoriaz と Sinon.JS で methods のメソッドが呼ばれたことをテストする

このあたりを調べたときのメモ。

  • avoriaz@6.3.0
  • sinon@4.0.0

例えば、こういうコンポーネントがあって、ボタンクリック時のイベントハンドラmethods のメソッドにバインドしているものとする。

<template>
  <div>
    <button @click="onClick">Submit</button>
  </div>
</template>

<script>
export default {
  name: 'AvoriazTest',
  methods: {
    onClick () {
      // ...
    }
  }
}
</script>

で、以下の方法でボタンクリックでメソッドが呼ばれたことをテストする。

import { shallow } from 'avoriaz'
import sinon from 'sinon'
import AvoriazTest from '@/components/AvoriazTest'

describe('AvoriazTest.vue', () => {
  it('calls methods when the button clicked', () => {
    const wrapper = shallow(AvoriazTest)

    const stub = sinon.stub() // スタブを作って
    wrapper.setMethods({ 'onClick': stub }) // setMethods で差し替えて

    wrapper.find('button')[0].trigger('click')
    expect(stub.calledOnce).to.equal(true) // 呼ばれたことを確認する
  })
})
その他

using with vuex · Avoriaz

Vuex の mapActionsmapGetters を使っていて、それらのメソッドが呼ばれたことをテストする方法は Avoriaz の公式ドキュメントに書いてあります。参考になり過ぎる。