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 wrapper = mount(Foo, {
      attachToDocument: true
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

默认插槽和具名插槽:

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: {
        Bar: '<div class="stubbed" />',
        BarFoo: true,
        FooBar: Faz
      }
    })
    expect(wrapper.contains('.stubbed')).toBe(true)
    expect(wrapper.contains(Bar)).toBe(true)
  })
})

shallowMount()

  • 参数:

    • {Component} component
    • {Object} options
      • {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('返回一个 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('渲染一个 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('渲染一个 div', () => {
    const wrapper = shallowMount(Foo, {
      attachToDocument: true
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

默认插槽和具名插槽:

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
  • 返回值: {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', () => {
    const wrapper = render(Foo)
    expect(wrapper.text()).toContain('<div></div>')
  })
})

带 Vue 选项:

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = render(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.text()).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', () => {
    const wrapper = render(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Will match <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(wrapper.text()).toContain('<div></div>')
  })
})

全局属性存根:

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

describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = render(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.text()).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
  • 返回值: {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', () => {
    const renderedString = renderToString(Foo)
    expect(renderedString).toContain('<div></div>')
  })
})

带 Vue 选项:

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

describe('Foo', () => {
  it('renders a div', () => {
    const renderedString = renderToString(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(renderedString).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', () => {
    const renderedString = renderToString(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Will match <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(renderedString).toContain('<div></div>')
  })
})

全局属性存根:

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

describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const renderedString = renderToString(Foo, {
      mocks: {
        $route
      }
    })
    expect(renderedString).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()

  • 返回值:

    • {Component}
  • 用法:

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

可通过 options.localVue 来使用:

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

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

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

createWrapper(node [, options])

  • 参数:

    • {vm|HTMLElement} node
    • {Object} options
      • {Boolean} sync
      • {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 配置选项

stubs

  • 类型:{ [name: string]: Component | boolean | string }
  • 默认值:{ transition: TransitionStub, 'transition-group': TransitionGroupStub }

存储在 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)
  }
}

logModifiedComponents

  • 类型:Boolean
  • 默认值:true

当被展开的子元素被自动化存根的时候记录下告警日志。设置为 false 时则会隐藏告警日志。和其它配置选项不同的是,它不能设置在挂载选项上。

示例:

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

config.logModifiedComponents = false

silent

  • 类型:Boolean
  • 默认值:true

在组件的可观察内容 (如 props) 发生突变时,警告会被 Vue 阻止。当设置为 false 时,所有的警告都会出现在控制台中。这是一个 Vue.config.silent 的配置方式。

示例;

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

config.silent = false