Tutorial

Vue.js Unit Testing with Karma and Mocha

Published on March 5, 2017
Default avatar

By Joshua Bemenderfer

Vue.js Unit Testing with Karma and Mocha

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

karma.conf.js
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.

TestMe.vue
<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.

specs/TestMe.spec.js
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.

TestMe2.vue
<template>
  <p>{{dataProp}}</p>
</template>

<script>
export default {
  data() {
    return {
      dataProp: 'Data Text'
    }
  }
}
</script>
specs/TestMe2.spec.js
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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel