mount()

• 引数:

  • {Component} component
  • {Object} options

• 戻り値: {Wrapper}

• オプション:

オプションを参照してください。

• 使い方:

マウントされて描画された Vue コンポーネントを含む Wrapper を生成します。

オプションなし:

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, { intercept: { $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) }) }) 

• 参照: Wrapper