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}
Опции:

Использование:

Создаёт Wrapper, который содержит примонтированный и отрендеренный компонент Vue.

Без опций:

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, {
      mocks: {
        $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, создаёт Wrapper, который содержит примонтированный и отрендеренный компонент Vue, но с заглушками вместо дочерних компонентов.

Без опций:

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

describe('Foo', () => {
  it('отрендерить 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('отрендерить 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('отрендерить 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('отрендерить 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('отрендерить div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = shallowMount(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.vm.$route.path).toBe($route.path)
  })
})

render()

Принимает:
- {Component} component
- {Object} options
  - {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
Возвращает: {Promise<CheerioWrapper>}
Опции:

См. опции

Использование:

Рендерит объект в строку и возвращает обёртку cheerio.

Cheerio — библиотека, похожая на jQuery, для навигации по DOM в Node.js. Она имеет аналогичный API в Wrapper Vue Test Utils.

render использует vue-server-renderer под капотом для рендеринга компонента в статический HTML.

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<Component|Object>|Component|String} default
    - {Array<Component|Object>|Component|String} named
  - {Object} mocks
  - {Object|Array<string>} stubs
  - {Vue} localVue
Возвращает: {Promise<string>}
Опции:

См. опции

Использование:

Рендерит компонент в HTML.

renderToString использует vue-server-renderer под капотом для рендеринга компонента в статический HTML.

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 или опция поиска объекта.

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)

Опция поиска объекта

Name

Использование объекта для опции поиска, позволяет Vue Test Utils выбирать элементы по name компонента на компонентах обёртках.

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

Ref

Использование опции поиска объекта позволяет Vue Test Utils выбирать элементы по $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,
  mocks: { 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
})

См. также: Общие советы

Конфигурация

Vue Test Utils включает объект конфигурации для определения опций, используемых Vue Test Utils.

Настройки Vue Test Utils

`stubs`

Тип: { [name: string]: Component | boolean | string }
По умолчанию: {}

Заглушки указанные в config.stubs используются по умолчанию. Заглушки, используемые в компонентах. Они перезаписываются значениями stubs переданными в настройках монтирования.

При передаче stubs в качестве массива в настройках монтирования, config.stubs будет преобразована в массив, и будут создаваться компоненты заглушки с базовым компонентом, который возвращает <${component name}-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 в настройках монтирования.

Пример:

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

# Опция поиска объекта

# Name

# Ref

# createLocalVue()

# Конфигурация

# Настройки Vue Test Utils

# stubs

# mocks

# methods

# provide

API

mount()

shallowMount()

render()

renderToString()

Селекторы

CSS-селекторы

Компоненты Vue

Опция поиска объекта

Name

Ref

createLocalVue()

Конфигурация

Настройки Vue Test Utils

`stubs`

`mocks`

`methods`

`provide`