WrapperArray

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

プロパティ

wrappers

array (読み込み専用): WrapperArray に含まれる Wrappers

length

number (読み込み専用): WrapperArray に含まれる Wrappers の数

メソッド

at(index)

渡された index の Wrapper を返します。ゼロベースの番号付けを使用します(つまり、最初のアイテムはインデックス 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.classes('filtered'))

is(selector)

Deprecation warning

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

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

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

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

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

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

Deprecation warning

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

jest-dom で提供されているようなカスタムマッチャの使用を検討してください。

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

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

Deprecation warning

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

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

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

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)

setChecked(checked)

このメソッドは以下のコードのエイリアスです。

wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked))

• 引数:

  • {Boolean} checked (デフォルト: true)

• 例:

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

test('setChecked demo', async () => {
  const wrapper = mount({
    data() {
      return {
        t1: false,
        t2: ''
      }
    },
    template: `
      <div>
        <input type="checkbox" name="t1" class="foo" v-model="t1" />
        <input type="radio" name="t2" class="foo" value="foo" v-model="t2"/>
        <input type="radio" name="t2" class="bar" value="bar" v-model="t2"/>
      </div>`
  })

  const wrapperArray = wrapper.findAll('.foo')
  expect(wrapper.vm.t1).toEqual(false)
  expect(wrapper.vm.t2).toEqual('')
  await wrapperArray.setChecked()
  expect(wrapper.vm.t1).toEqual(true)
  expect(wrapper.vm.t2).toEqual('foo')
})

setData(data)

WrapperArray の Wrapper ごとに Wrapper に vm データをセットします。

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

• 引数:

  • {Object} data

• 例:

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

test('setData demo', async () => {
  const wrapper = mount(Foo)
  const barArray = wrapper.findAll(Bar)
  await barArray.setData({ foo: 'bar' })
  expect(barArray.at(0).vm.foo).toBe('bar')
})

setMethods(methods)

Deprecation warning

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

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

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

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

WrapperArray の Wrapper ごとに Wrapper に vm メソッドをセットし、強制的に更新します。

すべての 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)

WrapperArray の Wrapper ごとに Wrapper に vm プロパティをセットし、強制的に更新します。

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

• 引数:

  • {Object} props

• 例:

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

test('setProps demo', async () => {
  const wrapper = mount(Foo)
  const barArray = wrapper.findAll(Bar)
  await barArray.setProps({ foo: 'bar' })
  expect(barArray.at(0).vm.foo).toBe('bar')
})

setValue(value)

このメソッドは以下のコードのエイリアスです。

wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value))

• 引数:

  • {any} value

• 例:

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

const wrapper = mount({
  data() {
    return {
      t1: '',
      t2: ''
    }
  },
  template: `
    <div>
      <input type="text" name="t1" class="foo" v-model="t1" />
      <input type="text" name="t2" class="foo" v-model="t2"/>
    </div>`
})

test('setValue demo', async () => {
  const wrapperArray = wrapper.findAll('.foo')
  expect(wrapper.vm.t1).toEqual('')
  expect(wrapper.vm.t2).toEqual('')
  await wrapperArray.setValue('foo')
  expect(wrapper.vm.t1).toEqual('foo')
  expect(wrapper.vm.t2).toEqual('foo')
})

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'

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

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