挂载选项

mount 和 shallowMount 的选项。

提示

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

查阅其它选项的例子

• context
• data
• slots
• scopedSlots
• stubs
• mocks
• localVue
• attachTo
• attachToDocument
• propsData
• attrs
• listeners
• parentComponent
• provide

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

其它选项

当 mount 和 shallowMount 的选项包含了挂载选项之外的选项时，则会将它们通过扩展覆写到其组件选项。

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