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
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.
Next post
Sometimes when passing an object as a prop to a Vue component it’s important to check if it contains all expected properties. In Vue.js this can be accomplished by writing a custom validator function.