Implement Unit Testing into Vue Application

Rohmad Sasmito
Sep 1, 2018 · 2 min read
Unit testing taken from google images search

Unit testing is a way to ensure your code already running as expected. It is a fit solution to avoid a somethings bad or wrong on the development product. (Rohmad, 2018)

Unit testing involves breaking your program into pieces, and subjecting each piece to a series of tests. (MattJ, 2016)

Implement of Unit testing, probably will bit spend your time. But to avoid does somethings wrong in the future, it’s a great way to make finished development and done as expected.

Vue application consist of some components that probably reusable and has task specifically.

Here I will share with you all, about tips for implement unit testing into your Vue Application.

I assume, that you are already understand about Vue.js & Vuex at least basic knowledge.

For get started, we would build an application that added unit testing into each its component, also into Vuex store.

Setup Project

You have to clone this repository first. However if you want to implement into your existing application. You can skip this step.

git clone https://github.com/rohmad-st/vue-learning-app.git

Unit Testing in Component

From above project, now we have a component Product.vue. I’m using Vuetify as base design system. So if you unfamiliar with it, you have to read it first in https://vuetifyjs.com/en/getting-started/quick-start:

I hope you already familiar with Vuex, because here we will also learn how to implement unit testing into Vuex.

Look at Product.vue component above, now we will try to write an unit testing for it. Here we are have challenges, for also make sure Vuetify and Vuex can run as well, so some steps that I do:

In this component I have expected that a class headline will have title equal with title of product props [code line: 28–36]

Unit Testing into Vuex Stores

We have a module products.js to handle all events in the product actions.

From vuex module above, now we will added line codes to test it.

Our expected are:

Now you already can implemented an unit testing into both of vue component and vuex.

Feel free to discuss and share it if you feel this article is helpful. :)

Rohmad Sasmito

Written by

Software Engineer @ Kata.ai

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade