Testing Vue with Jest

Published on December 10, 2018
Testing Vue with Jest

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

The importance of testing Vue.js applications shouldn’t be understated and Jest makes this easier than ever.

As we’re inside of the Vue.js environment, we’ll also be using vue-test-utils to make it easy when interfacing with native Vue elements.

Project Setup

Setting up our testing environment is easy. In previous versions of the Vue.js CLI, we had to do this manually, but now it comes as standard with the project generation.

Ensure you have the Vue.js CLI installed on your machine by doing the following:

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

# Ensure you have the appropriate version (3.x.x>) with
$ vue --version

Create a new project with the CLI with the following:

$ vue create testing-vue

> Manually select features
> Babel, Linter / Preformatter, Unit Testing
> ESLint (your preference)
> Lint on save
> Jest
> In dedicated config files

$ cd testing-vue
$ code .
$ npm run serve 


Now that we’ve generated our Vue project with Jest, we can navigate to the tests/unit folder. Inside of this folder, we have a file named example.spec.js:

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }

As referenced inside of our package.json, we can run this unit test by typing:

$ npm run test:unit

This gives us the results of all of the unit tests within our project. At the moment, everything passes as expected.

We can add the --watch flag to this to keep this running in the background as we create and edit new tests.

"scripts": {
  "test:unit": "vue-cli-service test:unit --watch"

Unit Testing

In our small example, we’ll create a new component named FancyHeading. This will represent a heading that can be customized with a title and color using props.

  <h1 :style="headingStyles">{{title}}</h1>

export default {
  data() {
    return {
      headingStyles: {
        color: this.color
  props: ["title", "color"]

In order to unit test this, we’ll need to make a corresponding FancyHeading.spec.js file within the tests/unit directory.

A test suite can be thought of as a collection of tests centered around testing a particular module or functionality.

Let’s take a look at our first unit test with Jest and Vue. We’ll investigate it line by line:

import Vue from 'vue';
import FancyHeading from '@/components/FancyHeading.vue';

function mountComponentWithProps (Component, propsData) {
  const Constructor = Vue.extend(Component);
  const vm = new Constructor({

  return vm.$el;

describe('FancyHeading.vue', () => {
  it('should be the correct color', () => {
    const headingData = mountComponentWithProps(FancyHeading, { color: 'red' });
    const styleData = headingData.style.getPropertyValue('color');



  it('should have the correct title', () => {
    const headingData = mountComponentWithProps(FancyHeading, { title: 'Hello, Vue!' });
    const titleData = headingData.textContent;

    expect(titleData).toEqual('Hello, Vue!');
  1. We start off by importing Vue and the necessary components that we want to test.
  2. We use describe to encapsulate numerous unit tests surrounding our FancyHeading component.
  3. Each unit test is created with the it function, firstly providing a description of exactly what we’re testing, followed by a function.
  4. In our first assertion, It must have the correct color, we’re mounting our component to a new Vue instance with mountComponentWithProps.
  5. We’re then able to create a variable, styleData which contains what we expect to receive from our test.
  6. Finally, we assert that this is true by using expect. If we check our terminal with $ npm run test:unit --watch, we’ll see a PASS for this unit test.

We take a similar approach when testing the title of our heading in the second unit test.

For more information on testing with Vue.js, check out the Karma and Mocha guide by Joshua Bemenderfer.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel