このあたりを調べたときのメモ。
- 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) // 呼ばれたことを確認する }) })
その他
Vuex の mapActions や mapGetters を使っていて、それらのメソッドが呼ばれたことをテストする方法は Avoriaz の公式ドキュメントに書いてあります。参考になり過ぎる。
