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.

API

mount()

参数：
- {Component} component
- {Object} options
返回值： {Wrapper}
选项：

用法：

创建一个包含被挂载和渲染的 Vue 组件的 Wrapper。

Without options:

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo)
    expect(wrapper.contains('div')).toBe(true)
  })
})

使用 Vue 选项：

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.props().color).toBe('red')
  })
})

固定在 DOM 上：

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

describe('Foo', () => {
  it('renders a div', () => {
    const div = document.createElement('div')
    document.body.appendChild(div)
    const wrapper = mount(Foo, {
      attachTo: div
    })
    expect(wrapper.contains('div')).toBe(true)
    wrapper.destroy()
  })
})

默认插槽和具名插槽：

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // 将匹配 `<slot name="FooBar" />`。
        foo: '<div />'
      }
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

将全局属性存根：

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

describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = mount(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.vm.$route.path).toBe($route.path)
  })
})

将组件存根：

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      stubs: {
        BarFoo: true,
        FooBar: Faz,
        Bar: { template: '<div class="stubbed" />' }
      }
    })
    expect(wrapper.contains('.stubbed')).toBe(true)
    expect(wrapper.contains(Bar)).toBe(true)
  })
})

废弃通知：

当对组件存根时，提供一个字符串的方式 (ComponentToStub: '<div class="stubbed" />) 已经不再被支持。

延伸阅读：Wrapper

shallowMount()

参数：
- {Component} component
- {Object} options
  - {HTMLElement|string} string
  - {boolean} attachToDocument
  - {Object} context
    - {Array<Component|Object>|Component} children
  - {Object} slots
    - {Array<Component|Object>|Component|String} default
    - {Array<Component|Object>|Component|String} named
  - {Object} mocks
  - {Object|Array<string>} stubs
  - {Vue} localVue
返回值：{Wrapper}
选项：

移步选项

用法：

和 mount 一样，创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，不同的是被存根的子组件。

无选项：

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = shallowMount(Foo)
    expect(wrapper.contains('div')).toBe(true)
  })
})

使用 Vue 选项：

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = shallowMount(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.props().color).toBe('red')
  })
})

固定在 DOM 上：

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

describe('Foo', () => {
  it('renders a div', () => {
    const div = document.createElement('div')
    document.body.appendChild(div)
    const wrapper = shallowMount(Foo, {
      attachTo: div
    })
    expect(wrapper.contains('div')).toBe(true)
    wrapper.destroy()
  })
})

默认插槽和具名插槽：

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = shallowMount(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Will match <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

将全局属性存根：

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

describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = shallowMount(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.vm.$route.path).toBe($route.path)
  })
})

render()

参数：
- {Component} component
- {Object} options
  - {Object} context
    - {Array<Component|Object>|Component} children
  - {Object} slots
    - {Array<Component|Object>|Component|String} default
    - {Array<Component|Object>|Component|String} named
  - {Object} mocks
  - {Object|Array<string>} stubs
  - {Vue} localVue
返回值： {Promise<CheerioWrapper>}
选项：

查阅挂载选项

使用：

将一个对象渲染成为一个字符串并返回一个 cheerio 包裹器。

Cheerio 是一个类似 jQuery 的库，可以在 Node.js 中游览 DOM 对象。它的 API 和 Vue Test Utils 的 Wrapper 类似。

render 在底层使用 vue-server-renderer 将一个组件渲染为静态的 HTML。

render 被包含在了 @vue/server-test-utils 包之中。

不带选项：

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

describe('Foo', () => {
  it('renders a div', async () => {
    const wrapper = await render(Foo)
    expect(wrapper.html()).toContain('<div></div>')
  })
})

带 Vue 选项：

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

describe('Foo', () => {
  it('renders a div', async () => {
    const wrapper = await render(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.html()).toContain('red')
  })
})

默认插槽和具名插槽：

import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const wrapper = await render(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Will match <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(wrapper.html()).toContain('<div></div>')
  })
})

全局属性存根：

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

describe('Foo', () => {
  it('renders a div', async () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = await render(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.html()).toContain($route.path)
  })
})

renderToString()

参数：
- {Component} component
- {Object} options
  - {Object} context
    - {Array<Component|Object>|Component} children
  - {Object} slots
    - {Array<Component|Object>|Component|String} default
    - {Array<Component|Object>|Component|String} named
  - {Object} mocks
  - {Object|Array<string>} stubs
  - {Vue} localVue
返回值： {Promise<string>}
选项：

查阅挂载选项

使用：

将一个组件渲染为 HTML。

renderToString 在底层使用 vue-server-renderer 将一个组件渲染为 HTML。

不带选项：

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

describe('Foo', () => {
  it('renders a div', async () => {
    const str = await renderToString(Foo)
    expect(str).toContain('<div></div>')
  })
})

带 Vue 选项：

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

describe('Foo', () => {
  it('renders a div', async () => {
    const str = await renderToString(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(str).toContain('red')
  })
})

默认插槽和具名插槽：

import { renderToString } from '@vue/server-test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const str = await renderToString(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Will match <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(str).toContain('<div></div>')
  })
})

全局属性存根：

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

describe('Foo', () => {
  it('renders a div', async () => {
    const $route = { path: 'http://www.example-path.com' }
    const str = await renderToString(Foo, {
      mocks: {
        $route
      }
    })
    expect(str).toContain($route.path)
  })
})

选择器

很多方法的参数中都包含选择器。一个选择器可以是一个 CSS 选择器、一个 Vue 组件或是一个查找选项对象。

CSS 选择器

挂载处理任何有效的 CSS 选择器：

