Wrapper

vue-test-utils はラッパベースの API です。

Wrapper は、マウントされたコンポーネントと仮想 DOM 、またはコンポーネントと仮想 DOM をテストするメソッドを含むオブジェクトです。

プロパティ

vm

Component:これは vue のインスタンスです。wrapper.vm を使って vm のプロパティとインスタンスメソッドにアクセスできます。これは、Vue コンポーネントラッパにのみ存在します。

element

HTMLElement: ラッパのルート DOM

options

options.attachedToDocument

Boolean: マウンティングオプションで attachedToDocumenttrue だった場合は True です。

options.sync

Boolean: マウンティングオプションで syncfalse ではなかった場合は True です。

メソッド

attributes()

Wrapper にラップされている要素の属性をオブジェクトで返します。

  • 戻り値:{[attribute: string]: any}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.attributes().id).toBe('foo')

classes()

Wrapper にラップされている要素の class 名を配列で返します。

  • 戻り値:Array<{string}>

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.classes()).toContain('bar')

contains(selector)

Wrapper に要素、もしくはセレクタで指定したコンポーネントを含んでいるか検証します。

  • 引数:

    • {string|Component} selector
  • 戻り値:{boolean}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Foo)
expect(wrapper.contains('p')).toBe(true)
expect(wrapper.contains(Bar)).toBe(true)

destroy()

Vue コンポーネントインスタンスを破棄します。

  • 例:
import { mount } from '@vue/test-utils'
import sinon from 'sinon'

const spy = sinon.stub()
mount({
  render: null,
  destroyed () {
    spy()
  }
}).destroy()
expect(spy.calledOnce).toBe(true)

emitted()

Wrappervm によって生成されたカスタムイベントを含むオブジェクトを返します。

  • 戻り値:{ [name: string]: Array<Array<any>> }

  • 例:

import { mount } from '@vue/test-utils'

const wrapper = mount(Component)

wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)

/*
wrapper.emitted() は次のオブジェクトを返します:
{
  foo: [[], [123]]
}
*/

// イベントが発行されたか検証します
expect(wrapper.emitted().foo).toBeTruthy()

// イベントの数を検証します
expect(wrapper.emitted().foo.length).toBe(2)

// イベントのペイロードを検証します
expect(wrapper.emitted().foo[1]).toBe([123])

別の構文があります。

// イベントが発行されたか検証します
expect(wrapper.emitted('foo')).toBeTruthy()

// イベントの数を検証します
expect(wrapper.emitted('foo').length).toBe(2)

// イベントのペイロードを検証します
expect(wrapper.emitted('foo')[1]).toEqual([123])

.emitted() メソッドは呼ばれる度、新しいオブジェクトではなく同じオブジェクトを返します。イベントが発生すると、そのオブジェクトは更新します。

const emitted = wrapper.emitted()

expect(emitted.foo.length).toBe(1)

// `wrapper` が foo イベントを emit する何らかの処理したとします。

expect(emitted.foo.length).toBe(2)

emittedByOrder()

Wrappervm によって生成されたカスタムイベントを含む配列を返します。

  • 戻り値:Array<{ name: string, args: Array<any> }>

  • 例:

import { mount } from '@vue/test-utils'

const wrapper = mount(Component)

wrapper.vm.$emit('foo')
wrapper.vm.$emit('bar', 123)

/*
wrapper.emittedByOrder() は次の配列を返します
[
  { name: 'foo', args: [] },
  { name: 'bar', args: [123] }
]
*/

// イベントの発行順序を検証します
expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar'])

exists()

WrapperWrapperArray が存在するか検証します。

WrapperWrapperArray が空だった場合は false を返します。

  • 戻り値:{boolean}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.exists()).toBe(true)
expect(wrapper.find('does-not-exist').exists()).toBe(false)
expect(wrapper.findAll('div').exists()).toBe(true)
expect(wrapper.findAll('does-not-exist').exists()).toBe(false)

find(selector)

最初の DOM ノードの Wrapper、またはセレクタで一致した Vue コンポーネントを返します。

有効なセレクタを使用してください。

  • 引数:

    • {string|Component} selector
  • 戻り値:{Wrapper}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Foo)

const div = wrapper.find('div')
expect(div.is('div')).toBe(true)

const bar = wrapper.find(Bar)
expect(bar.is(Bar)).toBe(true)

const barByName = wrapper.find({ name: 'bar' })
expect(barByName.is(Bar)).toBe(true)

const fooRef = wrapper.find({ ref: 'foo' })
expect(fooRef.is(Foo)).toBe(true)

findAll(selector)

