🏁 Component testing for Vue.js
JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


vue-test Build Status

Component testing utilities for Vue.js (work with both Vue 1 and 2)


$ npm install --save-dev vue-test


The library is divided into two parts: the mount() function and the chai assertion library plugin. The mount() function is used for mounting components in your tests without having to directly interact with the DOM, and the chai plugin can be used to write readable tests with understandable output for mounted Vue components.

NOTE: vue-test requires the full version of Vue (which includes the compiler). Make sure your build configuration for testing aliases vue properly. For example (webpack 2):

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'

The mount() function

The mount() function takes two arguments, a Vue component, and some optional properties, and returns a wrapped mounted component with some useful utility functions.

import { mount } from 'vue-test';
import Title from './Title.vue';

const mountedTitle = mount(Title, {
  title: 'Hello world!'

mountedTitle.find('h1').text(); // Hello world!

Check out mount-api.md for a full list of the available functions.

Chai plugin

vue-test includes a chai plugin which you can use to test a component mounted with the mount() function.

Here's how you add it:

import { chaiPlugin } from 'vue-test';

Here's a very quick overview of what you can do:

  • expect(mountedComponent).to.be.ok
  • expect(mountedComponent).to.be.tag('p')
  • expect(mountedComponent).to.contain.tag('p')
  • expect(mountedComponent).to.match.selector('#id .class')
  • expect(mountedComponent).to.contain.selector('#id .class')
  • expect(mountedComponent).to.be.empty
  • expect(mountedComponent).to.have.className('alert')
  • expect(mountedComponent).to.have.value('input value')
  • expect(mountedComponent).to.have.text('some text')
  • expect(mountedComponent).to.contain.text('some text')
  • expect(mountedComponent).to.have.attribute('style')
  • expect(mountedComponent).to.have.attribute('style').that.equals('something')

It's all pretty descriptive and understandable, but for full explanations, see chai-plugin-api.md.


If you feel something is missing or find a bug, feel free to send a PR or open an issue. If you haven't contributed to a project on GitHub before, feel free to ask me for help and I can help you out 😄


This project is released under the MIT license.