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

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

Create a new vue project: vue create test
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

add vuetify cd test && vue add vuetify
replace everything in /components/HelloWorld.vue with this:

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

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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 17 (3 by maintainers)

Most upvoted comments

Duplicate of #4861

localVue.use(Vuetify) breaks things.

+11

KaelWD on Jan 4, 2019

@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

misterabd on Jul 17, 2019

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());
    });
  });
});

martinmckenna on Jan 24, 2020

I have the same problem

valterbarros on May 7, 2019

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.

JosephSaw on Jul 20, 2020

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

builder7777 on Feb 28, 2019

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

builder7777 on Jan 4, 2019