Vuetify: [Bug Report] TypeError: Cannot read property 'rtl' of undefined when testing a component with v-date-picker.

[builder7777]

Versions and Environment

Vuetify: 1.4.0
Vue: 2.5.21
Browsers: Chrome 70.0.3538.110
OS: Mac OS 10.13.6

Steps to reproduce

1. Create a new vue project:
   vue create test

2. pick these options:

Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

1. add vuetify
   cd test && vue add vuetify

2. replace everything in /components/HelloWorld.vue with this:

<template>
    <v-date-picker/>
</template>

1. replace /tests/unit/example.spec.ts with:

import { mount, createLocalVue } from "@vue/test-utils";
import Vuetify from "vuetify";
import HelloWorld from "../../src/components/HelloWorld.vue";

const localVue = createLocalVue();
localVue.use(Vuetify);

describe("HelloWorld", () => {
  it("Mount", () => {
    const wrapper = mount(HelloWorld, { localVue });
    expect(wrapper.contains("v-date-picker")).toBeTruthy();
  });
});

Expected Behavior

Test passes

Actual Behavior

HelloWorld › Mount
TypeError: Cannot read property 'rtl' of undefined

Reproduction Link

https://codesandbox.io/s/l2jzlrq5zl

Other comments

This only works on a local machine, cannot be reproduced on codesandbox or other platform.

[KaelWD]

Duplicate of #4861

localVue.use(Vuetify) breaks things.

[builder7777]

using global Vue.use(vuetify) causes other problems, not to mention the guide calling for localVue

[aztlan2k]

So I'm seeing this exact issue. If i use the plugin on the localVue instance, i get this problem. If i use it on the global instance i get a different error that's just as perplexing.

TypeError: Cannot read property '_transitionClasses' of undefined

searching down either rabbit hole seems to lead me nowhere. :thinking:

If comes across this and figures this out, I'd love to hear how you did it. :+1:

[builder7777]

@aztlan2k I ended up solving it with localVue and using shallowMount instead of full mount

[aztlan2k]

Thanks @builder7777. Unfortunately for me, using shallowMount() just causes other warnings about components not being registered, for example,

  console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: Unknown custom element: <v-tabs> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    found in

    ---> <Anonymous>
           <Root>

and since subcomponents are stubbed, triggering button clicks (trigger('click')) doesn't seem to work for me. That's why I was trying to do a full mount().

[builder7777]

In some cases you have to pass sync:false to the component when you're doing a shallow mount (i have no idea why, but it fixes some bugs). and you still have to do localVue.use(vuetify) in order to have vuetify's components registered when you mount yours. as for trigger('click') i emit the event directly on the element instead of simulating a click: wrapper.find('[test-id="CloseDialogBtn"]').vm.$emit('click') as an example.

[aztlan2k]

Thanks @builder7777. Took some work but I finally got things working. I ended up using mount() with sync: false and still managed to use trigger('click'). Things seem a bit fragile unfortunately, so I'm hoping I don't end up running into further problems. I appreciate the advice.

[garyo]

I have the same issue -- I need to use mount() so my component mounts its v-textarea. Tried mount(MyComponent, { localVue, propsData: myProps, sync: false }) but then I get "Multiple instances of Vue detected" and various other tests fail. I ended up just skipping the tests that require full mount().

[valterbarros]

I have the same problem

[Stoom]

Is there some way to stub it out? I've tried to do localVue.prototype.$vuetify.rtl = false but it seems to not make a difference...

[misterabd]

@Stoom
The error refers to not being able to find 'rtl' on 'undefined' i.e. $vuetify so stubbing 'rtl' would have no effect as in the stack trace the problem stems from the instance of $vuetify not being able to play nice with the localVue constructor.

I've imported Vue to only use it with Vuetify and build the remainder of the tests with localVue:

Vue.use(Vuetify)
localVue.use(Vuex)

This takes care of this problem. Similar feedback here https://github.com/vuejs/vue-test-utils/issues/1087#issuecomment-451553965

[Stoom]

For anyone looking for a slightly better way to escape this problem, I noticed that it's only on the first test run. I've decided to use a setup.js with mocha and simply just define the following:

const Vue = require('vue');

Vue.config.silent = true;
Vue.prototype.$vuetify = { rtl: false };

[HamadaFMahdi]

Another option people can consider is using shallowMount and testing what you can then writing some e2e tests (e.g. using Cypress) to cover the tests which require multiple components (children etc.) to be available.

[martinmckenna]

this issue should not be closed, I'm still having issues testing components that rely on properties that don't exist.

Error testing a component using VDialog

console.error jest.dropmultivueinstancewarning.js:7
    [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'smAndDown' of undefined"

    found in

    ---> <VDialog>
           <AppModal>

my code:

import { createLocalVue, mount } from '@vue/test-utils';
import vuetify from 'vuetify';
import QP6Modal from '../index';

const localVue = createLocalVue();
localVue.use(vuetify);

const propsData = {
  open: true,
};

describe('UI', () => {
  describe('Error States', () => {
    it('should do the thing', () => {
      document.body.setAttribute('data-app', true);
      const component = mount(QP6Modal, {
        localVue,
        propsData,
      });

      console.log(component.html());
    });
  });
});

[davidmoseler]

this issue should not be closed, I'm still having issues testing components that rely on properties that don't exist.

Error testing a component using VDialog

console.error jest.dropmultivueinstancewarning.js:7
    [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'smAndDown' of undefined"

    found in

    ---> <VDialog>
           <AppModal>

my code:

import { createLocalVue, mount } from '@vue/test-utils';
import vuetify from 'vuetify';
import QP6Modal from '../index';

const localVue = createLocalVue();
localVue.use(vuetify);

const propsData = {
  open: true,
};

describe('UI', () => {
  describe('Error States', () => {
    it('should do the thing', () => {
      document.body.setAttribute('data-app', true);
      const component = mount(QP6Modal, {
        localVue,
        propsData,
      });

      console.log(component.html());
    });
  });
});

Exact same problem here. Any time a dialog opens during testing, things break badly.

[JosephSaw]

Any update on this?

I am also having this issue but it only happens once I deploy to a server, everything runs smoothly in my localhost.

[KaelWD]

https://github.com/vuetifyjs/vuetify/discussions/4068#discussioncomment-24984