can't use vuetify before rending a component

[nikravi]

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.

3. 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:

[nikravi]

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.

[afontcu]

For future readers: there's a test example here:

https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuetify.js

[mediafreakch]

@afontcu I have the problem that with your example, child components of the tested component don't have access to store anymore. For them it is undefined. Any idea how to fix?

[afontcu]

Hi @mediafreakch! Would you mind opening up a new issue with some reproduction links or repos?

Thank you! 🙌

[mediafreakch]

@afontcu #122