Vuetify: [Bug Report] Error in render: "TypeError: Cannot read property 'width' of undefined"

[sean-hill]

Environment

Vuetify Version: 2.1.16
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.117
OS: Mac OS 10.15.2

Steps to reproduce

Test File

import { mount } from '@vue/test-utils'
import Vue from 'vue'
import Vuetify from 'vuetify'
import TabsTest from '@/views/dashboard/Todos/TabsTest.vue'
Vue.use(Vuetify)

describe('WIP TabsTest.vue', () => {
  it('should render', async () => {
    const wrapper = mount(TabsTest, {})
    expect(true).toBeTruthy()
  })
})

Component File

<template>
  <v-tabs v-model="tab" background-color="transparent" slider-color="white">
    <v-tab class="mr-3 pl-0">
      <v-icon class="mr-2">mdi-clipboard-check-multiple</v-icon>Test
    </v-tab>
  </v-tabs>
</template>

<script>
export default {
  name: 'TabsTest',
  data() {
    return {
      tab: 0
    }
  }
}
</script>

Expected Behavior

That it should pass the test.

Actual Behavior

 FAIL  tests/unit/views/dashboard/Todos/TabsTest.spec.js (6.238s)
  ● Console

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Error in render: "TypeError: Cannot read property 'width' of undefined"

      found in

      ---> <VTabsBar>
             <VTabs>
               <TabsTest>
                 <Root>
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
      TypeError: Cannot read property 'width' of undefined
          at VueComponent.isMobile (/Users/sehill/Development/repos/mpowr/ui/node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:121:39)
          at Watcher.get (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at Watcher.evaluate (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4570:21)
          at VueComponent.computedGetter [as isMobile] (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4819:17)
          at VueComponent.hasAffixes (/Users/sehill/Development/repos/mpowr/ui/node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:105:35)
          at Watcher.get (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at Watcher.evaluate (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4570:21)
          at VueComponent.computedGetter [as hasAffixes] (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4819:17)
          at VueComponent.classes (/Users/sehill/Development/repos/mpowr/ui/node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:99:44)
          at VueComponent.classes (/Users/sehill/Development/repos/mpowr/ui/node_modules/vuetify/dist/webpack:/Vuetify/src/components/VTabs/VTabsBar.ts:37:52)
          at Watcher.get (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at Watcher.evaluate (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4570:21)
          at VueComponent.computedGetter [as classes] (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4819:17)
          at VueComponent.genData (/Users/sehill/Development/repos/mpowr/ui/node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:172:21)
          at Proxy.render (/Users/sehill/Development/repos/mpowr/ui/node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:373:26)
          at Proxy.render (/Users/sehill/Development/repos/mpowr/ui/node_modules/vuetify/dist/webpack:/Vuetify/src/components/VTabs/VTabsBar.ts:93:50)
          at VueComponent.Vue._render (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:3538:22)
          at VueComponent.updateComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4054:21)
          at Watcher.get (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at new Watcher (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
          at mountComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
          at init (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
          at createComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
          at createElm (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
          at createChildren (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:6033:9)
          at createElm (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:5934:9)
          at VueComponent.patch [as __patch__] (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
          at VueComponent.Vue._update (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
          at VueComponent.updateComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
          at Watcher.get (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at new Watcher (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
          at mountComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
          at init (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
          at createComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
          at createElm (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
          at VueComponent.patch [as __patch__] (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
          at VueComponent.Vue._update (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
          at VueComponent.updateComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
          at Watcher.get (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at new Watcher (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
          at mountComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
          at init (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
          at createComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
          at createElm (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
          at VueComponent.patch [as __patch__] (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
          at VueComponent.Vue._update (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
          at VueComponent.updateComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
          at Watcher.get (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at new Watcher (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
          at mountComponent (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/Users/sehill/Development/repos/mpowr/ui/node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
          at mount (/Users/sehill/Development/repos/mpowr/ui/node_modules/@vue/test-utils/dist/vue-test-utils.js:12483:21)
          at Suite.Object.<anonymous>.describe (/Users/sehill/Development/repos/mpowr/ui/tests/unit/views/dashboard/Todos/TabsTest.spec.js:8:19)
          at addSpecsToSuite (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/jasmine/Env.js:496:51)
          at Env.describe (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/jasmine/Env.js:466:11)
          at describe (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/jasmine/jasmineLight.js:81:18)
          at Object.<anonymous> (/Users/sehill/Development/repos/mpowr/ui/tests/unit/views/dashboard/Todos/TabsTest.spec.js:7:1)
          at Runtime._execModule (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-runtime/build/index.js:867:68)
          at Runtime._loadModule (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-runtime/build/index.js:577:12)
          at Runtime.requireModule (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-runtime/build/index.js:433:10)
          at /Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/index.js:202:13
          at Generator.next (<anonymous>)
          at asyncGeneratorStep (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/index.js:27:24)
          at _next (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/index.js:47:9)
          at /Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/index.js:52:7
          at new Promise (<anonymous>)
          at /Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/index.js:44:12
          at _jasmine (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/index.js:207:19)
          at jasmine2 (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-jasmine2/build/index.js:60:19)
          at /Users/sehill/Development/repos/mpowr/ui/node_modules/jest-runner/build/runTest.js:385:24
          at Generator.next (<anonymous>)
          at asyncGeneratorStep (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-runner/build/runTest.js:161:24)
          at _next (/Users/sehill/Development/repos/mpowr/ui/node_modules/jest-runner/build/runTest.js:181:9)
          at process._tickCallback (internal/process/next_tick.js:68:7)

  ● WIP TabsTest.vue › encountered a declaration exception

    TypeError: Cannot read property 'width' of undefined

       6 | 
       7 | describe('WIP TabsTest.vue', () => {
    >  8 |   const wrapper = mount(TabsTest, {})
         |                   ^
       9 | 
      10 |   it('renders two tabs, one for todo items, one for in progress', async () => {
      11 |     const tabs = wrapper.findAll('.v-tab')

      at VueComponent.isMobile (node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:121:39)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
      at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.dev.js:4570:21)
      at VueComponent.computedGetter [as isMobile] (node_modules/vue/dist/vue.runtime.common.dev.js:4819:17)
      at VueComponent.hasAffixes (node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:105:35)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
      at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.dev.js:4570:21)
      at VueComponent.computedGetter [as hasAffixes] (node_modules/vue/dist/vue.runtime.common.dev.js:4819:17)
      at VueComponent.classes (node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:99:44)
      at VueComponent.classes (node_modules/vuetify/dist/webpack:/Vuetify/src/components/VTabs/VTabsBar.ts:37:52)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
      at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.dev.js:4570:21)
      at VueComponent.computedGetter [as classes] (node_modules/vue/dist/vue.runtime.common.dev.js:4819:17)
      at VueComponent.genData (node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:172:21)
      at Proxy.render (node_modules/vuetify/dist/webpack:/Vuetify/src/components/VSlideGroup/VSlideGroup.ts:373:26)
      at Proxy.render (node_modules/vuetify/dist/webpack:/Vuetify/src/components/VTabs/VTabsBar.ts:93:50)
      at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.dev.js:3538:22)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:21)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
      at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
      at createChildren (node_modules/vue/dist/vue.runtime.common.dev.js:6033:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5934:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
      at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
      at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:12483:21)
      at Suite.Object.<anonymous>.describe (tests/unit/views/dashboard/Todos/TabsTest.spec.js:8:19)
      at Object.<anonymous> (tests/unit/views/dashboard/Todos/TabsTest.spec.js:7:1)

Reproduction Link

https://codepen.io/q2-sean-hill/pen/OJPBWev?editable=true&editors=101

Other comments

I can't seem to wrap hardly any Vuetify components in my tests, without something breaking.

[johnleider]

As we discussed in Discord, you need to bootstrap Vuetify in your test setup file: https://vuetifyjs.com/en/getting-started/unit-testing#test-runner-setup

If you have any additional questions, please reach out to us in our Discord community.

[sean-hill]

@johnleider that's exactly what I'm doing in my unit test.

Vue.use(Vuetify)

I still face the same issue.

[mejiamanuel57]

I'm facing the same issue but just with the Data Table component.

[sean-hill]

@mejiamanuel57 I fixed it by adding this to my mounting function:

import { mount, createLocalVue } from '@vue/test-utils'
import Vue from 'vue'
import Vuetify from 'vuetify'
import TabsTest from '@/views/dashboard/Todos/TabsTest.vue'
Vue.use(Vuetify)

describe('WIP TabsTest.vue', () => {
  it('should render', async () => {
    const localVue = createLocalVue()
    const wrapper = mount(TabsTest, {
      localVue,
      vuetify: new Vuetify()
    })
    expect(true).toBeTruthy()
  })
})

So I had to Vue.use(Vuetify) globally, and then vuetify: new Vuetify() when mounting the component.