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.

API

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

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('renders a 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('renders a 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('renders a 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, // <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, {
      intercept: {
        $route
      }
    })
    expect(wrapper.vm.$route.path).toBe($route.path)
  })
})

render()

引数:
- {Component} component
- {Object} options
  - {Object} context
    - {Array<Component|Object>|Component} children
  - {Object} slots
    - {Array<Componet|Object>|Component|String} default
    - {Array<Componet|Object>|Component|String} named
  - {Object} mocks
  - {Object|Array<string>} stubs
  - {Vue} localVue
戻り値: {Promise<CheerioWrapper>}
オプション:

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

使い方:

オブジェクトを文字列にレンダリングして cheerio wrapper を返します。

Cheerio は Node.js で jQuery のように DOM をスキャンするためのライブラリです。
これは Vue Test Utils の Wrapper に似ている API を持っています。

コンポーネントを静的な HTML にレンダリングするために、render は内部で vue-server-renderer を使用します。

render は @vue/server-test-utils パッケージに含まれています。

オプションなし:

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

describe('Foo', () => {
  it('renders a div', async () => {
    const wrapper = await 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', async () => {
    const wrapper = await 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', async () => {
    const wrapper = await render(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // <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', async () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = await 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<Componet|Object>|Component|String} default
    - {Array<Componet|Object>|Component|String} named
  - {Object} mocks
  - {Object|Array<string>} stubs
  - {Vue} localVue
戻り値: {Promise<string>}
オプション:

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

使い方:

コンポーネントを HTML にレンダリングします。

コンポーネントを HTML にレンダリングするために、renderToString は内部で vue-server-renderer を使用します。

renderToString は @vue/server-test-utils パッケージに含まれています。

オプションなし:

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

describe('Foo', () => {
  it('renders a div', async () => {
    const str = await renderToString(Foo)
    expect(str).toContain('<div></div>')
  })
})

Vue オプションを使用:

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

describe('Foo', () => {
  it('renders a div', async () => {
    const str = await renderToString(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(str).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', async () => {
    const str = await renderToString(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // <slot name="FooBar" /> にマッチします。
        foo: '<div />'
      }
    })
    expect(str).toContain('<div></div>')
  })
})

グローバルプロパティをスタブする:

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

describe('Foo', () => {
  it('renders a div', async () => {
    const $route = { path: 'http://www.example-path.com' }
    const str = await renderToString(Foo, {
      mocks: {
        $route
      }
    })
    expect(str).toContain($route.path)
  })
})

セレクタ

多くのメソッドがセレクタを引数とします。セレクタは、CSS セレクタ、 Vue コンポーネント、または find メソッドのオプションオブジェクトのいずれかです。

CSS セレクタ

マウントは有効な CSS セレクタを処理します。

タグセレクタ (div, foo, bar)
クラスセレクタ (.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)

find メソッドのオプションオブジェクト

name

find メソッドのオプションオブジェクトを使用すると、Wrapper コンポーネント内にあるコンポーネントの name に一致する要素を取得することができます。

const buttonWrapper = wrapper.find({ name: 'my-button' })
buttonWrapper.trigger('click')

ref

find メソッドのオプションオブジェクトを使用すると、Wrapper コンポーネントの $ref プロパティに一致する要素を取得することができます。

const buttonWrapper = wrapper.find({ ref: 'myButton' })
buttonWrapper.trigger('click')

createLocalVue()

引数:
- {Object} options
  - {Function} errorHandler
戻り値:
- {Component}
使い方:

createLocalVue は、グローバル Vue クラスを汚染することなくコンポーネント、ミックスイン、プラグインを追加するための Vue クラスを返します。

errorHandlerオプションを使用すると、コンポーネントのレンダー機能とウォッチャー中にキャッチされなかったエラーを処理できます。

options.localVue と一緒に使用してください。

オプションなし:

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

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

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

errorHandlerオプションを使用:

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

const errorHandler = (err, vm, info) => {
  expect(err).toBeInstanceOf(Error)
}

const localVue = createLocalVue({
  errorHandler
})

// Fooがライフサイクルフック内でエラーをスローする
const wrapper = shallowMount(Foo, {
  localVue
})

参照: 一般的なヒント

createWrapper(node [, options])

引数:
- {vm|HTMLElement} node
- {Object} options
  - {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)

Config

vue-test-utils にはオプションを定義するための config オプションがあります。

Vue Test Utils Config オプション

`stubs`

型: { [name: string]: Component | boolean | string }
デフォルト: {}

コンポーネントで使用するスタブはマウンティングオプションの stubs で設定します。

マウンティングオプションの stubs が配列である場合、config.stubs は配列に変換されます。その場合、使用されるスタブは<${コンポーネント名}-stub>を返す基本的なコンポーネントになります。

例:

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

config.stubs['my-component'] = '<div />'

`mocks`

型: Object
デフォルト: {}

stubs のように、 config.mocks に渡された値はデフォルトで使用されます。マウンティングオプションの mocks オブジェクトに渡された値は config.mocks で指定された値よりも優先されます。

例:

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

config.mocks['$store'] = {
  state: {
    id: 1
  }
}

`methods`

型: { [name: string]: Function }
デフォルト: {}

config オブジェクトを使用してデフォルトのメソッドを設定することができます。これは VeeValidate のようなコンポーネントにメソッドを注入するプラグインに役立ちます。config にセットした methods はマウンティングオプションに methods を渡すことで上書きすることができます。

例:

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

config.methods['getData'] = () => {}

`provide`

型: Object
デフォルト: {}

stubs や mocks のように config.provide に渡された値はデフォルトで使用されます。マウンティングオプションの provide オブジェクトに渡された値は config.provide で指定された値よりも優先されます。 config.provide に関数をセットすることはできないことに注意してください。

例:

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

config.provide['$logger'] = {
  log: (...args) => {
    console.log(...args)
  }
}

← ガイド Wrapper →

# API

# mount()

# shallowMount()

# render()

# renderToString()

# セレクタ

# CSS セレクタ

# Vue コンポーネント

# find メソッドのオプションオブジェクト

# name

# ref

# createLocalVue()

# createWrapper(node [, options])

# Config

# Vue Test Utils Config オプション

# stubs

# mocks

# methods

# provide

API

mount()

shallowMount()

render()

renderToString()

セレクタ

CSS セレクタ

Vue コンポーネント

find メソッドのオプションオブジェクト

name

ref

createLocalVue()

createWrapper(node [, options])

Config

Vue Test Utils Config オプション

`stubs`

`mocks`

`methods`

`provide`