Writing tests for Vue.js components

Let's move on to write the test specs for our Vue.js components. We will start with the simplest component, which is the Contact.vue page.

This is what we have in our Contact.vue page so far:

<template>
  <v-layout>
    this is contact
  </v-layout>
</template>

Let's modify the component a little bit to make the tests more understandable. Replace the contents in Contact.vue with the following code:

<template>
  <div class="contact">
    <h1>this is contact</h1>
  </div>
</template>

Now, let's first create the necessary folder and file to write our tests. Create a file called Contact.spec.js inside the test/unit/specs directory and add the following contents to it:

import Vue from 'vue';
import Contact from '@/components/Contact';

describe('Contact.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Contact);
    const vm = new Constructor().$mount(...