Опции монтирования

Опции для mount и shallowMount. Объект опций может содержать как настройки монтирования Vue Test Utils, так и другие опции Vue.

СОВЕТ

Кроме опций, описанных ниже, объект options может содержать любую опцию, которую можно указать при вызове new Vue ({ /* опции здесь */ }). Эти опции будут объединены с существующими опциями компонента при монтировании с помощью mount / shallowMount

См. другие опции в примере

• Опции монтирования
  • context
  • slots
  • scopedSlots
  • stubs
  • mocks
  • localVue
  • attachToDocument
  • attrs
  • propsData
  • 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) 

slots

• Тип: { [name: string]: Array<Component>|Component|string }

Предоставляет объект с содержимым слотов компоненту. Ключ соответствует имени слота. Значение может быть компонентом, массивом компонентов или строковым шаблоном, или текстом.

Пример:

import Foo from './Foo.vue' const bazComponent = { name: 'baz-component', template: '<p>baz</p>' } const wrapper = shallowMount(Component, { slots: { default: [Foo, '<my-component />', 'text'], fooBar: Foo, // будет соответствовать `<slot name="FooBar" />` foo: '<div />', bar: 'bar', baz: bazComponent, qux: '<my-component />' } }) expect(wrapper.find('div')).toBe(true) 

scopedSlots

• Тип: { [name: string]: string|Function }

Предоставляет объект с содержимым слотов с ограниченной областью видимости для компонента. Ключ соответствует имени слота.

Вы можете установить имя входного параметра, используя атрибут slot-scope:

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

В противном случае входные параметры будут доступны как объект props при вычислении слота:

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

Вы также можете передать функцию, которая принимает входные параметры в качестве аргумента:

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

Или вы можете использовать JSX. Если вы пишете JSX в методе, this.$createElement автоматически внедряется babel-plugin-transform-vue-jsx:

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

stubs

• Тип: { [name: string]: Component | boolean } | Array<string>

Заглушки дочерних компонентов. Может быть массивом имён компонентов заменяемых заглушкой, или объектом. Если stubs массив, каждая заглушка - <${component name}-stub>.

Пример:

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) 

TIP

Для создания мока $root нужно использовать опцию parentComponent как описано здесь

localVue

• Тип: Vue

Локальная копия 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) 

attachToDocument

• Тип: boolean
• По умолчанию: false

Компонент будет прикрепляться к DOM при рендеринге, если установлено в true.

Если компонент прикреплен к DOM, вы должны вызвать wrapper.destroy() в конце вашего теста для того, чтобы удалить отрисованные элементы из документа и удалить экземпляр компонента.

attrs

• Тип: Object

Устанавливает объект $attrs на экземпляре компонента.

propsData

• Тип: Object

Устанавливает входные параметры экземпляра компонента, когда он примонтирован.

Пример:

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

TIP

Стоит отметить, что propsData относятся на самом деле к API Vue, а не к опции монтирования Vue Test Utils. Эта опция обрабатывается через extends. Смотрите также другие опции.

listeners

• Тип: Object

Устанавливает объект $listeners на экземпляре компонента.

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 содержатся другие опции, отличные от опций монтирования, опции компонента будут перезаписаны с помощью extends.

const Component = { template: '<div>{{ foo() }}{{ bar() }}{{ baz() }}</div>', methods: { foo() { return 'a' }, bar() { return 'b' } } } const options = { methods: { bar() { return 'B' }, baz() { return 'C' } } } const wrapper = mount(Component, options) expect(wrapper.text()).toBe('aBC')