[Bug Report] TypeError: Cannot read property 'rtl' of undefined when testing a component with v-date-picker.
See original GitHub issueVersions 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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:17 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Duplicate of #4861
localVue.use(Vuetify)
breaks things.@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:
This takes care of this problem. Similar feedback here https://github.com/vuejs/vue-test-utils/issues/1087#issuecomment-451553965