question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:17 (2 by maintainers)

github_iconTop GitHub Comments

11reactions
KaelWDcommented, Jan 4, 2019

Duplicate of #4861

localVue.use(Vuetify) breaks things.

5reactions
misterabdcommented, Jul 17, 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeError: Cannot read property 'rtl' of undefined
This is happening because of the --inline-vue flag. It tells Vue to create its own instance and bundle it inside your library (see...
Read more >
TypeError: Cannot read property 'rtl' of undefined-vuetify.js
This is happening because of the --inline-vue flag. It tells Vue to create its own instance and bundle it inside your library (see...
Read more >
cannot read property of undefined (reading 'subscribe') unit test
vuetifyjs/vuetify[Bug Report] TypeError: Cannot read property 'rtl' of undefined when testing a component with v-date-picker.#6046.
Read more >
Unit Testing in React: Full Guide on Jest and Enzyme Testing
Discover how to start and proceed with the testing of React components with Enzyme and Jest if you do not have enough experience...
Read more >
Known Issues and Important Changes in UI for ASP.NET AJAX
JavaScript error: Uncaught TypeError: Cannot read property '_popupButton' of null JS error when clicking OK or Cancel in the the month/year dialog. You...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found