vue-test-utils

Utilities for testing Vue components

Edd Yerburgh

@eddyerburgh

github.com/eddyerburgh

medium.com/@edward.yerburgh

• overview of vue-test-utils
• mount
• shallow
• createLocalVue

Contents

What is vue-test-utils?

A testing library for Vue components

wrapper based API 🍬

no Vue.nextTick 👏

In beta now 🙌

npm install --save-dev vue-test-utils

mount(Component)

what is a wrapper?

Example

Title Text

const wrapper = mount(Component)

wrapper.vm.someMethod()

wrapper.html()

wrapper.setProps({
  propA: 'value'
})

Title Text

import { mount } from 'vue-test-utils'
import Component from '~/components/Component'

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

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

  expect(wrapper.text()).toContain('1')
})

loads of info in docs

vue-test-utils.vuejs.org

shallow(Component)

mount

shallow

Example

import { shallow } from 'vue-test-utils'
import Component from '~/components/Component'
import ChildComponent from '~/components/ChildComponent'

test('passes aProp to ChildComponent', () => {
  const wrapper = shallow(Component)

  const cWrapper = wrapper.find(ChildComponent)

  expect(cWrapper.hasProp('aProp', 'value')).toBe(true)
})

tip:

shallow by default

createLocalVue()

What is a localVue?

Why localVue?

Avoid polluting Vue base constructor

Example

import { shallow, createLocalVue } from 'vue-test-utils'
import Router from 'vue-router'
import Component from '~/components/Component'

const localVue = createLocalVue()
localVue.use(Router)

const wrapper = shallow(Component, {
  localVue
})
wrapper.vm.$route // { path : '/' }

const freshWrapper = shallow(Component)
freshWrapper.vm.$route // undefined

Questions