can't use vuetify before rending a component
See original GitHub issueDescribe the bug
I would like to add vuetify
to vue before rending a component that uses vuetify components, so that the render is successful
To Reproduce
- create a component that uses
<v-btn>Ok</v-btn>
, making sure it renders correctly in browser (follow vuetify instructions) - write unit test for it. Classic example using the vue/testing-utils:
import { createLocalVue, mount, shallowMount } from '@vue/test-utils'
import Home from '@/components/Home.vue'
import vuetify from "vuetify"
describe('Home.vue', () => {
let wrapper;
let title = 'Weather App'
beforeEach(()=>{
const localVue = createLocalVue()
localVue.use(vuetify)
wrapper = shallowMount(Home, {
localVue // this is important
});
})
vuew/test-utils exposes createLocalVue, which testing library is not using. There is no way to pass localVue to the “render” method of testing-library.
- unit test code using the testing-library
import { render, fireEvent } from '@testing-library/vue'
// import { createLocalVue} from '@vue/test-utils'
import UserForm from "@/components/UserForm.vue";
// import vuetify from "vuetify"
test('properly handles v-model', async () => {
// const localVue = createLocalVue()
// localVue.use(vuetify)
const { getByLabelText, getByText } = render(UserForm) // no way to pass "localVue"
..
})
fails with
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Expected behavior Should be able to load vuetify to the vue before rending a component.
Related information:
@testing-library/vue
version: 4.1.0Vue
version: 2.6.10node
version: 11.xnpm
(oryarn
) version:
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Is there a Vue or Vuetify component that does not render ANY ...
I updated your code below. Essentially, all you need to do is to move the entire <v-navigation-drawer> component into your NavMenu. vue file ......
Read more >Frequently asked questions — Vuetify
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich ...
Read more >Rendering a list of Vue components - Learn web development
We'll use this to iterate through an array of to-do items and display them in our app in separate ToDoItem components. Adding some...
Read more >The correct way to force Vue to re-render a component
The best way to force Vue to re-render a component is to set a :key on the component. When you need the component...
Read more >Vue Components Not Rendering - Laracasts
My vue components are not rendering when I login into the home.blade.php file. ... '@/routes.js' //Load Plugins Vue.use(VueRouter) Vue.use(Vuetify) //Router ...
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
ok, I found the fix. The trick was to add
and then the
render()
works without warnings.@afontcu https://github.com/testing-library/vue-testing-library/issues/122