组件

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 组件的组件。与其异步完成过渡动画不同的是,它会同步返回子组件。

它在 Vue Test Utils 默认配置中用来存根所有的 transition 组件。将 config.stubs.transition 设为 false 可以使用内建的 transition 组件:

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 组件的组件。与其异步完成过渡动画不同的是,它会同步返回子组件。

它在 Vue Test Utils 默认配置中用来存根所有的 transition-group 组件。将 config.stubs['transition-group'] 设为 false 可以使用内建的 transition-group 组件:

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