You’re browsing the documentation for Vue Test Utils for Vue v2.x and earlier.

To read docs for Vue Test Utils for Vue 3, click here.

Wrapper

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

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

プロパティ

`vm`

Component (読み込み専用)：これは vue のインスタンスです。wrapper.vm を使って vm のプロパティとインスタンスメソッドにアクセスできます。これは、Vue コンポーネントのラッパもしくは Vue コンポーネントをバインディングしている HTMLElement のラッパにのみ存在します。

`element`

HTMLElement (読み込み専用): ラッパのルート DOM

`options`

`options.attachedToDocument`

Boolean (読み込み専用): マウンティングオプションで attachToDocument が true だった場合は 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()

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

戻り値: { [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()

Deprecation warning

emittedByOrder は非推奨となり、将来のリリースで削除される予定です。

代わりに wrapper.emitted を使用してください。

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

戻り値: 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()

Wrapper か WrapperArray が存在するか検証します。

Wrapper か WrapperArray が空だった場合は 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)

Deprecation warning

コンポーネントの検索に find を使用することは非推奨となり、削除される予定です。代わりに findComponent を使用してください。

最初の 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)

Deprecation warning

findAll を使用してコンポーネントを検索することは非推奨となり、削除される予定です。代わりに findAllComponents を使用してください。

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)

findComponent

最初に一致した Vue コンポーネントの Wrapper を返します。

引数:
- {Component|ref|name} selector
戻り値: {Wrapper}
例:

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

const wrapper = mount(Foo)

const bar = wrapper.findComponent(Bar) // => コンポーネントインスタンスによってバーを検索します
expect(bar.exists()).toBe(true)
const barByName = wrapper.findComponent({ name: 'bar' }) // => `name` でバーを検索します
expect(barByName.exists()).toBe(true)
const barRef = wrapper.findComponent({ ref: 'bar' }) // => `ref` でバーを検索します
expect(barRef.exists()).toBe(true)

findAllComponents

一致するすべての Vue コンポーネントの WrapperArray を返します。

引数:
- {Component|ref|name} selector
戻り値: {WrapperArray}
例:

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

const wrapper = mount(Foo)
const bar = wrapper.findAllComponents(Bar).at(0)
expect(bar.exists()).toBeTruthy()
const bars = wrapper.findAllComponents(Bar)
expect(bar).toHaveLength(1)

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)

Deprecation warning

is を使用して、 DOM ノードまたは vm がセレクタに一致することをアサートするのは非推奨となり、削除される予定です。

jest-dom で提供されているようなカスタムマッチャの使用を検討してください。または、 DOM 要素などに対するアサーションには、代わりにネイティブの Element.tagName を使用してください。

テストを維持するためには、以下の置き換えが有効です。

is('DOM_SELECTOR') は wrapper.element.tagName のアサーションです。
is('ATTR_NAME') は真に wrapper.attributes('ATTR_NAME') のアサーションです。
is('CLASS_NAME') は真に wrapper.classes('CLASS_NAME') のアサーションです。

findComponent で使用する場合は、 findComponent(Comp).element で DOM 要素にアクセスします。

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()

Deprecation warning

isVueInstance は非推奨となり、将来のリリースで削除される予定です。

isVueInstance アサーションに依存するテストは、ほとんどまたは全く価値を提供しません。それらを意図のあるアサーションに置き換えることをお勧めします。

テストを維持するために、isVueInstance() を置き換える場合は、 wrapper.find(...).vm のアサーションが有効です。

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

戻り値: {boolean}
例:

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

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

name()

Deprecation warning

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()

Wrapper の vm プロパティの 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')

setChecked

Sets checked value for input element of type checkbox or radio and updates v-model bound data.

Arguments:
- {Boolean} checked (default: true)
Example:

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

test('setChecked demo', async () => {
  const wrapper = mount(Foo)
  const radioInput = wrapper.find('input[type="radio"]')

  await radioInput.setChecked()

  expect(radioInput.element.checked).toBeTruthy()
})

Note:

When you try to set the value to state via v-model by radioInput.element.checked = true; radioInput.trigger('input'), v-model is not triggered. v-model is triggered by change event.

