This tutorial covers:

  1. Creating and setting up a Vue.js application
  2. Writing automated tests for Vue components
  3. Setting up a continuous integration pipeline

One of the leading frameworks in the JavaScript community, Vue.js is a progressive framework for building reusable components for the web user interface. Its intuitive API and robust flexibility for handling front-end logic are just two of the reasons that Vue has been adopted by developers worldwide.

In this tutorial, I will lead you through building a simple listing application that shows the names and roles of users. I will show you how to write tests for the application. Finally, you will configure a continuous integration pipeline for automating testing.


For this tutorial, you will need:

Our tutorials are platform-agnostic, but use CircleCI as an example. If you don’t have a CircleCI account, sign up for a free one here.

Getting started

You will create a new Vue.js project by using Vue CLI. From the terminal run this command:

vue create vue-user-app

You will be prompted to answer a few questions. For this tutorial, use the responses shown here:

  • Please pick a preset: Manually select features
  • Check the features needed for your project: Babel, Linter, Unit
  • Choose a version of Vue.js that you want to start the project with 3.x
  • Pick a linter / formatter config: ESLint with error prevention only
  • Pick additional lint features: Lint on save
  • Pick a unit testing solution: Jest
  • Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
  • Save this as a preset for future projects? No

The Vue CLI will install the Vue application and its dependencies as you specified.

Go to the new project and run it using these commands:

cd vue-user-app

npm run serve

You can review the application in your browser at http://localhost:8080.

Vue homepage

This renders the default homepage for a new Vue.js application. You will change this by creating new reusable components in the next section of this tutorial.

Stop the application from running using CTRL + C.

Creating reusable components

Vue.js components contain three different sections for building web applications. They are:

  • <template></template>
  • <script></script>
  • <style></style>

These sections help create a proper structure for the view, business logic, and styling.

Creating user component

The first component that you will add to the application is for creating and listing users. This component houses a form with an input field to accept the name of a particular user. When the form is submitted, the details from the input field are pushed to a dummy users array created for testing purposes.

To begin, create a new file named UserList.vue within the ./src/components folder. Open this new file and paste this content:

  <div class="container">
    <div class="page-title">
      <h3>{{ message }}</h3>
    <div class="row">
        v-for="user in users"
        <div class="m-portlet m-portlet--full-height">
          <div class="m-portlet__body">
            <div class="tab-content">
              <div class="tab-pane active" id="m_widget4_tab1_content">
                <div class="m-widget4 m-widget4--progress">
                  <div class="m-widget4__item">
                    <div class="m-widget4__img m-widget4__img--pic">
                    <div class="m-widget4__info">
                      <span class="m-widget4__title"> {{ }} </span>
                      <br />
                      <span class="m-widget4__sub">
                        {{ user.title }}
                    <div class="m-widget4__ext">
                        class="btn btn-primary"
    <div class="row">
      <form id="form" @submit.prevent="createUser">
        <input id="new-user" v-model="newUser" class="form-control" />

This is the <template></template> section that renders the users list to the view. It also contains an input field to post the name of a new user.

Next, paste this code just after the end of the </template> tag:

