@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VTreeview/__tests__/VTreeview.spec.ts

@@ -1,39 +1,55 @@
-import Vue from 'vue'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  enableAutoUnmount,
+  MountingOptions
 } from '@vue/test-utils'
 import VTreeview from '../VTreeview'
-import { ExtractVue } from '../../../util/mixins'
 import { wait } from '../../../../test'
+import { h, nextTick } from 'vue'
+
+// Types
+import type { ComponentPublicInstance } from 'vue'
 
 const singleRootTwoChildren = [
-  { id: 0, name: 'Root', children: [{ id: 1, name: 'Child' }, { id: 2, name: 'Child 2' }] },
+  { id: 0, name: 'Root', children: [{ id: 1, name: 'Child' }, { id: 2, name: 'Child 2' }] }
 ]
 
 const threeLevels = [
-  { id: 0, name: 'Root', children: [{ id: 1, name: 'Child', children: [{ id: 2, name: 'Grandchild' }] }, { id: 3, name: 'Child' }] },
+  { id: 0, name: 'Root', children: [{ id: 1, name: 'Child', children: [{ id: 2, name: 'Grandchild' }] }, { id: 3, name: 'Child' }] }
 ]
 
 describe('VTreeView.ts', () => { // eslint-disable-line max-statements
-  type Instance = ExtractVue<typeof VTreeview>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VTreeview>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options = {}) => {
       return mount(VTreeview, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        ...options,
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              icons: {
+                values: {
+                  subgroup: 'arrow_drop_down'
+                }
+              }
+            }
+          }
+        },
+        ...options
       })
     }
   })
 
   it('should render items', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        items: singleRootTwoChildren,
-      },
+      props: {
+        items: singleRootTwoChildren
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -41,10 +57,10 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
 
   it('should render items in dense mode', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: singleRootTwoChildren,
-        dense: true,
-      },
+        dense: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -54,20 +70,17 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
   // https://github.com/vuejs/vue-test-utils/issues/1130
   it.skip('should select all leaf nodes', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: threeLevels,
-        selectable: true,
-      },
+        selectable: true
+      }
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('input', fn)
-
     wrapper.find('.v-treeview-node__checkbox').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(fn).toHaveBeenCalledWith([3, 2])
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([[3, 2]])
     expect(wrapper.html()).toMatchSnapshot()
   })
 
@@ -75,23 +88,20 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
   // https://github.com/vuejs/vue-test-utils/issues/1130
   it.skip('should select only leaf nodes', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: threeLevels,
-        selectable: true,
-      },
+        selectable: true
+      }
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('input', fn)
-
     wrapper.find('.v-treeview-node__toggle').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    wrapper.findAll('.v-treeview-node__checkbox').at(2).trigger('click')
-    await wrapper.vm.$nextTick()
+    wrapper.findAll('.v-treeview-node__checkbox')[2].trigger('click')
+    await nextTick()
 
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(fn).toHaveBeenCalledWith([3])
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([[3]])
     expect(wrapper.html()).toMatchSnapshot()
   })
 
@@ -99,21 +109,18 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
   // https://github.com/vuejs/vue-test-utils/issues/1130
   it.skip('should select only root node', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: threeLevels,
         selectable: true,
-        selectionType: 'independent',
-      },
+        selectionType: 'independent'
+      }
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('input', fn)
-
     wrapper.find('.v-treeview-node__checkbox').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(fn).toHaveBeenCalledWith([0])
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([[0]])
     expect(wrapper.html()).toMatchSnapshot()
   })
 
@@ -124,16 +131,16 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
     }
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [{ id: 0, name: 'Root', children: [] }],
-        loadChildren,
-      },
+        loadChildren
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.find('.v-treeview-node__toggle').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
     expect(`[Vue warn]: Error in created hook: "TypeError: Cannot set property 'vnode' of undefined"`).toHaveBeenWarned()
@@ -146,151 +153,145 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
     }
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [{ id: 0, name: 'Root', children: [] }],
         selectable: true,
