Vuetify Jest test for simple <v-data-table>

Question

I can not write Jest test for my simple Component that has only one v-data-table Vuetify component. I try to get mounted component but get some errors " [Vue warn]: Error in render: "TypeError: Cannot read property 'width' of undefined found in ---> ". I am a new one in Jest testing, so this problems drives me crazy ...

Here is my test file. Test component is taken from Vuetify doc page...

import { mount } from '@vue/test-utils';
import vuetify from 'vuetify';
import Vue from 'vue';
import Vuex from 'vuex';
import Test from '../test';

Vue.use(vuetify);
Vue.use(Vuex);

describe('VehiclePassesList', () => {
  let wrapper = null;
  beforeEach(() => {
    wrapper = mount(Test);
  });

  it('renders title', () => {
    console.log('PAGE: ', wrapper.html());
    expect(true).toBe(true);
  });
});

Answer 1

I stumbled upon the same issue for a couple of hours. After a while, I remembered the upgrade notes for Vuetify 2.x included an example on how to use Vuetify in unit tests and I realized that I was actually not doing that in my tests.

https://vuetifyjs.com/en/getting-started/releases-and-migrations

If you check the unit tests section you can see that they create a new instance of Vuetify and then they pass it to the mount function:

  beforeEach(() => {
    vuetify = new Vuetify(...)
  })

  it('should...', () => {
    const wrapper = mount(Component, {
      localVue,
      vuetify
    })
  })

I am not sure if this is helpful, but in my case, this seems to resolve the TypeError.

   TypeError: Cannot read property 'width' of undefined

Answer 2

You can also stub the VDataTable component :

const VDataTable = {
  props: ['items', 'loading'],
  template: '<div><slot :item="items[0]" name="item.name" /></div>'
}

shallowMount(MyComponentToTest, {
  stubs: {
    VDataTable
  }
})