export default {
  props: ["message"],
  data() {
    return {
      newUser: "",
      users: [
          id: 1,
          name: "Anna Strong",
          title: "Software Engineer",
          id: 2,
          name: "John Doe",
          title: "Technical Writer",
  methods: {
    createUser() {
        id: 3,
        name: this.newUser,
        title: "Crypto Expert",
      this.newUser = "";

    deleteUser(user) {
      const newList = this.users.filter((u) => !==;
      this.users = newList;

This defines a users array with dummy data to be rendered on the page. The createUser() method receives the details of a new user via the input field and pushes it to the users array. You also defined a method named deleteUser() which accepts a user object as a parameter and removes it from the user list when invoked.

Creating the header component

To create a component for the Header section of the view, go to ./src/components folder and create a new file named NavBar.vue. Paste this code into it:

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      class="collapse navbar-collapse justify-content-md-center"
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">
            Users Listing App <span class="sr-only">(current)</span></a

Updating the app component

Open the application’s AppComponent and update it by including the links to both the NavBar and UserList components. Replace its content with this:

    <NavBar />
    <UserList />
    <div class="container"></div>

import NavBar from "./components/NavBar.vue";
import UserList from "./components/UserList.vue";

export default {
  name: "App",
  components: { NavBar, UserList },

body {
  background: #eee;
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
.page-title {
  margin: 15px 15px;
.m-portlet {
  margin-bottom: 2.2rem;
.m-portlet {
  -webkit-box-shadow: 0 1px 15px 1px rgba(113, 106, 202, 0.08);
  -moz-box-shadow: 0 1px 15px 1px rgba(113, 106, 202, 0.08);
  box-shadow: 0 1px 15px 1px rgba(113, 106, 202, 0.08);
  background-color: #fff;
.m-portlet .m-portlet__head {
  border-bottom: 1px solid #ebedf2;
.m-widget4 .m-widget4__item {
  display: table;
  padding-top: 1.15rem;
  padding-bottom: 1.25rem;
.m-widget4 .m-widget4__item .m-widget4__img {
  display: table-cell;
  vertical-align: middle;
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--logo img {
  width: 3.5rem;
  border-radius: 50%;
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--pic img {
  width: 4rem;
  border-radius: 50%;
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--icon img {
  width: 2.1rem;
.m-widget4 .m-widget4__item .m-widget4__info {
  display: table-cell;
  width: 100%;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  font-size: 1rem;
  vertical-align: middle;
.m-widget4 .m-widget4__item .m-widget4__info .m-widget4__title {
  font-size: 1rem;
  font-weight: bold;
.m-widget4.m-widget4--progress .m-widget4__info {
  width: 50%;

This includes a <style></style> section to include styling for the app.

Include Bootstrap

Open the index.html file within the public folder and include the CDN file for Bootstrap. This is just to give the page some default style.

<!DOCTYPE html>
<html lang="">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
    <div id="app"></div>
    <!-- built files will be auto injected -->

Now, run the application again with npm run serve. Visit https://localhost:8080. User Listing App

Now that your application is up and running you can start unit testing for the UserList component.

Unit testing of Vue.js component

There are many, many testing frameworks for JavaScript applications. Jest stands out as one of the most popular. For Vue.js, Vue Test Utils (VTU) is the preferred testing library. That makes sense, because the VTU testing library is built on Jest. It was designed to simplify testing Vue.js components by providing utility functions.

When you created this project and selected Jest as the unit testing solution, Vue CLI installed vue-test-utils, jest, and other testing libraries. The following directory was also created:

  • test/unit: This directory will house all the unit tests. Jest will search for your unit tests files here once the command for testing is issued.

Writing tests for the application

In this section, we will write the unit test for the UserList component. In that component we want to:

  • Mount the component and check that it can render props passed to it.
  • Find elements within the component and render the user list.
  • Submit a form, then create a new user and add it to the list of existing users.

To begin, go to the test/unit folder and rename the example.spec.js file to user.spec.js. Open the file and replace its content with this:

import { mount } from "@vue/test-utils";
import UserList from "@/components/UserList.vue";

describe("User List component unit tests: ", () => {
  it("renders props when passed", () => {
    const message = "new message";
    const wrapper = mount(UserList, {
      props: { message },

  test("Renders the list", () => {
    const wrapper = mount(UserList);
    const name = "Anna Strong";
    const user = wrapper.get('[data-user="user"]');

  test("creates a user", async () => {
    const wrapper = mount(UserList);
    const newName = "John Doe";
    await wrapper.get('[id="new-user"]').setValue(newName);
    await wrapper.get('[id="form"]').trigger("submit");

Within this file, we imported a function named mount from vue-test-utils library to help us mount an instance of the UserList component.

We started by writing a test to assert that the component can render a prop passed into it from a parent component. Next, we targeted the data attribute within the view of the UserList component, ensured that it contains a specific name of one of the users, and that it renders the default length from the users array.

Lastly, we created a test function to ensure that a new user can be created within the component.

Running the test locally

To confirm that the defined tests are passing, enter this command from the terminal:

npm run test:unit

This is the terminal output:

> vue-user-app@0.1.0 test:unit
> vue-cli-service test:unit

 PASS  tests/unit/user.spec.js
  User List component unit tests:
    ✓ renders props when passed (33 ms)
    ✓ Renders the list (19 ms)
    ✓ creates a user (27 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.924 s, estimated 1 s
Ran all test suites.

Terminal test result

In the next section, you will automate this test using CircleCI.

Automating the test

In this section you will create a configuration file for your project’s continuous integration pipeline.

Create a .circleci folder at the root of the project and create a new file named config.yml within it. Add this content:

version: 2.1
    working_directory: ~/project
      - image: cimg/node:17.4.0
      - checkout
      - run:
          name: Update NPM
          command: "sudo npm install -g npm"
      - restore_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
      - run:
          name: Install Dependencies
          command: npm install --legacy-peer-deps
      - save_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
            - ./node_modules
      - run:
          name: Run test for the application
          command: npm run test:unit
      - build-and-test

This file defines a job to build and run the test command for your project. This job:

  • Pulls in the cimg/node:17.4.0 Docker image from the CircleCI Docker image registry
  • Uses the image to install all the project’s dependencies
  • Runs the test

Now that the configuration file has been properly set up, you need to set up a repository on GitHub and link the project to CircleCI. Review Pushing your project to GitHub for step-by-step instructions.

Setting up the project on CircleCI

Log in to your CircleCI account with the linked GitHub account to view all your repositories on the projects’ dashboard. Search for the vue-user-app project and click Set Up Project to continue.

Select project

You will be prompted to choose a configuration file. Select the .circleci/config.yml file in your repo and enter the name of the branch where your code is stored. Click Set Up Project to start the workflow.

Select config file

This will initialize the workflow and run the test for your project.

Successful workflow


In this tutorial, we built a listing application with Vue.js and covered the required steps to write a unit test for its component. We then used CircleCI infrastructure to configure a continuous integration pipeline to automate the test.

I hope that you found this tutorial helpful. Check here on GitHub for the complete source code for the project built in this guide.

Oluyemi is a tech enthusiast with a background in Telecommunication Engineering. With a keen interest in solving day-to-day problems encountered by users, he ventured into programming and has since directed his problem solving skills at building software for both web and mobile. A full stack software engineer with a passion for sharing knowledge, Oluyemi has published a good number of technical articles and blog posts on several blogs around the world. Being tech savvy, his hobbies include trying out new programming languages and frameworks.

Read more posts by Olususi Oluyemi