-        loadChildren,
-      },
+        loadChildren
+      }
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('input', fn)
-
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.find('.v-treeview-node__checkbox').trigger('click')
     await wait()
 
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(fn).toHaveBeenCalledWith([0])
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([[1]])
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should emit active node when clicking on it', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [{ id: 0, name: 'Root' }, { id: 1, name: 'Root' }],
-        activatable: true,
-      },
+        activatable: true
+      }
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('update:active', fn)
-
     wrapper.find('.v-treeview-node__root').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(fn).toHaveBeenCalledWith([0])
+    expect(wrapper.emitted('update:active')).toHaveLength(1)
+    expect(wrapper.emitted('update:active')[0]).toEqual([[0]])
 
     wrapper.find('.v-treeview-node__root').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    expect(fn).toHaveBeenCalledWith([])
+    expect(wrapper.emitted('update:active')).toHaveLength(2)
+    expect(wrapper.emitted('update:active')[1]).toEqual([[]])
   })
 
   it('should allow multiple active nodes with prop multipleActive', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [{ id: 0, name: 'Root' }, { id: 1, name: 'Root' }],
         multipleActive: true,
-        activatable: true,
-      },
+        activatable: true
+      }
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('update:active', fn)
+    wrapper.findAll('.v-treeview-node__root').forEach(vm => vm.trigger('click'))
+    await nextTick()
 
-    wrapper.findAll('.v-treeview-node__root').wrappers.forEach(vm => vm.trigger('click'))
-    await wrapper.vm.$nextTick()
-
-    expect(fn).toHaveBeenCalledTimes(2)
-    expect(fn).toHaveBeenLastCalledWith([0, 1])
+    expect(wrapper.emitted('update:active')).toHaveLength(2)
+    expect(wrapper.emitted('update:active')[1]).toEqual([[0, 1]])
   })
 
   // TODO: fails with TS 3.9
   it.skip('should update selection when selected prop changes', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [{ id: 0, name: 'Root', children: [{ id: 1, name: 'Child' }] }],
-        value: [],
-        selectable: true,
-      },
+        modelValue: [],
+        selectable: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.find('.v-treeview-node__toggle').trigger('click')
-    wrapper.setProps({ value: [1] })
-    await wrapper.vm.$nextTick()
+    wrapper.setProps({ modelValue: [1] })
+    await nextTick()
 
     expect(wrapper.findAll('.v-treeview-node')).toHaveLength(2)
     expect(wrapper.findAll('.v-treeview-node--selected')).toHaveLength(2)
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: [] })
-    await wrapper.vm.$nextTick()
+    wrapper.setProps({ modelValue: [] })
+    await nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should open all children when using open-all prop', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: threeLevels,
-        openAll: true,
-      },
+        openAll: true
+      }
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should open/close all children when using updateAll', async () => {
+    const updateOpen = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
-        items: threeLevels,
+      props: {
+        items: threeLevels
       },
+      attrs: {
+        'onUpdate:open': updateOpen
+      }
     })
 
-    const updateOpen = jest.fn()
-    wrapper.vm.$on('update:open', updateOpen)
-
     wrapper.vm.updateAll(true)
-    expect(updateOpen).toHaveBeenCalledTimes(1)
+    expect(updateOpen).toHaveBeenCalledTimes(2)
     expect(updateOpen).toHaveBeenCalledWith([0, 1])
 
     wrapper.vm.updateAll(false)
-    expect(updateOpen).toHaveBeenCalledTimes(2)
+    expect(updateOpen).toHaveBeenCalledTimes(3)
     expect(updateOpen).toHaveBeenCalledWith([])
   })
 
   it('should react to open changes', async () => {
+    const fn = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: threeLevels,
-        open: [1],
+        open: [1]
       },
+      attrs: {
+        'onUpdate:open': fn
+      }
     })
 
-    const fn = jest.fn()
-
-    wrapper.vm.$on('update:open', fn)
     wrapper.setProps({ open: [0, 1] })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({ open: [0] })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({ open: [0, 1] })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
 
@@ -299,7 +300,7 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
     // Should not update open values that do not exist in the tree
     wrapper.setProps({ open: [7] })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.html()).toMatchSnapshot()
 
     expect(fn).toHaveBeenCalledWith([])
