AppDividend
Latest Code Tutorials

Vue js Testing Tutorial With Example From Scratch

0 637

Get real time updates directly on you device, subscribe now.

Vue js Testing Tutorial With Example From Scratch is today’s leading topic. This tutorial is for users familiar with unit testing. For every project, it is necessary to go through everything in our applications and check that it all works as expected. If you are making small web applications, then it is easy to test the application. But when it becomes larger and larger, then it becomes tedious to test minor components of the applications. In that scenario, We need to use automated testing that checks every time we change the code to assure that our code does not break the application.

Vue js Testing Tutorial

First, we will install the Vue.js and then start how to test the application.

Step 1: Install Vue.js

Type the following command.

npm install -g vue-cli
vue init webpack vuejs-testing

In the process of installing vue.js, you will find one choice, which is the following.

Pick a test runner

Jest

Karma and Mocha

We will choose Karma and Mocha as the test runner. So it will automatically install all the dependencies for us.

After installing all the dependencies, you can see the folder structure looks like this.

 

Vue js Unit Testing

Related Posts
1 of 10

You can see that test folder is there. In that unit folder and in that specs folder and in that there is already HelloWorld.spec.js test file is there.

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

Now, you can run the test with the following command.

npm run unit

Unit testing in Vue

Step 2: Write our own test.

First, we need to make a component that we can test. So go to the src  >>  components  >>  MemberList.vue file. The job of the component is just to display all the list of the members.

// MemberList.vue

<template>
   <div>
    <h1>Members List</h1>
    <br/>
    <ul>
      <li v-for="member in members" :key="member">{{ member }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
  data () {
    return {
      members: ['Jeff', 'Bill', 'Warren', "Larry", "Koch"],
    }
  }
}
</script>

Include this component in the App.vue file.

// App.vue

<template>
  <div id="app">
    <MemberList />
  </div>
</template>

<script>
import MemberList from './components/MemberList'

export default {
  name: 'App',
  components: {
    MemberList
  }
}
</script>

Now, we need to write the test for this component. So go to the test  >>  unit  >>  specs  >>  MemberList.spec.js file.

// MemberList.spec.js

import Vue from 'vue'
import MemberList from '@/components/MemberList'

describe('MemberList.vue', () => {
  it('should contain member in the member list', () => {
    const Constructor = Vue.extend(MemberList)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).to.contain('Warren');
  })
})

Now our main aim is to check whether the Warren member is on the list or not. Technically, It is on the list because we have defined the hardcore array in the MemberList.vue component. So the test will pass.

We extend Vue and then mount our component. It is essential to attach the element as this is the bit that renders the HTML in our template. It essentially means that the HTML gets built and the variables in our template (e.g. {{ member }}) get filled with data, enabling us to later have access to the HTML (via $el). Now rerun the test.

npm run unit

Vue js testing with Mocha

This time, we can see that our two tests are passing. Now, if you pass the member name which is not in the array list, then you can see that the test will fail.

Unit test using Mocha and Chai in Vue.js

So this is how you can perform the Unit test using Mocha and Chai in Vue.js. Finally, our Vue js Testing Tutorial With Example From Scratch is over.

Leave A Reply

Your email address will not be published.