标签选择器 (div、foo、bar)
类选择器 (.foo、.bar)
特性选择器 ([foo]、[foo="bar"])
id 选择器 (#foo、#bar)
伪选择器 (div:first-of-type)

你也可以结合使用：

直接从属结合 (div > #bar > .foo)
一般从属结合 (div #bar .foo)
近邻兄弟选择器 (div + .foo)
一般兄弟选择器 (div ~ .foo)

Vue 组件

Vue 组件也是有效的选择器。

// Foo.vue

export default {
  name: 'FooComponent'
}

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

const wrapper = shallowMount(Foo)
expect(wrapper.is(Foo)).toBe(true)

查找选项对象

Name

Vue Test Utils 允许通过一个查找选项对象在组件包裹器上根据一个组件的 name 选择元素。

const buttonWrapper = wrapper.find({ name: 'my-button' })
buttonWrapper.trigger('click')

Ref

Vue Test Utils 允许通过一个查找选项对象在组件包裹器上根据 $ref 选择元素。

const buttonWrapper = wrapper.find({ ref: 'myButton' })
buttonWrapper.trigger('click')

createLocalVue()

参数：
- {Object} options
  - {Function} errorHandler
返回值：
- {Component}
用法：

createLocalVue 返回一个 Vue 的类供你添加组件、混入和安装插件而不会污染全局的 Vue 类。

在组件渲染功能和观察者期间，errorHandler选项可用于处理未捕获的错误。

可通过 options.localVue 来使用：

Without options:

import { createLocalVue, shallowMount } from '@vue/test-utils'
import MyPlugin from 'my-plugin'
import Foo from './Foo.vue'

const localVue = createLocalVue()
localVue.use(MyPlugin)
const wrapper = shallowMount(Foo, {
  localVue,
  mocks: { foo: true }
})
expect(wrapper.vm.foo).toBe(true)

const freshWrapper = shallowMount(Foo)
expect(freshWrapper.vm.foo).toBe(false)

使用errorHandler选项:

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

const errorHandler = (err, vm, info) => {
  expect(err).toBeInstanceOf(Error)
}

const localVue = createLocalVue({
  errorHandler
})

// Foo在生命周期挂钩中引发错误
const wrapper = shallowMount(Foo, {
  localVue
})

延伸阅读：常用技巧

createWrapper(node [, options])

参数：
- {vm|HTMLElement} node
- {Object} options
  - {Boolean} attachedToDocument
返回值：
- {Wrapper}
用法：

createWrapper 为一个被挂载的 Vue 实例或一个 HTML 元素创建一个 Wrapper。

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

const Constructor = Vue.extend(Foo)
const vm = new Constructor().$mount()
const wrapper = createWrapper(vm)
expect(wrapper.vm.foo).toBe(true)

配置

Vue Test Utils 包含了一个定义其选项的配置对象。

Vue Test Utils 配置选项

`showDeprecationWarnings`

类型：Boolean
默认值：true

控制是否展示废弃警告。当设置为 true 时，所有的废弃警告都将会在控制台中打印出来。

示例：

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

config.showDeprecationWarnings = false

`stubs`

类型：{ [name: string]: Component | boolean | string }
默认值：{}

存储在 config.stubs 中的存根会被默认使用。用到的组件存根。它们会被传入挂载选项的 stubs 覆写。

当把 stubs 作为一个数组传入挂载选项时，config.stubs 会被转换为一个数组，然后用只返回一个 <${component name}-stub> 的基础组件进行存根。

示例：

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

config.stubs['my-component'] = '<div />'

`mocks`

类型：Object
默认值：{}

默认使用传递给 config.mocks 的值，类似 stubs。传递给挂载选项中 mocks 对象的任何值都会优先于 config.mocks 中的同名声明。

示例：

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

config.mocks['$store'] = {
  state: {
    id: 1
  }
}

`methods`

类型：{ [name: string]: Function }
默认值：{}

你可以使用 config 对象配置默认的方法。它可以用于为组件注入方法的插件，例如 VeeValidate。你可以通过在挂载选项中传入 methods 来覆写 config 中的方法集合。

示例：

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

config.methods['getData'] = () => {}

`provide`

类型：Object
默认值：{}

默认使用传递给 config.provide 的值，类似 stubs 或 mocks。传递给挂载选项中 provide 对象的任何值都会优先于 config.provide 中的同名声明。请注意这里不支持将函数传递给 config.provide。

示例：

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

config.provide['$logger'] = {
  log: (...args) => {
    console.log(...args)
  }
}

enableAutoDestroy(hook)

参数：
- {Function} hook
用法：

enableAutoDestroy 将会使用被传入的该钩子函数 (例如 afterEach) 销毁所有被创建的 Wrapper 实例。在调用这个方法之后，你可以通过调用 resetAutoDestroyState 方法恢复到默认行为。

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

// 将会在每个测试之后运行 `wrapper.destroy()`
enableAutoDestroy(afterEach)

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo)
    expect(wrapper.contains('div')).toBe(true)
    // 不需要在此运行 `wrapper.destroy()`
  })
})

← 教程 Wrapper →

# API

# mount()

# shallowMount()

# render()

# renderToString()

# 选择器

# CSS 选择器

# Vue 组件

# 查找选项对象

# Name

# Ref

# createLocalVue()

# createWrapper(node [, options])

# 配置

# Vue Test Utils 配置选项

# showDeprecationWarnings

# stubs

# mocks

# methods

# provide

# enableAutoDestroy(hook)

API

mount()

shallowMount()

render()

renderToString()

选择器

CSS 选择器

Vue 组件

查找选项对象

Name

Ref

createLocalVue()

createWrapper(node [, options])

配置

Vue Test Utils 配置选项

`showDeprecationWarnings`

`stubs`

`mocks`

`methods`

`provide`

enableAutoDestroy(hook)