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

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.


Filed in: News / Testing / Vue.js


Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Senior Software Engineer - LAMP/PHP/MySQL/Laravel
Los Angeles / Remote
Ranker
Senior PHP/Laravel Developer: Your Dream Work Environment
Remote
iPhone Photography School
In-house Laravel Developer.
Gold Coast / Australia
MXstore
Laravel Developer
Oak Brook, IL
Tidal Commerce
Senior Backend Engineer
Santa Monica only
Saatchi Art
Senior Laravel Developer
San Francisco
Stitch Labs
Senior Software Developer
South Jordan, UT
Lendio