@@ -307,11 +308,11 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
 
   it('should update selected and active on created', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: threeLevels,
         active: [2],
-        value: [1],
-      },
+        modelValue: [1]
+      }
     })
 
     // TODO: I can not find away in avoriaz
@@ -323,105 +324,96 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
   })
 
   it('should react to changes for active items', async () => {
+    const active = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: threeLevels,
-        active: [2],
+        active: [2]
       },
+      attrs: {
+        'onUpdate:active': active
+      }
     })
 
-    const active = jest.fn()
-    wrapper.vm.$on('update:active', active)
-
     wrapper.setProps({ active: [] })
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(active).toHaveBeenCalledWith([])
 
     // without multiple-active, it will use last value in array
     wrapper.setProps({ active: [1, 3] })
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(active).toHaveBeenCalledWith([3])
 
     wrapper.setProps({ multipleActive: true, active: [1, 3] })
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(active).toHaveBeenCalledWith([1, 3])
 
     // 7 does not exist, we get nothing back
     wrapper.setProps({ active: [7] })
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(active).toHaveBeenCalledWith([])
 
     wrapper.setProps({ active: [0], items: singleRootTwoChildren })
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(active).toHaveBeenCalledWith([0])
   })
 
   it('should react to changes for selected items', async () => {
+    const value = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: threeLevels,
-        value: [2],
+        modelValue: [2]
       },
+      attrs: {
+        'onUpdate:modelValue': value
+      }
     })
 
-    const value = jest.fn()
-    wrapper.vm.$on('input', value)
-
-    wrapper.setProps({ value: [] })
-    await wrapper.vm.$nextTick()
+    wrapper.setProps({ modelValue: [] })
+    await nextTick()
     expect(value).toHaveBeenCalledWith([])
 
-    wrapper.setProps({ value: [3] })
-    await wrapper.vm.$nextTick()
+    wrapper.setProps({ modelValue: [3] })
+    await nextTick()
     expect(value).toHaveBeenCalledWith([3])
 
     // 7 does not exist, we get nothing back
-    wrapper.setProps({ value: [7] })
-    await wrapper.vm.$nextTick()
+    wrapper.setProps({ modelValue: [7] })
+    await nextTick()
     expect(value).toHaveBeenCalledWith([])
 
-    wrapper.setProps({ value: [0] })
-    await wrapper.vm.$nextTick()
+    wrapper.setProps({ modelValue: [0] })
+    await nextTick()
     expect(value).toHaveBeenLastCalledWith([3, 2])
   })
 
   it('should accept string value for id', async () => {
     const wrapper = mountFunction({
-      propsData: { itemKey: 'name' },
+      props: { itemKey: 'name' }
     })
 
     wrapper.setProps({ items: [{ name: 'Foobar' }] })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.nodes.Foobar).toBeTruthy()
 
-    wrapper.setProps({ value: ['Foobar'] })
-
-    await wrapper.vm.$nextTick()
-  })
-
-  it('should warn developer when using non-scoped slots', () => {
-    mountFunction({
-      slots: {
-        prepend: [{ render: h => h('div') }],
-        append: [{ render: h => h('div') }],
-      },
-    })
+    wrapper.setProps({ modelValue: ['Foobar'] })
 
-    expect('[Vuetify] The prepend and append slots require a slot-scope attribute').toHaveBeenTipped()
+    await nextTick()
   })
 
   it('should not show expand icon when children is empty', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           {
             text: 'root',
-            children: [],
-          },
-        ],
-      },
+            children: []
+          }
+        ]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -430,15 +422,15 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
 
   it('should show expand icon when children is empty and load-children prop used', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         loadChildren: () => {},
         items: [
           {
             text: 'root',
-            children: [],
-          },
-        ],
-      },
+            children: []
+          }
+        ]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -450,44 +442,44 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
       {
         id: 1,
         name: 'One',
-        __children: [],
-      },
+        __children: []
+      }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         itemChildren: '__children',
         loadChildren: () => {
           const newItems = [...items]
           items[0].__children.push({ id: 2, name: 'Two' })
           wrapper.setProps({
-            items: newItems,
+            items: newItems
           })
-        },
-      },
+        }
+      }
     })
 
     wrapper.find('.v-treeview-node__toggle').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should remove old nodes', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           {
             id: 1,
