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.

can't use vuetify before rending a component

See original GitHub issue

Describe 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

  1. create a component that uses <v-btn>Ok</v-btn>, making sure it renders correctly in browser (follow vuetify instructions)
  2. 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.

  1. 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.0
  • Vue version: 2.6.10
  • node version: 11.x
  • npm (or yarn) version:

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
nikravicommented, Nov 15, 2019

ok, I found the fix. The trick was to add

import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);

and then the render() works without warnings.

Read more comments on GitHub >

github_iconTop 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 >

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