コンポーネント

vue-test-utils にはコンポーネントをスタブするためのユーティリティコンポーネントがあります。

RouterLinkStub

Vue Router の router-link コンポーネントをスタブするためのコンポーネントです。

レンダリングツリーにある router-link コンポーネントを見つけるためにこのコンポーネントを使用することができます。

  • 使い方:

スタブとしてマウンティングオプションにセットします。

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

const wrapper = mount(Component, {
  stubs: {
    RouterLink: RouterLinkStub
  }
})
expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path')

TransitionStub

transition コンポーネントをスタブするためのコンポーネントです。これはトランジションを非同期で実行する代わりに、子コンポーネントを同期的に返します。

デフォルトではすべての transition コンポーネントは TransitionStub でスタブされます。これは vue-test-utilsconfig で設定されています。スタブせずに既存の transition コンポーネントを使用したい場合は、 config.stubs['transition']false をセットします。:

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

config.stubs.transition = false

transition コンポーネントをスタブするために再びセットするには以下のようにします。

import { config, TransitionStub } from '@vue/test-utils'

config.stubs.transition = TransitionStub

マウンティングオプションでスタブとしてセットするには以下のようにします。

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

mount(Component, {
  stubs: {
    transition: TransitionStub
  }
})

TransitionGroupStub

transition-group コンポーネントをスタブするためのコンポーネントです。これはトランジションを非同期で実行する代わりに、子コンポーネントを同期的に返します。

デフォルトではすべての transition-group コンポーネントは TransitionGroupStub でスタブされます。これは vue-test-utilsconfig で設定されています。スタブせずに既存の transition-group コンポーネントを使用したい場合は、 config.stubs['transition-group']false をセットします。:

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

config.stubs['transition-group'] = false

transition-group コンポーネントをスタブするために再びセットするには以下のようにします。

import { config, TransitionGroupStub } from '@vue/test-utils'

config.stubs['transition-group'] = TransitionGroupStub

マウンティングオプションでスタブとしてセットするには以下のようにします。

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

mount(Component, {
  stubs: {
    'transition-group': TransitionGroupStub
  }
})