-            name: 'one',
+            name: 'one'
           },
           {
             id: 2,
-            name: 'two',
-          },
-        ],
-      },
+            name: 'two'
+          }
+        ]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -496,28 +488,28 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
       items: [
         {
           id: 1,
-          name: 'one',
-        },
-      ],
+          name: 'one'
+        }
+      ]
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({
       items: [
         {
           id: 1,
-          name: 'one',
+          name: 'one'
         },
         {
           id: 3,
-          name: 'three',
-        },
-      ],
+          name: 'three'
+        }
+      ]
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.html()).toMatchSnapshot()
 
     expect(Object.keys(wrapper.vm.nodes)).toHaveLength(2)
@@ -525,58 +517,58 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
 
   it('should filter items', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           {
             id: 1,
-            name: 'one',
+            name: 'one'
           },
           {
             id: 2,
-            name: 'two',
-          },
-        ],
-      },
+            name: 'two'
+          }
+        ]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({
-      search: 'two',
+      search: 'two'
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should filter items using custom item filter', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         filter: (item, search, textKey) => item.special === search,
         items: [
           {
             id: 1,
             name: 'one',
-            special: 'yes',
+            special: 'yes'
           },
           {
             id: 2,
             name: 'two',
-            special: 'no',
-          },
+            special: 'no'
+          }
         ],
-        search: 'NO',
-      },
+        search: 'NO'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({
-      search: 'yes',
+      search: 'yes'
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -585,36 +577,38 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
   it.skip('should emit objects when return-object prop is used', async () => {
     const items = [{ id: 0, name: 'Root', children: [{ id: 1, name: 'Child' }] }]
 
+    const active = jest.fn()
+    const selected = jest.fn()
+    const open = jest.fn()
+
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         activatable: true,
         selectable: true,
-        returnObject: true,
+        returnObject: true
       },
+      attrs: {
+        'onUpdate:active': active,
+        'onUpdate:modelValue': selected,
+        'onUpdate:open': open
+      }
     })
 
-    const active = jest.fn()
-    wrapper.vm.$on('update:active', active)
-    const selected = jest.fn()
-    wrapper.vm.$on('input', selected)
-    const open = jest.fn()
-    wrapper.vm.$on('update:open', open)
-
     wrapper.find('.v-treeview-node__root').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(active).toHaveBeenCalledTimes(1)
     expect(active).toHaveBeenCalledWith([items[0]])
 
     wrapper.find('.v-treeview-node__checkbox').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(selected).toHaveBeenCalledTimes(1)
     expect(selected).toHaveBeenCalledWith([items[0].children[0]])
 
     wrapper.find('.v-treeview-node__toggle').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(open).toHaveBeenCalledTimes(1)
     expect(open).toHaveBeenCalledWith([items[0]])
@@ -622,18 +616,18 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
 
   it('should handle replacing items with new array of equal length', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           {
             id: 1,
-            name: 'one',
+            name: 'one'
           },
           {
             id: 2,
-            name: 'two',
-          },
-        ],
-      },
+            name: 'two'
+          }
+        ]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -642,16 +636,16 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
       items: [
         {
           id: 1,
-          name: 'one',
+          name: 'one'
         },
         {
           id: 3,
-          name: 'three',
-        },
-      ],
+          name: 'three'
+        }
+      ]
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -663,18 +657,18 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
     const two = { id: '2', name: 'Two', children: [three] }
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         returnObject: true,
         selectable: true,
         activatable: true,
         items: [one, two],
-        value: [one],
+        modelValue: [one],
         open: [two],
-        active: [three],
-      },
+        active: [three]
+      }
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -683,17 +677,17 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
     const children = [
       { id: 2, name: 'Bar' },
       { id: 3, name: 'Fizz' },
-      { id: 4, name: 'Buzz' },
+      { id: 4, name: 'Buzz' }
     ]
     const item = {
       id: 1,
-      name: 'Foo',
+      name: 'Foo'
     }
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [{ ...item, children }],
-        value: [4],
-      },
+        modelValue: [4]
+      }
     })
 
     wrapper.setProps({
@@ -701,12 +695,12 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
         ...item,
         children: [
           ...children,
-          { id: 5, name: 'FizzBuzz' },
-        ],
-      }],
+          { id: 5, name: 'FizzBuzz' }
+        ]
+      }]
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.nodes['5'].isIndeterminate).toBeUndefined()
   })
