A beginners guide to Vue unit testing with Jest

we are going to learn about how to write unit tests for vue components using jestand vue-test-utils.

What is Jest?

Jest is a JavaScript unit testing framework created by facebook which includes a lot of featureslike snapshot testing, code coverage, etc.

Vue-test-utils

The vue-test-utils library provides us helper methods by using that we can mount and interact with the Vue components easily.

Getting started

First, we are going to create a new vue project by using Vue CLI.

Open your terminal and run the following command.

vue create vue-testing

It will prompt with two options, select manually select features and hit enter.

Vue CLI v3.0.0? Please pick a preset:  default (babel, eslint)❯ Manually select features

Now, you need to select unit testing option by using the Space key.

Vue CLI v3.0.0? Please pick a preset: Manually select features? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter❯◯ Unit Testing ◯ E2E Testing

choose ESLint with error prevention only option and hit enter.

Vue CLI v3.0.0? Please pick a preset: Manually select features? Check the features needed for your project: Babel, Linter, Unit? Pick a linter / formatter config: (Use arrow keys)❯ ESLint with error prevention only  ESLint + Airbnb config  ESLint + Standard config  ESLint + Prettier

Now, choose Jest option and hit enter.

Vue CLI v3.0.0? Please pick a preset: Manually select features? Check the features needed for your project: Babel, Linter, Unit? Pick a linter / formatter config: Basic? Pick additional lint features: Lint on save? Pick a unit testing solution:  Mocha + Chai❯ Jest

It will ask for where to place configurations choose package.json.

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?  In dedicated config files❯ In package.json

Final question type N and hit enter and vue cli starts creating our project with jest and vue-test-utils.

Run the below command in your terminal to change your current working directory.

cd vue-testing

Now open your vue-testing project in your favorite code editor, you will see a tests folder which is generated by the vue cli delete this folder.

Remove everything from a App.vue file and add the below code.

<template>  <div id="app">    <h1>{{msg}}</h1>  </div></template><script>export default {  data: function() {    return {      msg: "Hello"    };  }};</script>

This is our App component with h1 element and msg data property.

Writing our first unit test

Now we are writing a unit test for our App component.

create a new folder called __tests__ in your root directory, because by default jest looks for __tests__ folder in your vue project and runs all tests present inside that folder.

create a new file called App.test.js inside __tests__folder and add the below code.

.test.js is an file extension.

import App from '../src/App.vue'import { mount } from '@vue/test-utils';describe('Testing App component', () => {    it('checks textcontent to Hello ', () => {        const wrapper = mount(App); //returns instance of the component.        //accessing dom element and checks textcontent        expect(wrapper.element.textContent).toBe('Hello');    })})

In the above code, we first imported the App component and mount method.

The mount method takes a component as an argument and returns its vue instance and dom node.

Let’s run our test by using the below command.

npm run unit:test

Now you will see a pass check like in the below image.

Watch mode

Now if we create another test in our vue app or if we update our existing tests, we need to re-run the test command again and again, by using watch mode jest automatically re-run the tests if something has changed in the test files.

Open your package.json file and replace your test:unit script with below script.

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

Writing our second test

Let’s write our second test.

import App from '../src/App.vue'import { mount } from '@vue/test-utils';describe('Testing App component', () =&gt; {    it('checks textcontent to Hello ', () =&gt; {        const wrapper = mount(App);        expect(wrapper.element.textContent).toBe('Hello');    })    it('checks textcontent to Hi', () =&gt; {        const wrapper = mount(App, {            data: function () {                return {                    msg<span>: "Hi" // replacing msg property value with 'Hi'                }            }        })        expect(wrapper.element.textContent).toBe('HI');    })})

In our second test, we are checking for textContent to be Hi by passing a data option as a second argument to mount method.

Now in your terminal, you’ll see two tests are passing.

Further, you can check out vue-test-utils website to know more about helper methods.