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.

挂载选项

mountshallowMount 的选项。

提示

除了下方列出的选项,options 对象还可以包含任何 new Vue ({ /*options here*/ }) 调用时的有效选项。 当通过 mount / shallowMount 挂载时,这些选项将会合并入组件现有的选项中。

查阅其它选项的例子

context

  • 类型:Object

将上下文传递给函数式组件。该选项只能用于函数式组件

示例:

import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Component, {
  context: {
    props: { show: true },
    children: [Foo, Bar]
  }
})

expect(wrapper.is(Component)).toBe(true)

data

  • 类型:Function

向一个组件传入数据。这将会合并到现有的 data 函数中。

示例:

const Component = {
  template: `
    <div>
      <span id="foo">{{ foo }}</span>
      <span id="bar">{{ bar }}</span>
    </div>
  `,

  data() {
    return {
      foo: 'foo',
      bar: 'bar'
    }
  }
}

const wrapper = mount(Component, {
  data() {
    return {
      bar: 'my-override'
    }
  }
})

wrapper.find('#foo').text() // 'foo'
wrapper.find('#bar').text() // 'my-override'

slots

  • 类型:{ [name: string]: Array<Component>|Component|string }

为组件提供一个 slot 内容的对象。该对象中的键名就是相应的 slot 名,键值可以是一个组件、一个组件数组、一个字符串模板或文本。

示例:

import Foo from './Foo.vue'
import MyComponent from './MyComponent.vue'

const bazComponent = {
  name: 'baz-component',
  template: '<p>baz</p>'
}

const yourComponent = {
  props: {
    foo: {
      type: String,
      required: true
    }
  },
  render(h) {
    return h('p', this.foo)
  }
}

const wrapper = shallowMount(Component, {
  slots: {
    default: [Foo, '<my-component />', 'text'],
    fooBar: Foo, // 将会匹配 `<slot name="FooBar" />`.
    foo: '<div />',
    bar: 'bar',
    baz: bazComponent,
    qux: '<my-component />',
    quux: '<your-component foo="lorem"/><your-component :foo="yourProperty"/>'
  },
  stubs: {
    // 用来注册自定义组件
    'my-component': MyComponent,
    'your-component': yourComponent
  },
  mocks: {
    // 用来向渲染上下文添加 property
    yourProperty: 'ipsum'
  }
})

expect(wrapper.find('div')).toBe(true)

scopedSlots

  • 类型:{ [name: string]: string|Function }

提供一个该组件所有作用域插槽的对象。每个键对应到插槽的名字。

你可以使用 slot-scope 特性设置 prop 的名称:

shallowMount(Component, {
  scopedSlots: {
    foo: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
  }
})

否则插槽被计算的时候可以通过 props 对象使用 prop:

shallowMount(Component, {
  scopedSlots: {
    default: '<p>{{props.index}},{{props.text}}</p>'
  }
})

你也可以传递一个函数将 prop 作为参数带入:

shallowMount(Component, {
  scopedSlots: {
    foo: function (props) {
      return this.$createElement('div', props.index)
    }
  }
})

或者你可以使用 JSX。如果你在一个方法里撰写 JSX,babel-plugin-transform-vue-jsx 会自动注入 this.$createElement

shallowMount(Component, {
  scopedSlots: {
    foo(props) {
      return <div>{props.text}</div>
    }
  }
})

必备根元素

由于该特性内部实现的原因,这里的插槽内容必须返回一个根元素,即使一个作用域插槽是允许返回一个元素数组的。

如果你在测试中有这方面的需要,推荐的变通方式是把被测试的组件包裹在另一个组件里,然后挂载那个组件:

const WrapperComp = {
  template: `
  <ComponentUnderTest v-slot="props">
    <p>Using the {{props.a}}</p>
    <p>Using the {{props.a}}</p>
  </ComponentUnderTest>
  `,
  components: {
    ComponentUnderTest
  }
}
const wrapper = mount(WrapperComp).findComponent(ComponentUnderTest)

stubs

  • 类型:{ [name: string]: Component | string | boolean } | Array<string>

将子组件存根。可以是一个要存根的组件名的数组或对象。如果 stubs 是一个数组,则每个存根都是一个 <${component name}-stub>

废弃通知:

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

示例:

import Foo from './Foo.vue'

mount(Component, {
  stubs: ['registered-component']
})

shallowMount(Component, {
  stubs: {
    // 使用一个特定的实现作为存根
    'registered-component': Foo,
    // 使用创建默认的实现作为存根。
    // 这里默认存根的组件名是 `another-component`。
    // 默认存根是 `<${the component name of default stub}-stub>`。
    'another-component': true
  }
})

mocks

  • 类型:Object

为实例添加额外的属性。在伪造全局注入的时候有用。

示例:

const $route = { path: 'http://www.example-path.com' }
const wrapper = shallowMount(Component, {
  mocks: {
    $route
  }
})
expect(wrapper.vm.$route.path).toBe($route.path)

提示

如果想要伪造 $root 请换用这里描述的 parentComponent 选项。

localVue

  • 类型:Vue

通过 createLocalVue 创建的一个 Vue 的本地拷贝,用于挂载该组件的时候。在这份拷贝上安装插件可以防止原始的 Vue 被污染。

示例:

import { createLocalVue, mount } from '@vue/test-utils'
import VueRouter from 'vue-router'
import Foo from './Foo.vue'

const localVue = createLocalVue()
localVue.use(VueRouter)

const routes = [{ path: '/foo', component: Foo }]

const router = new VueRouter({
  routes
})

const wrapper = mount(Component, {
  localVue,
  router
})
expect(wrapper.vm.$route).toBeInstanceOf(Object)

attachTo

  • 类型:HTMLElement | string
  • 默认值:null

指定一个 HTMLElement 或定位到一个 HTML 元素的 CSS 选择器字符串,组件将会被完全挂载到文档中的这个元素。

当要挂载到 DOM 时,你需要在测试的结尾调用 wrapper.destroy() 以将该元素从文档中移除,并销毁该组件实例。

const Component = {
  template: '<div>ABC</div>'
}
let wrapper = mount(Component, {
  attachTo: '#root'
})
expect(wrapper.vm.$el.parentNode).to.not.be.null
wrapper.destroy()

wrapper = mount(Component, {
  attachTo: document.getElementById('root')
})
expect(wrapper.vm.$el.parentNode).to.not.be.null
wrapper.destroy()

attachToDocument

  • 类型:boolean
  • 默认值:false

废弃警告

attachToDocument 已经被废弃并且将会在未来的发布中被移除。请换用 attachTo

attachTo 一样,不过会自动创建一个新的 div 元素并将其插入到 body 里。

如果添加到了 DOM 上,你应该在测试的最后调用 wrapper.destroy() 将元素从文档中移除并销毁组件实例。

attrs

  • 类型:Object

设置组件实例的 $attrs 对象。

propsData

  • 类型:Object

在组件被挂载时设置组件实例的 prop。

示例:

const Component = {
  template: '<div>{{ msg }}</div>',
  props: ['msg']
}
const wrapper = mount(Component, {
  propsData: {
    msg: 'aBC'
  }
})
expect(wrapper.text()).toBe('aBC')

提示

值得注意的是 propsData 实际上是一个 Vue API,不是 Vue Test Utils 的挂载选项。它会被 extends 处理。请查阅其它选项

listeners

  • 类型:Object

设置组件实例的 $listeners 对象。

示例:

const Component = {
  template: '<button v-on:click="$emit(\'click\')"></button>'
}
const onClick = jest.fn()
const wrapper = mount(Component, {
  listeners: {
    click: onClick
  }
})

wrapper.trigger('click')
expect(onClick).toHaveBeenCalled()

parentComponent

  • 类型:Object

用来作为被挂载组件的父级组件。

示例:

import Foo from './Foo.vue'

const wrapper = shallowMount(Component, {
  parentComponent: Foo
})
expect(wrapper.vm.$parent.$options.name).toBe('foo')

provide

  • 类型:Object

为组件传递用于注入的属性。可查阅 provide/inject 了解更多。

示例:

const Component = {
  inject: ['foo'],
  template: '<div>{{this.foo()}}</div>'
}

const wrapper = shallowMount(Component, {
  provide: {
    foo() {
      return 'fooValue'
    }
  }
})

expect(wrapper.text()).toBe('fooValue')

其它选项

mountshallowMount 的选项包含了挂载选项之外的选项时,则会将它们通过扩展覆写到其组件选项。

const Component = {
  template: '<div>{{ foo }}</div>',
  data() {
    return {
      foo: 'fromComponent'
    }
  }
}
const options = {
  data() {
    return {
      foo: 'fromOptions'
    }
  }
}

const wrapper = mount(Component, options)

expect(wrapper.text()).toBe('fromOptions')