Vue.js: Up and Running

Chapter 7. Testing Vue Components

By separating our code into components, we’ve made it easy to write unit tests for our app. Our code has been divided into small chunks that serve one purpose each, with a relatively small number of options—perfect for testing. Testing your code ensures that when you make changes in the future, you won’t break things that you weren’t expecting to have changed. If you’re working on any reasonably sized app, you should probably be writing tests.

In this chapter, we’ll first look at testing your components using just Vue, and then we’ll look at using vue-test-utils to make the syntax a bit nicer.

We won’t be looking at a test framework such as Jasmine, Mocha, or Jest in this book. The most the tests written in this chapter will do is throw an error that can then be inspected in the browser console. For a more in-depth look at testing in JavaScript, check out JavaScript Testing with Jasmine by Evan Hahn (O’Reilly), or any number of articles online.

Testing a Simple Component

Let’s start by looking at a simple component that we can test—a simpler version of the NotificationCount component you saw in the previous chapter:

const NotificationCount = {
  template: `<p>
      Messages: <span class="count">{{ messageCount }}</span>
      <a @click.prevent="handleUpdate">(update)</a>
    </p>`,
  props: {
    initialCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return { messageCount: this.initialCount };
  },
  methods: {
    handleUpdate() {
      this.$http.get('/api/new-messages')