testing vuetify components

CategoryIndex.spec.js

import { mount } from '@vue/test-utils';
import Vue from 'vue';
import CategoryIndex from '../../../src/components/CategoryIndex.vue';

describe('CategoryIndex', function () {
  let wrp;

  beforeEach(() => {
    wrp = mount(CategoryIndex);
  });

  it('has a mounted hook', () => {
    expect(typeof CategoryIndex.mounted).toBe('function');
  });

  it('has an h2 tag with correct class and title', () => {
    expect(wrp.find('h2.component-title').text()).toEqual('Categorias - Listagem');
  });

  it('has element with default css class for index/list stuff', () => {

    console.info(wrp.find('.index-of-things'));

    Vue.nextTick(() => {
      console.info(wrp.find('.index-of-things'));
    });
  });
});

CategoryIndex.vue

<template>
  <div class="category category-index">
    <h2 class="component-title">Categorias - Listagem</h2>

    <v-btn class="js-btn-add-category" :to="{ name: 'category-new' }">
      <v-icon>add</v-icon>
      <span>Cadastrar Categoria</span>
    </v-btn>

    <v-container grid-list-md index-of-things>
      <v-layout category-index-row row wrap align-center
        v-for="(category, idx) in categories" :key="idx">
        <v-flex xs12 sm6>
          <div>
            {{ category.name }}
          </div>
        </v-flex>
        <v-flex xs12 sm6>
          <div>
            <v-btn color="blue" :to="{ name: 'category-edit', params: { category_id: category.id }}">
              <v-icon>edit</v-icon>
              <span>Editar</span>
            </v-btn>
          </div>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data () {
    return {
      categories: [],
    };
  },

  mounted () {
    axios.get('/categories')
      .then(res => {
        if ('OK' === res.statusText) {
          this.categories = res.data;
        }
      }).catch(err => {
        //console.warn(err);
      });
  }
};
</script>