Vue-test-utils: [Vuetify and vue-test-utils] TypeError: Cannot read property 'rtl' of undefined

Created on 3 Jan 2019  路  4Comments  路  Source: vuejs/vue-test-utils

Version

1.0.0-beta.28

Reproduction link

https://github.com/jpalvarez/vue-test-utils-issue

Steps to reproduce

Clone the repository
Run npm install then npm run unit

What is expected?

All tests passed

What is actually happening?

TypeError: Cannot read property 'rtl' of undefined


Additional version of packages
vue: 2.5.21
vuetify: 1.4.0
jest: 23.5.0

This is crazy. I have the same example running in codesandbox and it's run ok. But in the local computer no way.
https://codesandbox.io/s/yj8j9y6wnz

I am not aware of what is actually happening it would be great if anybody can help me.
Thanks!

Most helpful comment

I'm getting the same error when mounting a component with v-date-picker in it.
For me a __dirty__ temporary workaround was to use global Vue. No idea why, but it works. It seems to be an issue on vuetify's side.

All 4 comments

I'm getting the same error when mounting a component with v-date-picker in it.
For me a __dirty__ temporary workaround was to use global Vue. No idea why, but it works. It seems to be an issue on vuetify's side.

I'm getting the same error when mounting a component with v-date-picker in it.
For me a dirty temporary workaround was to use global Vue. No idea why, but it works. It seems to be an issue on vuetify's side.

Interesting......

Can you give me an example or link to see how to use a global vue for the dirty workaround, please?
:blush:

Just updated your test:

import { mount, createLocalVue } from "@vue/test-utils";
import Vue from "vue";
import Vuetify from "vuetify";
import TestComponent from "./TestComponent.vue";

Vue.use(Vuetify);

describe("TestComponent", () => {
  beforeEach(() => {
  });

  it("Mount", () => {
    const wrapper = mount(TestComponent);
    expect(wrapper.contains(".v-input.v-text-field")).toBeTruthy();
  });

  it("THEN should have a label", () => {
    const wrapper = mount(TestComponent);
    expect(wrapper.props().label).toBeDefined();
  });
});

This is an issue with Vuetify not being able to be installed on multiple Vue constructors, which means you can't use the localVue pattern. I believe this will be changed in Vuetify 2.0. Closing this since I don't think we can fix this issue on our end.

Was this page helpful?
0 / 5 - 0 ratings