前回の続編。用途があるか不明ですが、こんな感じでできそうという話。
filters を差し替える
例えば、こういうコンポーネントがあって、期待する値が出力されるかテストするパターン。ここでは、グローバルフィルターが設定されているものとする。
<template> <div> <span>{{ username | toUpper }}</span> </div> </template> <script> export default { name: 'AvoriazTest', props: [ 'username' ] } </script>
この場合は、単純に Vue.filters
で差し替える。というか、普通にテストを実行するとグローバルフィルターは参照不可のようで、何かしらのスタブは用意する必要がある模様...。ちなみにフィルター自体のテストは別途する前提。
import Vue from 'vue' import { shallow } from 'avoriaz' import AvoriazTest from '@/components/AvoriazTest' Vue.filter('toUpper', (v) => 'TEST') // あらかじめフィルターにスタブをセットしておいて describe('AvoriazTest.vue', () => { it('should render correct contents', () => { const wrapper = shallow(AvoriazTest, { propsData: { username: 'abc' } }) expect(wrapper.find('span')[0].text()).to.equal('TEST') // 期待値が出力されることを確認する }) })
methods のメソッドを差し替える
例えば、レンダリング時に data
で値を返す前に methods
に食わせるパターン。
<template> <div> <span>{{ changedText }}</span> </div> </template> <script> export default { name: 'AvoriazTest', props: [ 'username' ], data () { return { changedText: this.toUpper(this.username) } }, methods: { toUpper (v) { return v.toUpperCase() } } } </script>
最初、前回のような wrapper.setMethods({ 'toUpper': stub })
でできるかと思ったんですが、これでは差し替えられず...。おそらくレンダリング時にはすでに data
の内容が計算済みのためと思われる。
というわけで、今回は shallow
または mount
でラッパーオブジェクトを生成する際に propsData
と同じように methods
を指定してスタブを差し替える。
import { shallow } from 'avoriaz' import AvoriazTest from '@/components/AvoriazTest' describe('AvoriazTest.vue', () => { it('should render correct contents', () => { const stub = (v) => 'TEST' // スタブを用意して const wrapper = shallow(AvoriazTest, { propsData: { username: 'abc' }, methods: { toUpper: stub } }) // ここで差し替える expect(wrapper.find('span')[0].text()).to.equal('TEST') }) })
冒頭に書いた通り、これらの用途があるのか分かりませんが、いろいろいじくりまわしていると勉強になりますね。