Vuetify: [Bug Report] Unable to mock $vuetify in unit tests

[Bastczuak]

Environment

Vuetify Version: 2.2.11
Vue Version: 2.6.11
Browsers: Safari 13.1
OS: Mac OS 10.14.6

Steps to reproduce

1. yarn
2. yarn test:unit
3. open file example.spec.js and see snapshot result.

Expected Behavior

I want to mock instance variable $vuetify.breakpoint.smAndDown by providing a mock like described in the docu https://vuetifyjs.com/en/getting-started/unit-testing/ and https://vue-test-utils.vuejs.org/api/options.html#mocks. I installed Vuetify like described in a config file setup.jest.js and configured jest to use it.

I expected that in my test that mocked smAndDown is set to true.

Actual Behavior

$vuetify instance variable is not mockable. The actual implementation is not overwritten by passing a mock object either to new Vuetify() nor to shallowMount or mount.

Reproduction Link

https://github.com/Bastczuak/vuetify-mock-issue

Other comments

Please fix the issue creator! I was not able to create an issue in Chrome browser because after submitting a new issue I got redirected to my account email settings.

[benjamindedonder]

I am experiencing this issue as well.
In my case I wish to mock $vuetify.goTo and test if it has been called.

Reproduction: https://github.com/benjamindedonder/vuetify-mock-issue

[johnleider]

Ugh, sorry about that. The mocking example is absolutely not correct. Admittedly I haven't tested in a regular Vue app in awhile and I'm not happy where our testing information is at. Unfortunately, we have extremely limited bandwidth at the moment. This is on our radar and something that is 100% going to be easier to support for v3.

Just to clarify, the reason this issue exists is because of how we support Typescript and has been around for awhile. I greatly appreciate your patience and any help is appreciated.

If you have any additional questions, please reach out to us in our Discord community.

[Bastczuak]

@johnleider I tried to understand what the problem is, but ufff, this project is so big and advanced, I'm not sure if I can help here.

[ElVisPL]

@johnleider is there any workaround?
I tried doing something similar to https://github.com/vuetifyjs/vuetify/blob/c90fc9d9aa5faaf5d0b24056374f8adcbf5781d5/packages/docs/src/snippets/js/testing_mock_vuetify_services.txt
using es5 breakpoint.js file but no luck

[johnleider]

fixed in d795b1e51

[ElVisPL]

https://github.com/vuetifyjs/vuetify/issues/11388
Still doesn't work when mocking breakpoint

[Bastczuak]

yep, it really doesn't work. Please reopen.

[Bastczuak]

This is for my people who are coming from google. After reading code and trying around, I now have a working solution for mocking vuetify services in unit tests. But be careful, I have no idea if it works with typescript! Here are some examples.

    const breakpoint = {
      init: jest.fn(),
      framework: {},
      smAndDown: true,
    }
    const vuetify = new Vuetify()
    vuetify.framework.breakpoint = breakpoint
    const wrapper = shallowMount(Component, {
      vuetify,
    })

    const goTo = jest.fn()
    goTo.init = jest.fn()
    goTo.framework = {}
    const vuetify = new Vuetify()
    vuetify.framework.goTo = goTo

    const wrapper = shallowMount(Component, {
      vuetify,
    })

Your welcome @ ElVisPL @benjamindedonder.

@johnleider can we add this to the official documentation?