API

mount()

  • Arguments:

    • {Component} component
    • {Object} options
  • Returns:{Wrapper}

  • Options:

See options

  • Usage:

Creates a Wrapper that contains the mounted and rendered Vue component.

Without options:

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

With Vue options:

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

Attach to 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)
  })
})

Default and named slots:

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, // Will match `<slot name="FooBar" />`.
        foo: '<div />'
      }
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

Stubbing global properties:

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

Stubbing components:

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

shallowMount()

  • Arguments:

    • {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
  • Returns:{Wrapper}

  • Options:

See options

  • Usage:

Like mount, it creates a Wrapper that contains the mounted and rendered Vue component, but with stubbed child components.

Without options:

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

With Vue options:

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

Attach to 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)
  })
})

Default and named slots:

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, // Will match <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(wrapper.find('div')).toBe(true)
  })
})

Stubbing global properties:

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, {
      mocks: {
        $route
      }
    })
    expect(wrapper.vm.$route.path).toBe($route.path)
  })
})

render()

  • Arguments:

    • {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
  • Returns:{CheerioWrapper}

  • Options:

See options

  • Usage:

Renders an object to a string and returns a cheerio wrapper.

Cheerio is a jQuery-like library to traverse the DOM in Node.js. It has a similar API to the Vue Test Utils Wrapper.

render uses vue-server-renderer under the hood, to render a component to static HTML.

render is included in the @vue/server-test-utils package.

Without options:

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = render(Foo)
    expect(wrapper.text()).toContain('<div></div>')
  })
})

With Vue options:

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = render(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.text()).toContain('red')
  })
})

Default and named slots:

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', () => {
    const wrapper = render(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Will match <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(wrapper.text()).toContain('<div></div>')
  })
})

Stubbing global properties:

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

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

renderToString()

  • Arguments:

    • {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
  • Returns:{string}

  • Options:

See options

  • Usage:

Renders a component to HTML.

renderToString uses vue-server-renderer under the hood, to render a component to HTML.

renderToString is included in the @vue/server-test-utils package.

Without options:

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

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

With Vue options:

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

describe('Foo', () => {
  it('renders a div', () => {
    const renderedString = renderToString(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(renderedString).toContain('red')
  })
})

Default and named slots:

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', () => {
    const renderedString = renderToString(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Will match <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(renderedString).toContain('<div></div>')
  })
})

Stubbing global properties:

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

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

Selectors

A lot of methods take a selector as an argument. A selector can either be a CSS selector, a Vue component, or a find option object.

CSS Selectors

Mount handles any valid CSS selector:

  • tag selectors (div, foo, bar)
  • class selectors (.foo, .bar)
  • attribute selectors ([foo], [foo="bar"])
  • id selectors (#foo, #bar)
  • pseudo selectors (div:first-of-type)

You can also use combinators:

  • direct descendant combinator (div > #bar > .foo)
  • general descendant combinator (div #bar .foo)
  • adjacent sibling selector (div + .foo)
  • general sibling selector (div ~ .foo)

Vue Components

Vue components are also valid selectors.

// 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 Option Object

Name

Using a find option object, Vue Test Utils allows for selecting elements by a name of component on wrapper components.

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

Ref

Using a find option object, Vue Test Utils allows for selecting elements by $ref on wrapper components.

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

createLocalVue()

  • Returns:

    • {Component}
  • Usage:

createLocalVue returns a Vue class for you to add components, mixins and install plugins without polluting the global Vue class.

Use it with 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)

Config

Vue Test Utils includes a config object to defined options used by Vue Test Utils.

Vue Test Utils Config Options

stubs

  • type: Object
  • default: { transition: TransitionStub, 'transition-group': TransitionGroupStub }

The stub stored in config.stubs is used by default.
Stubs to use in components. These are overwritten by stubs passed in the mounting options.

When passing stubs as an array in the mounting options, config.stubs are converted to an array, and will stub components with a basic component that returns <${component name}-stub>.

Example:

import VueTestUtils from '@vue/test-utils'

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

mocks

  • type: Object
  • default: {}

Like stubs, the values passed to config.mocks are used by default. Any values passed to the mounting options mocks object will take priority over the ones declared in config.mocks.

Example:

import VueTestUtils from '@vue/test-utils'

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

methods

  • type: Object
  • default: {}

You can configure default methods using the config object. This can be useful for plugins that inject methods to components, like VeeValidate. You can override methods set in config by passing methods in the mounting options.

Example:

import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.methods['errors'] = () => {
  any: () => false
}

provide

  • type: Object
  • default: {}

Like stubs or mocks, the values passed to config.provide are used by default. Any values passed to the mounting options provide object will take priority over the ones declared in config.provide. Please take note that it is not supported to pass a function as config.provide.

Example:

import VueTestUtils from '@vue/test-utils'

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

logModifiedComponents

  • type: Boolean
  • default: true

Logs warning when extended child components are automatically stubbed. Hides warnings when set to false. Unlike other config options, this cannot be set on the mounting options.

Example:

import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.logModifiedComponents = false

silent

  • type: Boolean
  • default: true

It suppresses warnings triggered by Vue while mutating component's observables (e.g. props). When set to false, all warnings are visible in the console. This is a configurable way which relies on Vue.config.silent.

Example:

import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.silent = false