WrapperArrayを返します。

有効なセレクタを使用してください。

  • 引数:

    • {string|Component} selector
  • 戻り値:{WrapperArray}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Foo)
const div = wrapper.findAll('div').at(0)
expect(div.is('div')).toBe(true)
const bar = wrapper.findAll(Bar).at(0)
expect(bar.is(Bar)).toBe(true)

html()

Wrapper DOM ノードの HTML を文字列として返します。

  • 戻り値:{string}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.html()).toBe('<div><p>Foo</p></div>')

is(selector)

Wrapper DOM ノード、または vmセレクタと一致しているか検証します。

  • 引数:

    • {string|Component} selector
  • 戻り値:{boolean}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.is('div')).toBe(true)

isEmpty()

Wrapper が子ノードを含んでいないか検証します。

  • 戻り値:{boolean}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.isEmpty()).toBe(true)

isVisible()

Wrapper が表示されているかアサートします。

style が display: none か visibility: hidden の親要素がある場合、 false を返します。

コンポーネントが v-show によって非表示になっているかアサートすることに使用することができます。

  • 戻り値:{boolean}

  • 例:

import { mount } from 'vue-test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.isVisible()).toBe(true)
expect(wrapper.find('.is-not-visible').isVisible()).toBe(false)

isVueInstance()

Wrapper が Vue インスタンスか検証します。

  • 戻り値:{boolean}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.isVueInstance()).toBe(true)

name()

Wrapper に Vue インスタンスが含まれている場合はコンポーネント名を返し、そうでない場合は Wrapper DOM ノードのタグ名を返します。

  • 戻り値:{string}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.name()).toBe('Foo')
const p = wrapper.find('p')
expect(p.name()).toBe('p')

props()

Wrappervm プロパティの props オブジェクトを返します。

Wrapper には Vue インスタンスを含む必要があることに注意してください

  • 戻り値:{[prop: string]: any}

  • 例:

import { mount } from '@vue/test-utils'
import { expect } from 'chai'
import Foo from './Foo.vue'

const wrapper = mount(Foo, {
  propsData: {
    bar: 'baz'
  }
})
expect(wrapper.props().bar).toBe('baz')

setData(data)

Wrappervm データを設定し、更新を強制します。

Wrapper には Vue インスタンスを含む必要があることに注意してください

  • 引数:

    • {Object} data
  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
wrapper.setData({ foo: 'bar' })
expect(wrapper.vm.foo).toBe('bar')

setMethods(methods)

Wrappervm メソッドを設定し、更新を強制します。

Wrapper には Vue インスタンスを含む必要があることに注意してください

  • 引数:

    • {Object} methods
  • 例:

import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
const clickMethodStub = sinon.stub()

wrapper.setMethods({ clickMethod: clickMethodStub })
wrapper.find('button').trigger('click')
expect(clickMethodStub.called).toBe(true)

setProps(props)

  • 引数:

    • {Object} props
  • 使用方法:

Wrappervm プロパティを設定し更新を強制します。

Wrapper には Vue インスタンスを含む必要があることに注意してください

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
wrapper.setProps({ foo: 'bar' })
expect(wrapper.vm.foo).toBe('bar')

渡された値で Vue インスタンス を初期化する propsData オブジェクトを渡すことができます。

// Foo.vue
export default {
  props: {
    foo: {
      type: String,
      required: true
    }
  }
}
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo, {
  propsData: {
    foo: 'bar'
  }
})

expect(wrapper.vm.foo).toBe('bar')

text()

Wrapper のテキスト内容を返します。

  • 戻り値:{string}

  • 例:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.text()).toBe('bar')

trigger(eventType [, options ])

Wrapper DOM ノードのイベントを発火します。

Triggerは options オブジェクト形式で行います。options オブジェクトのプロパティがイベントに追加されます。

  • 引数:

    • {string} eventName必須
    • {Object} optionsオプション
  • 例:

import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import Foo from './Foo'

const clickHandler = sinon.stub()
const wrapper = mount(Foo, {
  propsData: { clickHandler }
})

wrapper.trigger('click')

wrapper.trigger('click', {
  button: 0
})

expect(clickHandler.called).toBe(true)
  • イベントターゲットの設定:

trigger は Event オブジェクトを生成して、Wrapper.element にイベントを送ります。
Event オブジェクトの target 値を編集できません。つまり、 target を オプションオブジェクトにセットすることはできません。
target の属性を追加するには、 trigger を実行する前に Wrapper.element の属性にその値をセットする必要があります。

const input = wrapper.find('input')
input.element.value = 100
input.trigger('click')