Two ways of testing Vue.js components

I've been working more with Vue.js lately and got familiar with two slightly different ways of testing Vue.js components.

Let's take a very basic Vue.js component:

const MyComponent = Vue.extend({
  template: '<h1>{{ content }}</h1>',
  props: {
    content: {
      type: String,
      default: ''
    }
});

export default MyComponent;


Following the documentation I can initialise the component by passing props to it as 'propsData'. This style of testing makes the template irrelevant. I end up with a test that's as close as it gets to a true unit test.

import Vue from 'vue';
import MyComponent from './my-component.js'
import { expect } from 'chai';

const vm = Vue.extend(MyComponent);

myComponent = new vm({
  propsData: {
    content: 'Hello world!'
  }
}).$mount();

expect(myComponent.content).to.equal('Hello world!');


Another style of testing that I found useful requires a different setup.

I can define a template and components of a new Vue instance and access the component under test via a ref. This time the props are defined as attributes of the template.

import Vue from 'vue';
import MyComponent from './my-component.js';
import { expect } from 'chai';

const vm = new Vue({
  template: `<my-component ref="test" content="Hello world!"></my-component>`,
  components: {
    MyComponent
  }
}).$mount();

const myComponent = vm.$refs.test;

expect(myComponent.content).to.equal('Hello world!');

Both styles of testing are useful in different situations and while the first style is the recommended one in most cases, being able to use an actual template for testing purposes comes in handy a lot of times too.

Did you like this post?
Previous post

The power of lists and maps in SASS

If you find yourself repeating a lot of similar rules when writing stylesheets or your needs go beyond simple variables think of lists and maps. I just discovered how useful lists and maps can be and therefore share a few examples.