Testing your Vue app with Jest and Travis CI

Anoob Bava
Apr 17, 2019 · 8 min read

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

  1. What we are going to build in this blog.

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-nameexample:
$ vue create vue-code-coverage

I will manually select the features for the application.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

link for the code commit

3. Add the functionality for the button click and display count.

Now, we need to create a button and add a method to increment the count once clicked. We need to have a data called count which will increment upon clicking the button.

Image for post
Image for post

So simple right. Initially, the count becomes zero as initialized by the data property. Then assign a method to invoke to increase the count upon clicking on the button

The output will be like this,

Image for post
Image for post

link for the code change.

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.

Image for post
Image for post

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.

Image for post
Image for post

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,

Image for post
Image for post

We can that test script using,

npm run test:unit
Image for post
Image for post

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.

Image for post
Image for post

4. Complete all the tests

The full tests become like this,

Image for post
Image for post

and the execution output becomes using the watch mode,

Image for post
Image for post

commit link for code change

7. Add coverage code for Jest.

We need to add some code to the jest.config.js in order to display the code coverage to the UI.

collectCoverage: true,collectCoverageFrom: ['**/*.{vue}', '!**/node_modules/**', '!<rootDir>/dist/**','!<rootDir>/src/plugins/**', '!<rootDir>/tests/unit/**'],coverageReporters: ['lcov', 'text-summary']

It means, needs to send the code coverage and need to select only those files.

Image for post
Image for post

Now, run the test suite again,

Image for post
Image for post

Hooray, we have coverage for Vue files, now we can move to our configuration part.

8. Add Travis Configuration.

Travis CI is continuous integration which will help to deals with running tests and check the builds are passing or not.

Travis works with a yml file called .travis.yml. Need to add some configs there to work on this.

This file must be on the root path of our project, not some inside path,

Image for post
Image for post

spacing is super important in the yml, please keep in mind also.

go to Travis ci site → login with GitHub → select the project

Image for post
Image for post

currently, we are still not pushed the .travis.yml that’s why the build is unknown now,

Image for post
Image for post

now, wait for the execution,

Image for post
Image for post

Awesome, now we can add the Travis badge to our app.

Image for post
Image for post

Github repo added with Travis badge,

Image for post
Image for post

9. Add coveralls to the application.

As per the docs,

Coveralls is a web service to help you track your code coverage over time, and ensure that all your new code is fully covered.

1. Set up the coveralls.io

goto coveralls → login with GitHub → Add repos → click on sync repos → select the repos

Image for post
Image for post

2. Add the coveralls npm package.

Image for post
Image for post

Install the coveralls,

Image for post
Image for post

3. Update the travis.yml

Image for post
Image for post

That will send the coverage to our coveralls.io.

Image for post
Image for post

Awesome, now we have 67% coverage. The reason is that we have 2 files

  1. App.vue

Currently, test coverage for ButtonCount.vue only. Need to add in the case of the App.vue also.

10. Complete the test coverage to 100percent.

To do that, need to write the spec for the App.vue as well. Create a file called App.spec.js in the tests/unit/

Add the specs,

Image for post
Image for post

That <h3> data is coming from our ButtonClick component.

Image for post
Image for post

Awesome, we can now 100% coverage. Now we can push that code.

11. Display the coverage as a badge.

After pushing the code, the coveralls become,

Image for post
Image for post

Copy the badge and update it to the GitHub Repo.

Image for post
Image for post

Awesome, It is now updated in GitHub repo.

Image for post
Image for post

12. Important reference points.

We have achieved a lot here, I just want to update some more information which is used when writing this blog.

If this story helps you to learn anything, please feel free to buy me a coffee

  1. Vue test handbook: link. A lot of thanks to creating and implement this site and open source it.

Thanks for reading!

Please feel free to leave some comments if you have any questions.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Anoob Bava

Written by

Software Engineer@QBurst,Technopark,Trivandrum,Kerala,India🇮🇳 #believer, seraching for Happy path Scenario, #githublover

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Anoob Bava

Written by

Software Engineer@QBurst,Technopark,Trivandrum,Kerala,India🇮🇳 #believer, seraching for Happy path Scenario, #githublover

JavaScript In Plain English

New JavaScript + Web Development articles every day.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store