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
Laravel News Partners

Laravel Jobs

Backend Software Engineer (PHP Developer)
Austin TX, Bonita Springs FL
Certified eSupport Corp
Laravel Developer
Glendale, CA (COVID Remote)
Jogg, Inc
Senior PHP Engineer
Remote, USA Only
Kittyhawk
Full-Stack Engineer (Mid to Senior)
Remote (EST, CST)
Voxie
Senior Laravel Developer (AI Applications)
Remote from anywhere in the UK or from our London office
GreenShoot Labs

Newsletter

Join 31,000+ others and never miss out on new tips, tutorials, and more.