checkboxInput.setChecked(checked) is an alias of the following code.

checkboxInput.element.checked = checked
checkboxInput.trigger('click')
checkboxInput.trigger('change')

setData(data)

Wrapper vm データを設定します。

setData は再帰的に Vue.set を実行することで動作します。

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

引数:
- {Object} data
例:

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

test('setData demo', async () => {
  const wrapper = mount(Foo)

  await wrapper.setData({ foo: 'bar' })

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

setMethods(methods)

Deprecation warning

setMethods は非推奨となり、将来のリリースで削除される予定です。

setMethods を置き換える明確な方法はありません。それは、置き換え前の使われ方に非常に依存しているためです。 setMethods は実装の詳細に依存する不安定なテストに簡単につながるため、お勧めしません。

それらテストを見直すことをお勧めします。

複雑なメソッドをスタブするには、コンポーネントからメソッドを抽出し、単独でテストします。メソッドが呼び出されたことをアサートするには、テストランナーを使用してそれを探ります。

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

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
使用方法:

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

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

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

test('setProps demo', async () => {
  const wrapper = mount(Foo)

  await 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')

setSelected

Selects an option element and updates v-model bound data.

Example:

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

test('setSelected demo', async () => {
  const wrapper = mount(Foo)
  const options = wrapper.find('select').findAll('option')

  await options.at(1).setSelected()

  expect(wrapper.find('option:checked').element.value).toBe('bar')
})

Note:

When you try to set the value to state via v-model by option.element.selected = true; parentSelect.trigger('input'), v-model is not triggered. v-model is triggered by change event.

option.setSelected() is an alias of the following code.

option.element.selected = true
parentSelect.trigger('change')

setValue

Sets value of a text-control input or select element and updates v-model bound data.

Arguments:
- {any} value
Example:

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

test('setValue demo', async () => {
  const wrapper = mount(Foo)

  const textInput = wrapper.find('input[type="text"]')
  await textInput.setValue('some value')

  expect(wrapper.find('input[type="text"]').element.value).toBe('some value')

  const select = wrapper.find('select')
  await select.setValue('option value')

  expect(wrapper.find('select').element.value).toBe('option value')

  // requires <select multiple>
  const multiselect = wrapper.find('select')
  await multiselect.setValue(['value1', 'value3'])

  const selectedOptions = Array.from(multiselect.element.selectedOptions).map(
    o => o.value
  )
  expect(selectedOptions).toEqual(['value1', 'value3'])
})

Note:
- textInput.setValue(value) is an alias of the following code.
```
textInput.element.value = value
textInput.trigger('input')
```
- select.setValue(value) is an alias of the following code.
```
select.element.value = value
select.trigger('change')
```

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'

test('trigger demo', async () => {
  const clickHandler = sinon.stub()
  const wrapper = mount(Foo, {
    propsData: { clickHandler }
  })

  await wrapper.trigger('click')

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

  await wrapper.trigger('click', {
    ctrlKey: true
  })

  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')

← API WrapperArray →

# Wrapper

# プロパティ

# vm

# element

# options

# options.attachedToDocument

# メソッド

# attributes()

# classes()

# contains(selector)

# destroy()

# emitted()

# emittedByOrder()

# exists()

# find(selector)

# findAll(selector)

# findComponent

# findAllComponents

# html()

# is(selector)

# isEmpty()

# isVisible()

# isVueInstance()

# name()

# props()

# setChecked

# setData(data)

# setMethods(methods)

# setProps(props)

# setSelected

# setValue

# text()

# trigger(eventType [, options ])

Wrapper

プロパティ

`vm`

`element`

`options`

`options.attachedToDocument`

メソッド

attributes()

classes()

contains(selector)

destroy()

emitted()

emittedByOrder()

exists()

find(selector)

findAll(selector)

findComponent

findAllComponents

html()

is(selector)

isEmpty()

isVisible()

isVueInstance()

name()

props()

setChecked

setData(data)

setMethods(methods)

setProps(props)

setSelected

setValue

text()

trigger(eventType [, options ])