@@ -719,22 +713,22 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
       children: [
         { id: 2, name: 'Bar' },
         { id: 3, name: 'Fizz' },
-        { id: 4, name: 'Buzz' },
-      ],
+        { id: 4, name: 'Buzz' }
+      ]
     }]
 
     const input = jest.fn()
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
-        value: [2, 3, 4],
+        modelValue: [2, 3, 4],
         selectionType: 'leaf',
-        selectable: true,
-      },
-      listeners: {
-        input,
+        selectable: true
       },
+      attrs: {
+        'onUpdate:modelValue': input
+      }
     })
 
     wrapper.setProps({
@@ -744,12 +738,12 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
         children: [
           { id: 2, name: 'Bar' },
           { id: 3, name: 'Fizz' },
-          { id: 4, name: 'Buzz' },
-        ],
-      }],
+          { id: 4, name: 'Buzz' }
+        ]
+      }]
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(input).not.toHaveBeenCalled()
   })
@@ -763,45 +757,45 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
       children: [
         { id: 2, name: 'Bar', disabled: true },
         { id: 3, name: 'Fizz' },
-        { id: 4, name: 'Buzz' },
-      ],
+        { id: 4, name: 'Buzz' }
+      ]
     }]
 
     const input = jest.fn()
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
-        value: [],
+        modelValue: [],
         selectionType: 'leaf',
-        selectable: true,
-      },
-      listeners: {
-        input,
+        selectable: true
       },
+      attrs: {
+        'onUpdate:modelValue': input
+      }
     })
 
     wrapper.find('.v-treeview-node__checkbox').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(input).toHaveBeenLastCalledWith([3, 4])
 
     wrapper.setProps({
-      value: [2, 3, 4],
+      modelValue: [2, 3, 4],
       items: [{
         id: 1,
         name: 'Foo',
         children: [
           { id: 2, name: 'Bar', disabled: true },
           { id: 3, name: 'Fizz' },
-          { id: 4, name: 'Buzz' },
-        ],
-      }],
+          { id: 4, name: 'Buzz' }
+        ]
+      }]
     })
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     wrapper.find('.v-treeview-node__checkbox').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(input).toHaveBeenLastCalledWith([2])
   })
@@ -817,34 +811,34 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
       children: [
         { id: 2, name: 'Bar' },
         { id: 3, name: 'Fizz', disabled: true },
-        { id: 4, name: 'Buzz' },
-      ],
+        { id: 4, name: 'Buzz' }
+      ]
     }]
 
     const input = jest.fn()
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
-        value: [],
+        modelValue: [],
         open: [1],
         selectionType: 'independent',
-        selectable: true,
-      },
-      listeners: {
-        input,
+        selectable: true
       },
+      attrs: {
+        'onUpdate:modelValue': input
+      }
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     wrapper.findAll('.v-treeview-node__checkbox').at(1).trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(input).toHaveBeenLastCalledWith([2])
 
     wrapper.findAll('.v-treeview-node__checkbox').at(2).trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(input).toHaveBeenCalledTimes(1)
   })
@@ -855,22 +849,22 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
     const open = jest.fn()
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [{ id: 0, name: 'Root', children: [] }],
         loadChildren: () => wrapper.setProps({
-          items: [{ id: 0, name: 'Root', children: [{ id: 1, name: 'Child' }] }],
+          items: [{ id: 0, name: 'Root', children: [{ id: 1, name: 'Child' }] }]
         }),
-        openOnClick: true,
-      },
-      listeners: {
-        'update:open': open,
+        openOnClick: true
       },
+      attrs: {
+        'onUpdate:open': open
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.find('.v-treeview-node__root').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
     expect(open).toHaveBeenLastCalledWith([0])