Vue.js Unit Testing with Karma and Mocha

At some point, any serious development project should implement testing for their components. Generally, the first step is unit testing. Unit testing allows you to ensure that the behavior of your individual components is reliable and consistent. By using Karma and Mocha, combined with Webpack, we can unit-test Vue components with relative ease.

Installation

There’s no soft way to put it, the JavaScript web app testing scene is a complicated beast. As a result, the configuration required for a successful unit-testing setup is fairly extensive. Accordingly, you’ll probably be best off using vue-cli with the webpack template ($ vue init webpack my-project) and testing enabled.

Even then, there are some configuration changes to make to test/unit/karma.conf.js. You’ll need to specify the plugins you’re using, and possibly change the launcher. In this case, I’m using karma-chrome-launcher instead of karma-phantomjs-launcher.

var webpackConfig = require('../../build/webpack.test.conf');

module.exports = function (config) {
  config.set({
    // To run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['Chrome'],
    frameworks: ['mocha', 'sinon-chai'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    // ** ADD THIS IN ** (vue-cli's webpack template doesn't add it by default)
    plugins: [
      // Launchers
      'karma-chrome-launcher',

      // Test Libraries
      'karma-mocha',
      'karma-sinon-chai',

      // Preprocessors
      'karma-webpack',
      'karma-sourcemap-loader',

      // Reporters
      'karma-spec-reporter',
      'karma-coverage'
    ],
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

Your First Component Unit Test

Let’s create a small component to test.

<template>
  <p>{{propValue}}</p>
</template>

<script>
export default {
  props: ['propValue']
}
</script>

Now we’ll add a spec for it in test/unit/specs. This just checks that the component’s text is set to the property value.

import Vue from 'vue';
// The path is relative to the project root.
import TestMe from 'src/components/TestMe';

describe('TestMe.vue', () => {
  it(`should render propValue as its text content`, () => {
    // Extend the component to get the constructor, which we can then initialize directly.
    const Constructor = Vue.extend(TestMe);

    const comp = new Constructor({
      propsData: {
        // Props are passed in "propsData".
        propValue: 'Test Text'
      }
    }).$mount();

    expect(comp.$el.textContent)
      .to.equal('Test Text');
  });
});

Waiting For Async Updates

Vue updates the DOM asynchronously, in ticks. Therefore, when we modify anything that affects the DOM, we need to wait for the DOM to update using Vue.nextTick() before making any assertions.

<template>
  <p>{{dataProp}}</p>
</template>

<script>
export default {
  data() {
    return {
      dataProp: 'Data Text'
    }
  }
}
</script>

import Vue from 'vue';
// The path is relative to the project root.
import TestMe2 from 'src/components/TestMe2';

describe('TestMe2.vue', () => {
  ...
  it(`should update when dataText is changed.`, done => {
    const Constructor = Vue.extend(TestMe2);

    const comp = new Constructor().$mount();

    comp.dataProp = 'New Text';

    Vue.nextTick(() => {
      expect(comp.$el.textContent)
        .to.equal('New Text');
      // Since we're doing this asynchronously, we need to call done() to tell Mocha that we've finished the test.
      done();
    });
  });
});

Reference

Hopefully that helps get you started!

However, the way components are instanced and extended in Vue can be a bit confusing, so you may want to take a look at the official Vue tests to get a better idea on how to test various component capabilities.