WrapperArray

WrapperArray は、Wrapper の配列と Wrapper をテストするメソッドを含むオブジェクトです。

プロパティ

wrappers

array: WrapperArray に含まれる Wrappers

length

number: WrapperArray に含まれる Wrappers の数

## メソッド

at(index)

渡された indexWrapper を返します。ゼロベースの番号付けを使用します(つまり、最初のアイテムはインデックス 0 になります)。

  • 引数:

    • {number} index
  • 戻り値:{Wrapper}

  • 例:

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

const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
const secondDiv = divArray.at(1)
expect(secondDiv.is('p')).toBe(true)

contains(selector)

WrapperArray のすべての Wrapper にセレクタが含まれているか検証します。

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

  • 引数:

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

  • 例:

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

const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
expect(divArray.contains(Bar)).toBe(true)

destroy()

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

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

const wrapper = mount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
divArray.destroy()
expect(divArray.contains('p')).toBe(false)

filter(predicate)

Wrapper オブジェクトを判別する関数を使用して WrapperArray をフィルタリングします。

このメソッドの動作は Array.prototype.filter に似ています。

  • 引数:

    • {function} predicate
  • 戻り値:{WrapperArray}

predicate 関数が true を返す Wrapper インスタンスを含む新しい WrapperArray インスタンスを返します。

  • 例:
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallowMount(Foo)
const filteredDivArray = wrapper.findAll('div')
  .filter(w => !w.hasClass('filtered'))

is(selector)

WrapperArray の全ての Wrapper のDOMノード、もしくはセレクタvm とマッチするか検証します。

  • 引数:

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

  • 例:

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

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

isEmpty()

WrapperArray のすべての Wrapper に子ノードを含んでいないか検証します。

  • 戻り値:{boolean}

  • 例:

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

const wrapper = mount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.isEmpty()).toBe(true)

isVueInstance()

WrapperArray の全ての Wrapper が Vue インスタンスであるか検証します。

  • 戻り値:{boolean}

  • 例:

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

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

setData(data)

WrapperArrayWrapper ごとに Wrappervm データをセットし、強制的に更新します。

すべての Wrapper は Vue インスタンスを含んでいなければならないことに注意してください。

  • 引数:

    • {Object} data
  • 例:

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

const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
barArray.setData({ foo: 'bar' })
expect(barArray.at(0).vm.foo).toBe('bar')

setMethods(methods)

WrapperArrayWrapper ごとに Wrappervm メソッドをセットし、強制的に更新します。

すべての Wrapper は Vue インスタンスを含んでいなければならないことに注意してください。

  • 引数:

    • {Object} methods
  • 例:

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

const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
const clickMethodStub = sinon.stub()

barArray.setMethods({ clickMethod: clickMethodStub })
barArray.at(0).trigger('click')
expect(clickMethodStub.called).toBe(true)

setProps(props)

WrapperArrayWrapper ごとに Wrappervm プロパティをセットし、強制的に更新します。

すべての Wrapper は Vue インスタンスを含んでいなければならないことに注意してください。

  • 引数:

    • {Object} props
  • 例:

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

const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
barArray.setProps({ foo: 'bar' })
expect(barArray.at(0).vm.foo).toBe('bar')

trigger(eventName [, options])

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

すべての Wrapper は Vue インスタンスを含んでいなければならないことに注意してください。

  • 引数:  - {string} eventName必須  - {Object} optionsオプション

  • 例:

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

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

const divArray = wrapper.findAll('div')
divArray.trigger('click')
expect(clickHandler.called).toBe(true)