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" />) 已经不再被支持。

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 选择器:

  • 标签选择器 (divfoobar)
  • 类选择器 (.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 的值,类似 stubsmocks。传递给挂载选项中 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()`
  })
})