Testing your Vue app with Jest and Travis CI

In this article, we will be looking at how we add some specs to a Vue application and run those using the Jest test runner and add some test coverage using coveralls and display those in GitHub as a badge.

To achieve those, we might need to understand the concepts of test coverage.

An initial point to be noted here is that it is not a detailed explanation of the Vue testing but mainly focused on the configuration side of the Vue.js application.

Structure of the Blog

What we are going to build in this blog.

What is unit testing?

Brief about vue-test-utils.

What is Jest?

Setup the application

Add the test specs.

Add coverage code for Jest.

Add Travis Configuration.

Add coveralls to the application.

Complete the test coverage to 100percent.

Display the coverage as a badge.

Important reference points.

1. What we are going to build in this blog

Here, we are going to build a small application which will display a count of the button clicked. I know, it is a very simple application because we are not going to cover the Jest here since there is a large number of blogs are available to integrate Vue and Jest. So I don’t want to repeat that.

2. What is unit testing?

From the official Vue docs,

Unit testing is a fundamental part of software development. Unit tests execute the smallest units of code in isolation, in order to increase ease of adding new features and track down bugs. Vue’s single-file components make it straight forward to write unit tests for components in isolation.

From a simple standpoint, we can say that a unit testing is dealing when the counter increment upon the button clicked in the UI.

3. A brief about vue-test-utils.

It is the official unit testing utility library for Vue.js. Which deals with the button click and a lot of events which are used by the unit testing. By using the vue-test-utils, we can mock the inputs and even props too.

There is an option using the vue-cli to accommodate vue-test-utils when the time of creating an application, will show you that on below sections.

4. What is Jest?

By using the vue-test-utils, we can create the tests, but running those tests needed a runner. It is where Jest comes to the picture. Jest is actually test runner implemented by Facebook and much popularity in the testing world. It has the least configs and all.

Jest contains snapshot testing. Snapshot testing will convert the UI to a string and check the contents. It is an awesome feature for the Jest.

5. Setup the application

I have already installed the vue-cli and thus we are moving to create the application.

1. Create the application and select the features

Using the below command,

vue create application-name

example:$ vue create vue-code-coverage

I will manually select the features for the application.

For the unit testing part, will select the Jest as the test runner

We can store the configuration files for the Jest in package.json or dedicated files. Here, we select the dedicated files option.

Then, we are committing our first commit in this project

2. Create a new component for the button click

We have already a component called HelloWorld.vue there, we are just removing that and add our component there.

4. Check the file for the tests.

When creating an application using the vue-cli and select the test utils, it will automatically create a sample test file called example.spec.js .

We can remove that file or edit that file based on our requirements.

6. Add the test specs.

We will be creating a file called buttonCount.spec.js in the /tests/unit/

1. Import the test-utils file

First of all, need to import the vue-test-utils. Which can be done by,

import { shallowMount } from '@vue/test-utils'

we can use the mount or shallowMount here. When using the shallowMount, it will consider only the current component not the child component. shallowMount is too good for unit testing since they are used to test single components.

2. Import the corresponding component file.

Here, we need to import our own component which is going to be tested. Like in our example,

import ButtonCount from '@/components/ButtonCount.vue'

3. create a wrapper using the shallowMount

Our test suite will have a describe one followed by it functionalities.

The above is the basic skeleton of our test suite, now we are adding more to complete the functionalities.

describe('ButtonCount.vue', () => {

const wrapper = shallowMount(ButtonCount)

// checks ButtonCount is a component.

it('Register is a component', () => {

expect(wrapper.isVueInstance()).toBeTruthy()

})

})

It is a pretty basic test to check ButtonCount is generated or not. Now, we are going to execute this test in the terminal to figure out it is success or failure.

In our package.json, there is already configured script for testing,

We can that test script using,

npm run test:unit

Hooray, our test passed, now we can complete all the tests.

A note here, Please add the — watch to the test unit in package.json becomes an interactive test running tool, which executes only failed test and lower the overhead issues.