Vue-test-utils: shallowMount : TypeError: Cannot read property 'breakpoint' of undefined

[chauriya]

Version

1.0.0-beta.25

Reproduction link

https://codesandbox.io/s/8xrrjpy349

Steps to reproduce

1. Copy sample code setup from https://codesandbox.io/s/8xrrjpy349
2. Run npm install
3. Run npm run test test execution will start and it will throw an error TypeError: Cannot read property 'breakpoint' of undefined

What is expected?

Test should run without error as given in documents https://vue-test-utils.vuejs.org/api/shallowMount.html

What is actually happening?

Returning TypeError

---

1. project is setup using nuxt and vuetify.js
2. Added package.json in code setup with will give competed jest and vue-test-utils configuration information
3. Only bare minimum files are added to code sample

[eddyerburgh]

Only components are stubbed by shallowMount.

You're accessing $vuetify.breakpoint in the template of your component, which isn't stubbed by Vue Test Utils.

You need to add instance method, you need to use the mocks mounting option:

const wrapper = shallowMount(Titlebar, {
  mocks: {
    $vuetify: { breakpoint: {} }
  }
})

[chauriya]

@eddyerburgh Thanks!!

[MannyDiera]

I'm working on a project with Vuetify and Typescript and no matter what I try, I always get
TypeError: Cannot read property 'smAndUp' of undefined.

Have added the vue.use(Vuetify);

Also tried adding the $vuetify object inside mocks but no luck. Anyone run into this issue?

[exbarboss]

We are getting TypeError: Cannot read property 'mobileBreakpoint' of undefined in shallowMount.

[hodovani]

@exbarboss Could you please try to add vuetify to the mock

import Vuetify from 'vuetify';

const vuetify = new Vuetify();

const wrapper = shallowMount(VueComponentName, {
  mocks: {
    ...
  },
  vuetify,
});

This works for me.

[exbarboss]

@hodovani Hi! Just tried and it is not recognizing any Vuetify components, but I think I was able to make it work:

import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vuetify from 'vuetify';
import SideNav from '@/components/layout/SideNav.vue';

const vuetify = new Vuetify();

Vue.use(Vuetify); // <= Tried to pass here constant from above and tests are failing

describe('SideNav.vue component tests', () => {
    test('is rendering correctly', () => {
        const wrapper = shallowMount(SideNav, {
            propsData: {
                show: true,
            },
            vuetify,
        });
        expect(wrapper.element).toMatchSnapshot();
    });

    it('is Vue component', () => {
        const wrapper = shallowMount(SideNav, {
            propsData: {
                show: true,
            },
            vuetify,
        });

        expect(wrapper.isVueInstance());
    });
});

@hodovani Thanks!

[dipesh-wadhwa]

@hodovani @exbarboss Thanks. Your suggestion works for me.