API Reference

Mounting Options

When using mount, you can predefine the component's state using mounting options.

props

<template>
  <span>Count: {{ count }}</span>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true
    }
  }
}
</script>

test('props', () => {
  const wrapper = mount(Component, {
    props: {
      count: 5
    }
  })

  console.log(wrapper.html()) //=> '<span>Count: 5</span>'
})

slots

<template>
  <slot name="foo" />
  <slot />
</template>

test('slots - default and named', () => {
  const wrapper = mount(Component, {
    slots: {
      default: 'Default',
      foo: h('h1', {}, 'Named Slot')
    }
  })

  console.log(wrapper.html()) //=> '<h1>Named Slot</h1>Default'
})

Wrapper

When you use mount, a VueWrapper is returned with a number of useful methods for testing. Methods like find return a DOMWrapper. Both implement the same API.

html

<template>
  <div>
    <p>Hello world</p>
  </div>
</template>

test('html', () => {
  const wrapper = mount(Component)

  expect(wrapper.find('p').text()).toBe('Hello world')
})

text

<template>
  <div>
    <p>Hello world</p>
  </div>
</template>

test('text', () => {
  const wrapper = mount(Component)

  expect(wrapper.find('p').text()).toBe('Hello world')
})

find

<template>
  <div>
    <span>Span</span>
    <span data-test="span">Span</span>
  </div>
</template>

test('find', () => {
  const wrapper = mount(Component)

  wrapper.find('span') //=> found; returns DOMWrapper
  wrapper.find('[data-test="span"]') //=> found; returns DOMWrapper
  wrapper.find('p') //=> nothing found; returns ErrorWrapper
})

findAll

<template>
  <div>
    <span>Span</span>
    <span data-test="span">Span</span>
  </div>
</template>

test('findAll', () => {
  const wrapper = mount(Component)

  wrapper.findAll('span') //=> found; returns array of DOMWrapper
})

trigger

<template>
  <div>
    <span>Count: {{ count }}</span>
    <button @click="count++">Greet</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

test('trigger', async () => {
  const wrapper = mount(Component)

  await wrapper.find('button').trigger('click')

  expect(wrapper.find('span').text()).toBe('Count: 1')
})

classes

<template>
  <div>
    <span class="my-span" />
  </div>
</template>

test('classes', () => {
  const wrapper = mount(Component)

  expect(wrapper.find('.my-span').classes()).toContain('my-span')
})

exists

<template>
  <div>
    <span />
  </div>
</template>

test('exists', () => {
  const wrapper = mount(Component)

  expect(wrapper.find('span').exists()).toBe(true)
})

emitted

<template>
  <div />
</template>

<script>
export default {
  created() {
    this.$emit('greet', 'hello')
  }
}

test('emitted', () => {
  const wrapper = mount(Component)

  console.log(wrapper.emitted()) //=> { greet: [ ['hello'] ] }
  expect(wrapper.emitted().greet[0]).toEqual(['hello'])
})