30 Days of Vue

Implementing Tests

 

This post is part of the series 30 Days of Vue.

In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!

Implementing Tests

Yesterday, we discussed the importance of testing and some of the different types of unit testing libraries/suites that exist. Today, we'll begin to see unit testing in action.

As mentioned in the last article, we'll be using the Jest testing framework. One of the main advantages behind using Jest is its zero configuration set-up. The Getting Started guide in the Jest documentation shows us that we simply need to install the Jest package, create a .test.js or .spec.js file, and add a test script to the package.json file.

However, if we select the Jest suite as a dependancy we want in a Vue CLI scaffolded project - this set-up would already be prepared for us. We'll work within the test files of a project created with the Vue CLI that has the Jest testing suite installed.

Simplified TodoMVC

The app we’ll be running our tests for is a simplified version of the TodoMVC open source project. We’ll only test a simple single-file Vue component which will help us understand how units tests can be made in Vue.

Our simplified TodoMVC app will have three distinct features; an input to enter new todo items, a list of entered todo items, and the ability to remove a todo item from the list.

The single App.vue component file that makes up our app will look like the following:

src/testing-todo-mvc/src/App.vue
<template>
  <div id="app">
    <section class="todoapp">
      <header class="header">
        <h1 class="title">todos</h1>
        <input
          class="new-todo"
          placeholder="What needs to be done?"
          v-model="newTodo"
          @keyup.enter="addTodo"
        />
      </header>
      <section class="main">
        <ul class="todo-list">
          <li class="todo"
            v-for="(todo, key) in todos"
            :key="key">
            <div class="view">
              <label>{{ todo }}</label>
              <button class="destroy"
                @click="removeTodo(todo)">
              </button>
            </div>
          </li>
        </ul>
      </section>
    </section>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      todos: [],
      newTodo: ""
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo !== "") {
        this.todos.push(this.newTodo);
        this.newTodo = "";
      }
    },
    removeTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1);
    }
  }
};
</script>

<style lang="css" src="./styles.css">
</style>

The <template> of the App component has the following details:

  • The <header> element has a title of ‘todos’.
  • The <header> has an input field that is bound to a newTodo data property. This input field listens for the keyup.enter event (i.e. the release of the enter key) and when triggered calls an addTodo method.
  • Below the <header> exists a list of todo items displayed from a todos array stored in the components data. This list is rendered with the help of the v-for directive.

The <script> section of the component can be seen to have the following details:

  • todos and newTodo is initialized with a blank array and empty string respectively. todos is the list of todo items displayed in the list and newTodo is the data property tied to the controlled input.
  • In the methods property exists two methods - addTodo() and newTodo(). The addTodo() method first checks if the newTodo property isn’t blank and if not, it pushes the newTodo data value to the todos array before clearing newTodo back to an empty string.
  • The removeTodo() method uses the Array splice() method to remove the intended todo item based on its index in the array.

The <style> tag has a src referenced from a styles.css file located within the src/ folder.

With the App component appropriately declared in the root Vue instance (in the src/main.js file), our application will allow us to add and remove todo items from a list of todos.

Live version - https://30dofv-todomvc.surge.sh

Writing tests

The Vue CLI introduces a tests/ directory adjacent to the src/ directory for a scaffolded project that has either the 'Unit Testing' or 'E2E Testing' option selected during manual set-up.

testing-todo-mvc/
  README.md
  babel.config.js
  node_modules/
  package.json
  public/
  src/
  tests/

The tests/ directory will contain either the unit/ or e2e/ folders depending on which testing environment was selected during the Vue CLI set-up stage. In our case, only a tests/unit/ folder will be created which would contain an .eslintrc.js file and an example.spec.js file.

testing-todo-mvc/
  ...
  tests/
    unit/
      .eslintrc.js
      example.spec.js

The .eslintrc.js file is often used to configure ESLint rules within a particular directory or subdirectory. The .eslintrc.js file within our tests/unit folder simply declares the Jest framework as an environment our linter should recognize for any file within the tests/unit directory.

src/testing-todo-mvc/tests/unit/.eslintrc.js
module.exports = {
  env: {
    jest: true
  }
}

Specifying jest: true in the env option will configure the linter to recognize the set of predefined global variables that exists within the Jest framework.

 

This page is a preview of 30 Days of Vue

Get the rest of this chapter and 330+ pages of Vue instruction for free.

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Get started now

Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.

No spam ever. Easy to unsubscribe.