Photo by David Travis on Unsplash

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

  1. What we are going to build in this blog.
  2. What is unit testing?
  3. Brief about vue-test-utils.
  4. What is Jest?
  5. Setup the application
  6. Add the test specs.
  7. Add coverage code for Jest.
  8. Add Travis Configuration.
  9. Add coveralls to the application.
  10. Complete the test coverage to 100percent.
  11. Display the coverage as a badge.
  12. 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.

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.

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,

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.

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.

4. Complete all the tests

The full tests become like this,

and the execution output becomes using the watch mode,

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.

Now, run the test suite again,

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,

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

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

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

now, wait for the execution,

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

Github repo added with Travis badge,

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

2. Add the coveralls npm package.

Install the coveralls,

3. Update the travis.yml

That will send the coverage to our coveralls.io.

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

  1. App.vue
  2. ButtonCount.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,

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

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,

Copy the badge and update it to the GitHub Repo.

Awesome, It is now updated in GitHub repo.

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.

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

Thanks for reading!

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