The Official Unit Testing Utility Library for Vue.js Is Now Available

Vue.js now has an official unit testing library for testing Vue applications. It provides methods for unit testing your components.

A 1.0 beta version shipped Monday, as well as an official guide to help you get started with standard tips, using test runners, and testing components which use Vuex (centralized state management for Vue).

Here’s an example of unit testing a Vue component with the utils library:

import { mount } from 'vue-test-utils'
import Counter from './counter'
 
describe('Counter', () => {
  // Now mount the component, and you have the wrapper.
  const wrapper = mount(Counter)
 
  it('renders the correct markup', () => {
    expect(wrapper.html()).toContain('<span class="count">0</span>')
  })
 
  // It's also easy to check for the existence of elements.
  it('has a button', () => {
    expect(wrapper.contains('button')).toBe(true)
  })
})

According to the guide, here’s an overview of how vue-test-utils works:

vue-test-utils tests Vue components by mounting them in isolation, mocking the necessary inputs (props, injections and user events) and asserting the outputs (render result, emitted custom events).

Mounted components are returned inside a Wrapper, which exposes many convenience methods for manipulating, traversing and querying the underlying Vue component instance.

Taking the above example, you could interact with the counter and make assertions with the following as outlined in the documentation.

it('button click should increment the count', () => {
  expect(wrapper.vm.count).toBe(0)
  const button = wrapper.find('button')
  button.trigger('click')
  expect(wrapper.vm.count).toBe(1)
})

Check out the official guide and starter project to get familiar with testing Vue applications with the official test utils library.