From e14696b59e5db4094999d5c28755db8f879efad8 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sun, 5 Jan 2025 17:13:55 +0100
Subject: [PATCH] update tests

---
 src/views/Main/Inquiries/index.vue            |   1 +
 tests/components/CheckBox.spec.js             |   8 +-
 tests/components/CsvImport/CsvImport.spec.js  |  66 +++++------
 .../CsvImport/DelimiterSelector.spec.js       |  22 ++--
 tests/components/DbUploader.spec.js           |  54 +++++----
 tests/components/LoadingIndicator.spec.js     |   4 +-
 tests/components/Logs.spec.js                 |  18 +--
 .../components/Splitpanes/Splitpanes.spec.js  | 100 ++++++++---------
 tests/components/SqlTable/Pager.spec.js       |   6 +-
 tests/views/LoadView.spec.js                  |  12 +-
 tests/views/Main/Inquiries/Inquiries.spec.js  | 106 +++++++++---------
 tests/views/Main/MainMenu.spec.js             |  94 ++++++++++------
 .../Main/Workspace/Schema/Schema.spec.js      |  61 ++++++----
 .../Workspace/Schema/TableDescription.spec.js |  12 +-
 .../Tabs/Tab/DataView/Chart/Chart.spec.js     |   6 +-
 .../Tabs/Tab/DataView/DataView.spec.js        |  22 ++--
 .../Tabs/Tab/DataView/Pivot/Pivot.spec.js     |  72 ++++++------
 .../Pivot/PivotUi/PivotSortBtn.spec.js        |   2 +-
 .../DataView/Pivot/PivotUi/PivotUi.spec.js    |  20 ++--
 .../Tabs/Tab/RunResult/Record.spec.js         |  34 +++---
 .../Tabs/Tab/RunResult/RunResult.spec.js      |  46 ++++----
 .../Tabs/Tab/RunResult/ValueViewer.spec.js    |   6 +-
 .../Tabs/Tab/SqlEditor/SqlEditor.spec.js      |   2 +-
 .../views/Main/Workspace/Tabs/Tab/Tab.spec.js |  82 +++++++++-----
 tests/views/Main/Workspace/Tabs/Tabs.spec.js  |  64 +++++++----
 tests/views/Main/Workspace/Workspace.spec.js  |  12 +-
 26 files changed, 523 insertions(+), 409 deletions(-)

diff --git a/src/views/Main/Inquiries/index.vue b/src/views/Main/Inquiries/index.vue
index 30ba887..40f5ac3 100644
--- a/src/views/Main/Inquiries/index.vue
+++ b/src/views/Main/Inquiries/index.vue
@@ -70,6 +70,7 @@
                     <check-box
                       ref="rowCheckBox"
                       :init="selectAll || selectedInquiriesIds.has(inquiry.id)"
+                      data-test="rowCheckBox"
                       @click="toggleRow($event, inquiry.id)"
                     />
                     <div class="name">{{ inquiry.name }}</div>
diff --git a/tests/components/CheckBox.spec.js b/tests/components/CheckBox.spec.js
index 2a64255..d78da5e 100644
--- a/tests/components/CheckBox.spec.js
+++ b/tests/components/CheckBox.spec.js
@@ -5,18 +5,18 @@ import CheckBox from '@/components/CheckBox'
 describe('CheckBox', () => {
   it('unchecked by default', () => {
     const wrapper = shallowMount(CheckBox, {
-      propsData: { init: false }
+      props: { init: false }
     })
     expect(wrapper.find('img').isVisible()).to.equal(false)
   })
 
   it('gets init state according to passed props', () => {
     const wrapperChecked = shallowMount(CheckBox, {
-      propsData: { init: true }
+      props: { init: true }
     })
     expect(wrapperChecked.find('img').isVisible()).to.equal(true)
     const wrapperUnchecked = shallowMount(CheckBox, {
-      propsData: { init: false }
+      props: { init: false }
     })
     expect(wrapperUnchecked.find('img').isVisible()).to.equal(false)
   })
@@ -39,7 +39,7 @@ describe('CheckBox', () => {
 
   it('disabled', async () => {
     const wrapper = shallowMount(CheckBox, {
-      propsData: { disabled: true }
+      props: { disabled: true }
     })
     expect(wrapper.find('.checkbox-container').classes()).to.include('disabled')
     expect(wrapper.find('.checkbox-container').classes()).to.not.include('checked')
diff --git a/tests/components/CsvImport/CsvImport.spec.js b/tests/components/CsvImport/CsvImport.spec.js
index 6868718..bf7993a 100644
--- a/tests/components/CsvImport/CsvImport.spec.js
+++ b/tests/components/CsvImport/CsvImport.spec.js
@@ -42,7 +42,7 @@ describe('CsvJsonImport.vue', () => {
     // mount the component
     wrapper = mount(CsvJsonImport, {
       store,
-      propsData: {
+      props: {
         file,
         dialogName: 'addCsvJson',
         db
@@ -86,10 +86,10 @@ describe('CsvJsonImport.vue', () => {
     expect(wrapper.findComponent({ name: 'check-box' }).vm.checked).to.equal(true)
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(2)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equal('foo')
-    expect(rows.at(0).findAll('td').at(1).text()).to.equal('1')
-    expect(rows.at(1).findAll('td').at(0).text()).to.equal('bar')
-    expect(rows.at(1).findAll('td').at(1).text()).to.equal('2')
+    expect(rows[0].findAll('td')[0].text()).to.equal('foo')
+    expect(rows[0].findAll('td')[1].text()).to.equal('1')
+    expect(rows[1].findAll('td')[0].text()).to.equal('bar')
+    expect(rows[1].findAll('td')[1].text()).to.equal('2')
     expect(wrapper.findComponent({ name: 'logs' }).text())
       .to.include('Information about row 0. Comma was used as a standart delimiter.')
     expect(wrapper.findComponent({ name: 'logs' }).text())
@@ -163,8 +163,8 @@ describe('CsvJsonImport.vue', () => {
 
     let rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equal('bar')
-    expect(rows.at(0).findAll('td').at(1).text()).to.equal('2')
+    expect(rows[0].findAll('td')[0].text()).to.equal('bar')
+    expect(rows[0].findAll('td')[1].text()).to.equal('2')
     expect(wrapper.findComponent({ name: 'logs' }).text())
       .to.include('Preview parsing is completed in')
 
@@ -193,8 +193,8 @@ describe('CsvJsonImport.vue', () => {
     await csv.parse.returnValues[2]
     rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equal('baz')
-    expect(rows.at(0).findAll('td').at(1).text()).to.equal('3')
+    expect(rows[0].findAll('td')[0].text()).to.equal('baz')
+    expect(rows[0].findAll('td')[1].text()).to.equal('3')
     expect(wrapper.findComponent({ name: 'logs' }).text())
       .to.contain(
         'Error in row 0. Quote is missed. ' +
@@ -220,8 +220,8 @@ describe('CsvJsonImport.vue', () => {
     await csv.parse.returnValues[3]
     rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equal('qux')
-    expect(rows.at(0).findAll('td').at(1).text()).to.equal('4')
+    expect(rows[0].findAll('td')[0].text()).to.equal('qux')
+    expect(rows[0].findAll('td')[1].text()).to.equal('4')
     expect(wrapper.findComponent({ name: 'logs' }).text())
       .to.contain('Preview parsing is completed in')
 
@@ -242,8 +242,8 @@ describe('CsvJsonImport.vue', () => {
     await csv.parse.returnValues[4]
     rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equal('corge')
-    expect(rows.at(0).findAll('td').at(1).text()).to.equal('5')
+    expect(rows[0].findAll('td')[0].text()).to.equal('corge')
+    expect(rows[0].findAll('td')[1].text()).to.equal('5')
 
     expect(wrapper.findComponent({ name: 'logs' }).text())
       .to.include('Preview parsing is completed in')
@@ -289,7 +289,7 @@ describe('CsvJsonImport.vue', () => {
     await wrapper.vm.$nextTick()
 
     // "Parsing CSV..." in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(1).text())
+    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
       .to.equal('Parsing CSV...')
 
     // After 1 second - loading indicator is shown
@@ -362,7 +362,7 @@ describe('CsvJsonImport.vue', () => {
     await wrapper.vm.$nextTick()
 
     // Parsing success in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(1).text())
+    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
       .to.include('2 rows are parsed successfully in')
 
     // All the dialog controls are disabled
@@ -430,8 +430,8 @@ describe('CsvJsonImport.vue', () => {
     // Parsing success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(4)
-    expect(logs.at(1).text()).to.include('2 rows are parsed in')
-    expect(logs.at(2).text()).to.equals('Comma was used as a standart delimiter.')
+    expect(logs[1].text()).to.include('2 rows are parsed in')
+    expect(logs[2].text()).to.equals('Comma was used as a standart delimiter.')
 
     // All the dialog controls are disabled
     expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(true)
@@ -493,8 +493,8 @@ describe('CsvJsonImport.vue', () => {
     // Parsing success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(3)
-    expect(logs.at(1).text()).to.include('Parsing ended with errors.')
-    expect(logs.at(2).text()).to.equals('Something is wrong.')
+    expect(logs[1].text()).to.include('Parsing ended with errors.')
+    expect(logs[2].text()).to.equals('Something is wrong.')
 
     // All the dialog controls are enabled
     expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
@@ -552,7 +552,7 @@ describe('CsvJsonImport.vue', () => {
     await wrapper.vm.$nextTick()
 
     // Parsing success in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(2).text())
+    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
       .to.equal('Importing CSV into a SQLite database...')
 
     // After 1 second - loading indicator is shown
@@ -623,7 +623,7 @@ describe('CsvJsonImport.vue', () => {
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(3)
-    expect(logs.at(2).text()).to.contain('Importing CSV into a SQLite database is completed in')
+    expect(logs[2].text()).to.contain('Importing CSV into a SQLite database is completed in')
 
     // All the dialog controls are enabled
     expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
@@ -680,8 +680,8 @@ describe('CsvJsonImport.vue', () => {
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(4)
-    expect(logs.at(2).text()).to.contain('Importing CSV into a SQLite database...')
-    expect(logs.at(3).text()).to.equal('Error: fail.')
+    expect(logs[2].text()).to.contain('Importing CSV into a SQLite database...')
+    expect(logs[3].text()).to.equal('Error: fail.')
 
     // All the dialog controls are enabled
     expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
@@ -832,7 +832,7 @@ describe('CsvJsonImport.vue - json', () => {
     // mount the component
     wrapper = mount(CsvJsonImport, {
       store,
-      propsData: {
+      props: {
         file,
         dialogName: 'addCsvJson',
         db
@@ -857,7 +857,7 @@ describe('CsvJsonImport.vue - json', () => {
     expect(wrapper.findComponent({ name: 'check-box' }).exists()).to.equal(false)
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equal([
+    expect(rows[0].findAll('td')[0].text()).to.equal([
       '{',
       '  "foo": [',
       '    1,',
@@ -913,7 +913,7 @@ describe('CsvJsonImport.vue - json', () => {
     await wrapper.vm.$nextTick()
 
     // "Parsing JSON..." in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(1).text())
+    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
       .to.equal('Parsing JSON...')
 
     // After 1 second - loading indicator is shown
@@ -954,7 +954,7 @@ describe('CsvJsonImport.vue - json', () => {
     await wrapper.vm.$nextTick()
 
     // Parsing success in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(2).text())
+    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
       .to.equal('Importing JSON into a SQLite database...')
 
     // After 1 second - loading indicator is shown
@@ -994,7 +994,7 @@ describe('CsvJsonImport.vue - json', () => {
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(3)
-    expect(logs.at(2).text()).to.contain('Importing JSON into a SQLite database is completed in')
+    expect(logs[2].text()).to.contain('Importing JSON into a SQLite database is completed in')
 
     // All the dialog controls are enabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
@@ -1041,7 +1041,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
     // mount the component
     wrapper = mount(CsvJsonImport, {
       store,
-      propsData: {
+      props: {
         file,
         dialogName: 'addCsvJson',
         db
@@ -1078,7 +1078,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
     expect(wrapper.findComponent({ name: 'check-box' }).exists()).to.equal(false)
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equal('{ "foo": [ 1, 2, 3 ] }')
+    expect(rows[0].findAll('td')[0].text()).to.equal('{ "foo": [ 1, 2, 3 ] }')
     expect(wrapper.findComponent({ name: 'logs' }).text())
       .to.include('Preview parsing is completed in')
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
@@ -1122,7 +1122,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
     await wrapper.vm.$nextTick()
 
     // "Parsing JSON..." in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(1).text())
+    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
       .to.equal('Parsing JSON...')
 
     // After 1 second - loading indicator is shown
@@ -1188,7 +1188,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
     await wrapper.vm.$nextTick()
 
     // Parsing success in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(2).text())
+    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
       .to.equal('Importing JSON into a SQLite database...')
 
     // After 1 second - loading indicator is shown
@@ -1253,7 +1253,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(3)
-    expect(logs.at(2).text()).to.contain('Importing JSON into a SQLite database is completed in')
+    expect(logs[2].text()).to.contain('Importing JSON into a SQLite database is completed in')
 
     // All the dialog controls are enabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
diff --git a/tests/components/CsvImport/DelimiterSelector.spec.js b/tests/components/CsvImport/DelimiterSelector.spec.js
index 29e4c25..b57cf5d 100644
--- a/tests/components/CsvImport/DelimiterSelector.spec.js
+++ b/tests/components/CsvImport/DelimiterSelector.spec.js
@@ -5,19 +5,19 @@ import DelimiterSelector from '@/components/CsvJsonImport/DelimiterSelector'
 describe('DelimiterSelector', async () => {
   it('shows the name of value', async () => {
     let wrapper = shallowMount(DelimiterSelector, {
-      propsData: { value: ',' }
+      props: { value: ',' }
     })
     expect(wrapper.find('input').element.value).to.equal(',')
     expect(wrapper.find('.name').text()).to.equal('comma')
 
     wrapper = shallowMount(DelimiterSelector, {
-      propsData: { value: '\t' }
+      props: { value: '\t' }
     })
     expect(wrapper.find('input').element.value).to.equal('\t')
     expect(wrapper.find('.name').text()).to.equal('horizontal tab')
 
     wrapper = shallowMount(DelimiterSelector, {
-      propsData: { value: '' }
+      props: { value: '' }
     })
     expect(wrapper.find('input').element.value).to.equal('')
     expect(wrapper.find('.name').text()).to.equal('')
@@ -25,7 +25,7 @@ describe('DelimiterSelector', async () => {
 
   it('clears the field', async () => {
     const wrapper = mount(DelimiterSelector, {
-      propsData: { value: ',' }
+      props: { value: ',' }
     })
 
     await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
@@ -36,7 +36,7 @@ describe('DelimiterSelector', async () => {
 
   it('changes value by typing', async () => {
     const wrapper = shallowMount(DelimiterSelector, {
-      propsData: { value: ',' }
+      props: { value: ',' }
     })
 
     await wrapper.find('input').setValue(';')
@@ -46,7 +46,7 @@ describe('DelimiterSelector', async () => {
 
   it('changes value by selection from the list', async () => {
     const wrapper = mount(DelimiterSelector, {
-      propsData: { value: '|' }
+      props: { value: '|' }
     })
 
     await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
@@ -59,7 +59,7 @@ describe('DelimiterSelector', async () => {
 
   it("doesn't change value when becomes empty", async () => {
     const wrapper = mount(DelimiterSelector, {
-      propsData: { value: '|' }
+      props: { value: '|' }
     })
 
     await wrapper.find('input').setValue('')
@@ -72,18 +72,18 @@ describe('DelimiterSelector', async () => {
 
     const wrapper = mount(DelimiterSelector, {
       attachTo: place,
-      propsData: { value: '|' }
+      props: { value: '|' }
     })
 
     await wrapper.find('.name').trigger('click')
     expect(wrapper.find('input').element).to.equal(document.activeElement)
     place.remove()
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('disabled', async () => {
     const wrapper = mount(DelimiterSelector, {
-      propsData: { value: '|', disabled: true }
+      props: { value: '|', disabled: true }
     })
 
     await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
@@ -97,7 +97,7 @@ describe('DelimiterSelector', async () => {
 
   it('has filled class when input is not empty', async () => {
     const wrapper = shallowMount(DelimiterSelector, {
-      propsData: { value: ',' }
+      props: { value: ',' }
     })
     await wrapper.vm.$nextTick()
     expect(wrapper.find('input').classes()).to.include('filled')
diff --git a/tests/components/DbUploader.spec.js b/tests/components/DbUploader.spec.js
index d25c23e..0bae575 100644
--- a/tests/components/DbUploader.spec.js
+++ b/tests/components/DbUploader.spec.js
@@ -48,8 +48,10 @@ describe('DbUploader.vue', () => {
     const wrapper = shallowMount(DbUploader, {
       attachTo: place,
       store,
-      mocks: { $router, $route },
-      propsData: {
+      global: {
+        mocks: { $router, $route }
+      },
+      props: {
         type: 'illustrated'
       }
     })
@@ -60,7 +62,7 @@ describe('DbUploader.vue', () => {
     await wrapper.vm.animationPromise
     await wrapper.vm.$nextTick()
     expect($router.push.calledOnceWith('/workspace')).to.equal(true)
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('loads db on drop and redirects to /workspace', async () => {
@@ -78,8 +80,10 @@ describe('DbUploader.vue', () => {
     const wrapper = shallowMount(DbUploader, {
       attachTo: place,
       store,
-      mocks: { $router, $route },
-      propsData: {
+      global: {
+        mocks: { $router, $route }
+      },
+      props: {
         type: 'illustrated'
       }
     })
@@ -98,7 +102,7 @@ describe('DbUploader.vue', () => {
     await wrapper.vm.animationPromise
     await wrapper.vm.$nextTick()
     expect($router.push.calledOnceWith('/workspace')).to.equal(true)
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it("doesn't redirect if already on /workspace", async () => {
@@ -120,8 +124,10 @@ describe('DbUploader.vue', () => {
     const wrapper = shallowMount(DbUploader, {
       attachTo: place,
       store,
-      mocks: { $router, $route },
-      propsData: {
+      global: {
+        mocks: { $router, $route }
+      },
+      props: {
         type: 'illustrated'
       }
     })
@@ -131,7 +137,7 @@ describe('DbUploader.vue', () => {
     await wrapper.vm.animationPromise
     await wrapper.vm.$nextTick()
     expect($router.push.called).to.equal(false)
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('shows parse dialog if gets csv file', async () => {
@@ -147,8 +153,10 @@ describe('DbUploader.vue', () => {
     const wrapper = mount(DbUploader, {
       attachTo: place,
       store,
-      mocks: { $router, $route },
-      propsData: {
+      global: {
+        mocks: { $router, $route }
+      },
+      props: {
         type: 'illustrated'
       }
     })
@@ -165,7 +173,7 @@ describe('DbUploader.vue', () => {
     expect(CsvImport.preview.calledOnce).to.equal(true)
     await wrapper.vm.$nextTick()
     expect(CsvImport.open.calledOnce).to.equal(true)
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('shows parse dialog if gets json file', async () => {
@@ -181,8 +189,10 @@ describe('DbUploader.vue', () => {
     const wrapper = mount(DbUploader, {
       attachTo: place,
       store,
-      mocks: { $router, $route },
-      propsData: {
+      global: {
+        mocks: { $router, $route }
+      },
+      props: {
         type: 'illustrated'
       }
     })
@@ -199,7 +209,7 @@ describe('DbUploader.vue', () => {
     expect(JsonImport.preview.calledOnce).to.equal(true)
     await wrapper.vm.$nextTick()
     expect(JsonImport.open.calledOnce).to.equal(true)
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('shows parse dialog if gets ndjson file', async () => {
@@ -215,8 +225,10 @@ describe('DbUploader.vue', () => {
     const wrapper = mount(DbUploader, {
       attachTo: place,
       store,
-      mocks: { $router, $route },
-      propsData: {
+      global: {
+        mocks: { $router, $route }
+      },
+      props: {
         type: 'illustrated'
       }
     })
@@ -233,7 +245,7 @@ describe('DbUploader.vue', () => {
     expect(JsonImport.preview.calledOnce).to.equal(true)
     await wrapper.vm.$nextTick()
     expect(JsonImport.open.calledOnce).to.equal(true)
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('deletes temporary db if import is canceled', async () => {
@@ -248,8 +260,10 @@ describe('DbUploader.vue', () => {
     // mount the component
     const wrapper = mount(DbUploader, {
       store,
-      mocks: { $router, $route },
-      propsData: {
+      global: {
+        mocks: { $router, $route }
+      },
+      props: {
         type: 'illustrated'
       }
     })
diff --git a/tests/components/LoadingIndicator.spec.js b/tests/components/LoadingIndicator.spec.js
index b6b177a..54fd31b 100644
--- a/tests/components/LoadingIndicator.spec.js
+++ b/tests/components/LoadingIndicator.spec.js
@@ -5,7 +5,7 @@ import LoadingIndicator from '@/components/LoadingIndicator'
 describe('LoadingIndicator.vue', () => {
   it('Calculates animation class', async () => {
     const wrapper = shallowMount(LoadingIndicator, {
-      propsData: { progress: 0 }
+      props: { progress: 0 }
     })
     expect(wrapper.find('svg').classes()).to.contain('progress')
     await wrapper.setProps({ progress: undefined })
@@ -15,7 +15,7 @@ describe('LoadingIndicator.vue', () => {
 
   it('Calculates arc', async () => {
     const wrapper = shallowMount(LoadingIndicator, {
-      propsData: { progress: 50 }
+      props: { progress: 50 }
     })
     // The lendth of circle in the component is 50.24. If progress is 50% then resulting arc
     // should be 25.12
diff --git a/tests/components/Logs.spec.js b/tests/components/Logs.spec.js
index 052353b..aa520db 100644
--- a/tests/components/Logs.spec.js
+++ b/tests/components/Logs.spec.js
@@ -26,14 +26,14 @@ describe('Logs.vue', () => {
     const viewHeight = containerHeight - 2 * borderWidth
     const wrapper = shallowMount(Logs, {
       attachTo: place,
-      propsData: { messages, style: `height: ${containerHeight}px` }
+      props: { messages, style: `height: ${containerHeight}px` }
     })
 
     await wrapper.vm.$nextTick()
     const height = wrapper.find('.logs-container').element.scrollHeight
     expect(wrapper.find('.logs-container').element.scrollTop)
       .to.equal(height - viewHeight)
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('Scrolled to bottom when a message added', async () => {
@@ -49,7 +49,7 @@ describe('Logs.vue', () => {
     const viewHeight = containerHeight - 2 * borderWidth
     const wrapper = shallowMount(Logs, {
       attachTo: place,
-      propsData: { messages, style: `height: ${containerHeight}px` }
+      props: { messages, style: `height: ${containerHeight}px` }
     })
 
     await wrapper.vm.$nextTick()
@@ -60,7 +60,7 @@ describe('Logs.vue', () => {
     const height = wrapper.find('.logs-container').element.scrollHeight
     expect(wrapper.find('.logs-container').element.scrollTop)
       .to.equal(height - viewHeight)
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('Serializes messages', async () => {
@@ -72,13 +72,13 @@ describe('Logs.vue', () => {
     ]
 
     const wrapper = shallowMount(Logs, {
-      propsData: { messages }
+      props: { messages }
     })
 
     const logs = wrapper.findAll('.msg')
-    expect(logs.at(0).text()).to.equal('Error in row 0. msg 1. Try again later.')
-    expect(logs.at(1).text()).to.equal('Error in row 2. msg 2!')
-    expect(logs.at(2).text()).to.equal('msg 3? Be happy!')
-    expect(logs.at(3).text()).to.equal('msg 4.')
+    expect(logs[0].text()).to.equal('Error in row 0. msg 1. Try again later.')
+    expect(logs[1].text()).to.equal('Error in row 2. msg 2!')
+    expect(logs[2].text()).to.equal('msg 3? Be happy!')
+    expect(logs[3].text()).to.equal('msg 4.')
   })
 })
diff --git a/tests/components/Splitpanes/Splitpanes.spec.js b/tests/components/Splitpanes/Splitpanes.spec.js
index 8fb4580..0143901 100644
--- a/tests/components/Splitpanes/Splitpanes.spec.js
+++ b/tests/components/Splitpanes/Splitpanes.spec.js
@@ -10,15 +10,15 @@ describe('Splitpanes.vue', () => {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 60, max: 100 },
         after: { size: 40, max: 100 }
       }
     })
 
     expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
   })
 
   it('renders correctly - horizontal', () => {
@@ -28,7 +28,7 @@ describe('Splitpanes.vue', () => {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 60, max: 100 },
         after: { size: 40, max: 100 },
         horizontal: true
@@ -36,8 +36,8 @@ describe('Splitpanes.vue', () => {
     })
 
     expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('60%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.height).to.equal('40%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.height).to.equal('40%')
   })
 
   it('toggles correctly - no maximized initially', async () => {
@@ -47,27 +47,27 @@ describe('Splitpanes.vue', () => {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 60, max: 100 },
         after: { size: 40, max: 100 }
       }
     })
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
 
-    await wrapper.findAll('.toggle-btn').at(1).trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
+    await wrapper.findAll('.toggle-btn')[1].trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
   })
 
   it('toggles correctly - with maximized initially', async () => {
@@ -77,7 +77,7 @@ describe('Splitpanes.vue', () => {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 0, max: 100 },
         after: { size: 100, max: 100 },
         default: { before: 20, after: 80 }
@@ -85,47 +85,47 @@ describe('Splitpanes.vue', () => {
     })
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('20%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('80%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('20%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('80%')
 
-    await wrapper.findAll('.toggle-btn').at(0).trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
+    await wrapper.findAll('.toggle-btn')[0].trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('20%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('80%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('20%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('80%')
 
-    await wrapper.findAll('.toggle-btn').at(1).trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
+    await wrapper.findAll('.toggle-btn')[1].trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
 
     wrapper = shallowMount(Splitpanes, {
       slots: {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 100, max: 100 },
         after: { size: 0, max: 100 }
       }
     })
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('50%')
 
-    await wrapper.findAll('.toggle-btn').at(0).trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
+    await wrapper.findAll('.toggle-btn')[0].trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('50%')
 
-    await wrapper.findAll('.toggle-btn').at(1).trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
-    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
+    await wrapper.findAll('.toggle-btn')[1].trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
   })
 
   it('drag - vertical', async () => {
@@ -143,7 +143,7 @@ describe('Splitpanes.vue', () => {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 60, max: 100 },
         after: { size: 40, max: 100 }
       }
@@ -156,8 +156,8 @@ describe('Splitpanes.vue', () => {
     }))
     document.dispatchEvent(new MouseEvent('mouseup'))
     await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
-    wrapper.destroy()
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
+    wrapper.unmount()
     root.remove()
   })
 
@@ -176,7 +176,7 @@ describe('Splitpanes.vue', () => {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 10, max: 100 },
         after: { size: 90, max: 100 },
         horizontal: true
@@ -190,8 +190,8 @@ describe('Splitpanes.vue', () => {
     }))
     document.dispatchEvent(new MouseEvent('mouseup'))
     await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('50%')
-    wrapper.destroy()
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
+    wrapper.unmount()
     root.remove()
   })
 
@@ -210,7 +210,7 @@ describe('Splitpanes.vue', () => {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 10, max: 100 },
         after: { size: 90, max: 100 },
         horizontal: true
@@ -230,8 +230,8 @@ describe('Splitpanes.vue', () => {
     document.dispatchEvent(event)
     document.dispatchEvent(new MouseEvent('touchend'))
     await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('50%')
-    wrapper.destroy()
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
+    wrapper.unmount()
     root.remove()
     delete window.ontouchstart
   })
@@ -251,7 +251,7 @@ describe('Splitpanes.vue', () => {
         leftPane: '<div />',
         rightPane: '<div />'
       },
-      propsData: {
+      props: {
         before: { size: 60, max: 100 },
         after: { size: 40, max: 100 }
       }
@@ -270,8 +270,8 @@ describe('Splitpanes.vue', () => {
     document.dispatchEvent(event)
     document.dispatchEvent(new MouseEvent('touchend'))
     await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
-    wrapper.destroy()
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
+    wrapper.unmount()
     root.remove()
     delete window.ontouchstart
   })
diff --git a/tests/components/SqlTable/Pager.spec.js b/tests/components/SqlTable/Pager.spec.js
index 071ec62..303a44d 100644
--- a/tests/components/SqlTable/Pager.spec.js
+++ b/tests/components/SqlTable/Pager.spec.js
@@ -10,7 +10,7 @@ describe('Pager.vue', () => {
 
   it('emits input event with a page', async () => {
     const wrapper = mount(Pager, {
-      propsData: {
+      props: {
         pageCount: 5
       }
     })
@@ -20,13 +20,13 @@ describe('Pager.vue', () => {
     expect(wrapper.emitted('input')[0]).to.eql([2])
 
     // click on the link to page 3 (it has index 2)
-    await wrapper.findAll('.paginator-page-link').at(2).trigger('click')
+    await wrapper.findAll('.paginator-page-link')[2].trigger('click')
     expect(wrapper.emitted('input')[1]).to.eql([3])
   })
 
   it('changes the page when value is changed', async () => {
     const wrapper = mount(Pager, {
-      propsData: {
+      props: {
         pageCount: 5
       }
     })
diff --git a/tests/views/LoadView.spec.js b/tests/views/LoadView.spec.js
index 4e52a49..f7f0149 100644
--- a/tests/views/LoadView.spec.js
+++ b/tests/views/LoadView.spec.js
@@ -59,8 +59,10 @@ describe('LoadView.vue', () => {
 
     const wrapper = mount(LoadView, {
       store,
-      mocks: { $route, $router },
-      stubs: ['router-link']
+      global: {
+        mocks: { $route, $router },
+        stubs: ['router-link']
+      }
     })
 
     await flushPromises()
@@ -135,8 +137,10 @@ describe('LoadView.vue', () => {
 
     const wrapper = mount(LoadView, {
       store,
-      mocks: { $route, $router },
-      stubs: ['router-link']
+      global: {
+        mocks: { $route, $router },
+        stubs: ['router-link']
+      }
     })
 
     await flushPromises()
diff --git a/tests/views/Main/Inquiries/Inquiries.spec.js b/tests/views/Main/Inquiries/Inquiries.spec.js
index 570d350..ab05343 100644
--- a/tests/views/Main/Inquiries/Inquiries.spec.js
+++ b/tests/views/Main/Inquiries/Inquiries.spec.js
@@ -75,12 +75,12 @@ describe('Inquiries.vue', () => {
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(3)
-    expect(rows.at(0).findAll('td').at(0).text()).to.contains('hello_world')
-    expect(rows.at(0).findAll('td').at(1).text()).to.equals('8 March 2020 20:57')
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo')
-    expect(rows.at(1).findAll('td').at(1).text()).to.equals('3 November 2020 20:57')
-    expect(rows.at(2).findAll('td').at(0).text()).to.equals('bar')
-    expect(rows.at(2).findAll('td').at(1).text()).to.equals('4 December 2020 19:53')
+    expect(rows[0].findAll('td')[0].text()).to.contains('hello_world')
+    expect(rows[0].findAll('td')[1].text()).to.equals('8 March 2020 20:57')
+    expect(rows[1].findAll('td')[0].text()).to.equals('foo')
+    expect(rows[1].findAll('td')[1].text()).to.equals('3 November 2020 20:57')
+    expect(rows[2].findAll('td')[0].text()).to.equals('bar')
+    expect(rows[2].findAll('td')[1].text()).to.equals('4 December 2020 19:53')
   })
 
   it('Filters the list of inquiries', async () => {
@@ -123,8 +123,8 @@ describe('Inquiries.vue', () => {
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equals('foo')
-    expect(rows.at(0).findAll('td').at(1).text()).to.contains('3 November 2020 20:57')
+    expect(rows[0].findAll('td')[0].text()).to.equals('foo')
+    expect(rows[0].findAll('td')[1].text()).to.contains('3 November 2020 20:57')
   })
 
   it('Shows No found message when filter returns nothing', async () => {
@@ -202,8 +202,8 @@ describe('Inquiries.vue', () => {
     await wrapper.vm.$nextTick()
 
     const rows = wrapper.findAll('tbody tr')
-    expect(rows.at(0).find('td .badge').exists()).to.equals(true)
-    expect(rows.at(1).find('td .badge').exists()).to.equals(false)
+    expect(rows[0].find('td .badge').exists()).to.equals(true)
+    expect(rows[1].find('td .badge').exists()).to.equals(false)
   })
 
   it('Exports one inquiry', async () => {
@@ -269,8 +269,8 @@ describe('Inquiries.vue', () => {
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(2)
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo copy')
-    expect(rows.at(1).findAll('td').at(1).text()).to.contains('3 December 2020 20:57')
+    expect(rows[1].findAll('td')[0].text()).to.equals('foo copy')
+    expect(rows[1].findAll('td')[1].text()).to.contains('3 December 2020 20:57')
     expect(
       storedInquiries.updateStorage.calledOnceWith(sinon.match([inquiryInStorage, newInquiry]))
     ).to.equals(true)
@@ -311,9 +311,9 @@ describe('Inquiries.vue', () => {
         .trigger('click')
       await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
 
-      const checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
-      expect(checkboxes.at(0).vm.checked).to.equals(true)
-      expect(checkboxes.at(1).vm.checked).to.equals(false)
+      const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
+      expect(checkboxes[0].vm.checked).to.equals(true)
+      expect(checkboxes[1].vm.checked).to.equals(false)
     })
 
   it('Opens an inquiry', async () => {
@@ -339,7 +339,9 @@ describe('Inquiries.vue', () => {
 
     const wrapper = shallowMount(Inquiries, {
       store,
-      mocks: { $router }
+      global: {
+        mocks: { $router }
+      }
     })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await storedInquiries.getStoredInquiries.returnValues[0]
@@ -518,8 +520,8 @@ describe('Inquiries.vue', () => {
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(2)
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('bar')
-    expect(rows.at(1).findAll('td').at(1).text()).to.equals('3 December 2020 20:57')
+    expect(rows[1].findAll('td')[0].text()).to.equals('bar')
+    expect(rows[1].findAll('td')[1].text()).to.equals('3 December 2020 20:57')
     expect(storedInquiries.updateStorage.calledOnceWith(
       sinon.match([inquiryInStorage, importedInquiry])
     )).to.equals(true)
@@ -563,10 +565,10 @@ describe('Inquiries.vue', () => {
     // click Import
     await wrapper.find('#toolbar-btns-import').trigger('click')
 
-    const checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
+    const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
     expect(wrapper.findComponent({ ref: 'mainCheckBox' }).vm.checked).to.equals(false)
-    expect(checkboxes.at(0).vm.checked).to.equals(true)
-    expect(checkboxes.at(1).vm.checked).to.equals(false)
+    expect(checkboxes[0].vm.checked).to.equals(true)
+    expect(checkboxes[1].vm.checked).to.equals(false)
   })
 
   it('Deletion is not available for predefined inquiries', async () => {
@@ -642,7 +644,7 @@ describe('Inquiries.vue', () => {
 
     // check the rows in the grid
     expect(wrapper.findAll('tbody tr')).to.have.lengthOf(1)
-    expect(wrapper.findAll('tbody tr').at(0).find('td').text()).to.equals('bar')
+    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.equals('bar')
 
     // check that deleted inquiry was also deleted from tabs
     expect(state.tabs).to.have.lengthOf(1)
@@ -693,17 +695,17 @@ describe('Inquiries.vue', () => {
     const rows = wrapper.findAll('tbody tr')
 
     // Select a predefined inquiry
-    await rows.at(0).find('.checkbox-container').trigger('click')
+    await rows[0].find('.checkbox-container').trigger('click')
     expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(true)
     expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(false)
 
     // Select also not predefined inquiry
-    await rows.at(1).find('.checkbox-container').trigger('click')
+    await rows[1].find('.checkbox-container').trigger('click')
     expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(true)
     expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(true)
 
     // Uncheck a predefined inquiry
-    await rows.at(0).find('.checkbox-container').trigger('click')
+    await rows[0].find('.checkbox-container').trigger('click')
     expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(true)
     expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(true)
   })
@@ -751,8 +753,8 @@ describe('Inquiries.vue', () => {
     const rows = wrapper.findAll('tbody tr')
 
     // Select inquiries
-    await rows.at(0).find('.checkbox-container').trigger('click')
-    await rows.at(1).find('.checkbox-container').trigger('click')
+    await rows[0].find('.checkbox-container').trigger('click')
+    await rows[1].find('.checkbox-container').trigger('click')
 
     await wrapper.find('#toolbar-btns-export').trigger('click')
 
@@ -864,8 +866,8 @@ describe('Inquiries.vue', () => {
     const rows = wrapper.findAll('tbody tr')
 
     // Select inquiries (don't select predefined inquiries)
-    await rows.at(1).find('.checkbox-container').trigger('click')
-    await rows.at(2).find('.checkbox-container').trigger('click')
+    await rows[1].find('.checkbox-container').trigger('click')
+    await rows[2].find('.checkbox-container').trigger('click')
 
     await wrapper.find('#toolbar-btns-delete').trigger('click')
 
@@ -884,8 +886,8 @@ describe('Inquiries.vue', () => {
 
     // check the rows in the grid
     expect(wrapper.findAll('tbody tr')).to.have.lengthOf(2)
-    expect(wrapper.findAll('tbody tr').at(0).find('td').text()).to.contains('hello_world')
-    expect(wrapper.findAll('tbody tr').at(1).find('td').text()).to.equals('baz')
+    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains('hello_world')
+    expect(wrapper.findAll('tbody tr')[1].find('td').text()).to.equals('baz')
 
     // check that deleted inquiry was also deleted from tabs
     expect(state.tabs).to.have.lengthOf(2)
@@ -942,8 +944,8 @@ describe('Inquiries.vue', () => {
     const rows = wrapper.findAll('tbody tr')
 
     // Select inquiries (select also predefined inquiries)
-    await rows.at(0).find('.checkbox-container').trigger('click')
-    await rows.at(1).find('.checkbox-container').trigger('click')
+    await rows[0].find('.checkbox-container').trigger('click')
+    await rows[1].find('.checkbox-container').trigger('click')
 
     await wrapper.find('#toolbar-btns-delete').trigger('click')
 
@@ -964,8 +966,8 @@ describe('Inquiries.vue', () => {
 
     // check the rows in the grid
     expect(wrapper.findAll('tbody tr')).to.have.lengthOf(2)
-    expect(wrapper.findAll('tbody tr').at(0).find('td').text()).to.contains('hello_world')
-    expect(wrapper.findAll('tbody tr').at(1).find('td').text()).to.equals('bar')
+    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains('hello_world')
+    expect(wrapper.findAll('tbody tr')[1].find('td').text()).to.equals('bar')
 
     // check that storage is updated
     expect(storedInquiries.updateStorage.calledOnceWith(sinon.match([bar]))).to.equals(true)
@@ -1036,7 +1038,7 @@ describe('Inquiries.vue', () => {
 
     // check the rows in the grid
     expect(wrapper.findAll('tbody tr')).to.have.lengthOf(1)
-    expect(wrapper.findAll('tbody tr').at(0).find('td').text()).to.contains('hello_world')
+    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains('hello_world')
 
     // check that storage is updated
     expect(storedInquiries.updateStorage.calledOnceWith(sinon.match([]))).to.equals(true)
@@ -1079,9 +1081,9 @@ describe('Inquiries.vue', () => {
     // Select all with main checkbox
     await mainCheckBox.find('.checkbox-container').trigger('click')
 
-    const checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
-    expect(checkboxes.at(0).vm.checked).to.equals(true)
-    expect(checkboxes.at(1).vm.checked).to.equals(true)
+    const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
+    expect(checkboxes[0].vm.checked).to.equals(true)
+    expect(checkboxes[1].vm.checked).to.equals(true)
 
     // Uncheck first row - main checkbox bocomes not checked
     await wrapper.find('tbody tr .checkbox-container').trigger('click')
@@ -1091,8 +1093,8 @@ describe('Inquiries.vue', () => {
     await mainCheckBox.find('.checkbox-container').trigger('click')
     // ... and uncheck all
     await mainCheckBox.find('.checkbox-container').trigger('click')
-    expect(checkboxes.at(0).vm.checked).to.equals(false)
-    expect(checkboxes.at(0).vm.checked).to.equals(false)
+    expect(checkboxes[0].vm.checked).to.equals(false)
+    expect(checkboxes[0].vm.checked).to.equals(false)
   })
 
   it('Selection and filter', async () => {
@@ -1139,18 +1141,18 @@ describe('Inquiries.vue', () => {
     await mainCheckBox.find('.checkbox-container').trigger('click')
     expect([...wrapper.vm.selectedInquiriesIds]).to.eql([0, 1, 2])
     expect(wrapper.vm.selectedNotPredefinedCount).to.eql(2)
-    let checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
-    expect(checkboxes.at(0).vm.checked).to.equals(true)
-    expect(checkboxes.at(1).vm.checked).to.equals(true)
-    expect(checkboxes.at(2).vm.checked).to.equals(true)
+    let checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
+    expect(checkboxes[0].vm.checked).to.equals(true)
+    expect(checkboxes[1].vm.checked).to.equals(true)
+    expect(checkboxes[2].vm.checked).to.equals(true)
 
     // Filter
     await wrapper.find('#toolbar-search input').setValue('foo')
     await wrapper.vm.$nextTick()
     expect([...wrapper.vm.selectedInquiriesIds]).to.eql([1])
     expect(wrapper.vm.selectedNotPredefinedCount).to.eql(1)
-    checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
-    expect(checkboxes.at(0).vm.checked).to.equals(true)
+    checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
+    expect(checkboxes[0].vm.checked).to.equals(true)
 
     // Clear filter
     await wrapper.find('#toolbar-search input').setValue('')
@@ -1158,9 +1160,9 @@ describe('Inquiries.vue', () => {
     expect([...wrapper.vm.selectedInquiriesIds]).to.eql([1])
     expect(wrapper.vm.selectedNotPredefinedCount).to.eql(1)
     checkboxes = wrapper.findAll('tr .checkbox-container')
-    expect(checkboxes.at(0).classes()).to.not.include('checked')
-    expect(checkboxes.at(1).classes()).to.include('checked')
-    expect(checkboxes.at(2).classes()).to.not.include('checked')
+    expect(checkboxes[0].classes()).to.not.include('checked')
+    expect(checkboxes[1].classes()).to.include('checked')
+    expect(checkboxes[2].classes()).to.not.include('checked')
 
     // Select also first inquiry
     wrapper.find('tbody tr .checkbox-container').trigger('click')
@@ -1172,8 +1174,8 @@ describe('Inquiries.vue', () => {
     await wrapper.vm.$nextTick()
     expect([...wrapper.vm.selectedInquiriesIds]).to.eql([0])
     expect(wrapper.vm.selectedNotPredefinedCount).to.eql(0)
-    checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
-    expect(checkboxes.at(0).vm.checked).to.equals(true)
+    checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
+    expect(checkboxes[0].vm.checked).to.equals(true)
 
     // Select all with main checkbox
     await mainCheckBox.find('.checkbox-container').trigger('click')
diff --git a/tests/views/Main/MainMenu.spec.js b/tests/views/Main/MainMenu.spec.js
index ccc84ef..462e309 100644
--- a/tests/views/Main/MainMenu.spec.js
+++ b/tests/views/Main/MainMenu.spec.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { mount, shallowMount, createWrapper } from '@vue/test-utils'
+import { mount, shallowMount, DOMWrapper } from '@vue/test-utils'
 import Vuex from 'vuex'
 import MainMenu from '@/views/Main/MainMenu'
 import storedInquiries from '@/lib/storedInquiries'
@@ -13,7 +13,7 @@ describe('MainMenu.vue', () => {
 
     // We need explicitly destroy the component, so that beforeUnmount hook was called
     // It's important because in this hook MainMenu component removes keydown event listener.
-    wrapper.destroy()
+    wrapper.unmount()
   })
 
   it('Create and Save are visible only on /workspace page', async () => {
@@ -27,8 +27,10 @@ describe('MainMenu.vue', () => {
     // mount the component
     wrapper = shallowMount(MainMenu, {
       store,
-      mocks: { $route },
-      stubs: ['router-link']
+      global: {
+        mocks: { $route },
+        stubs: ['router-link']
+      }
     })
     expect(wrapper.find('#save-btn').exists()).to.equal(true)
     expect(wrapper.find('#save-btn').isVisible()).to.equal(true)
@@ -52,8 +54,10 @@ describe('MainMenu.vue', () => {
     const $route = { path: '/workspace' }
     wrapper = shallowMount(MainMenu, {
       store,
-      mocks: { $route },
-      stubs: ['router-link']
+      global: {
+        mocks: { $route },
+        stubs: ['router-link']
+      }
     })
     expect(wrapper.find('#save-btn').exists()).to.equal(true)
     expect(wrapper.find('#save-btn').isVisible()).to.equal(false)
@@ -78,8 +82,10 @@ describe('MainMenu.vue', () => {
 
     wrapper = shallowMount(MainMenu, {
       store,
-      mocks: { $route },
-      stubs: ['router-link']
+      global: {
+        mocks: { $route },
+        stubs: ['router-link']
+      }
     })
     const vm = wrapper.vm
     expect(wrapper.find('#save-btn').element.disabled).to.equal(false)
@@ -113,8 +119,10 @@ describe('MainMenu.vue', () => {
 
     wrapper = shallowMount(MainMenu, {
       store,
-      mocks: { $route, $router },
-      stubs: ['router-link']
+      global: {
+        mocks: { $route, $router },
+        stubs: ['router-link']
+      }
     })
 
     await wrapper.find('#create-btn').trigger('click')
@@ -148,8 +156,10 @@ describe('MainMenu.vue', () => {
 
     wrapper = shallowMount(MainMenu, {
       store,
-      mocks: { $route, $router },
-      stubs: ['router-link']
+      global: {
+        mocks: { $route, $router },
+        stubs: ['router-link']
+      }
     })
 
     await wrapper.find('#create-btn').trigger('click')
@@ -177,8 +187,10 @@ describe('MainMenu.vue', () => {
 
       wrapper = shallowMount(MainMenu, {
         store,
-        mocks: { $route, $router },
-        stubs: ['router-link']
+        global: {
+          mocks: { $route, $router },
+          stubs: ['router-link']
+        }
       })
 
       const ctrlR = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true })
@@ -223,8 +235,10 @@ describe('MainMenu.vue', () => {
 
       wrapper = shallowMount(MainMenu, {
         store,
-        mocks: { $route, $router },
-        stubs: ['router-link']
+        global: {
+          mocks: { $route, $router },
+          stubs: ['router-link']
+        }
       })
 
       const ctrlEnter = new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true })
@@ -267,8 +281,10 @@ describe('MainMenu.vue', () => {
 
     wrapper = shallowMount(MainMenu, {
       store,
-      mocks: { $route },
-      stubs: ['router-link']
+      global: {
+        mocks: { $route },
+        stubs: ['router-link']
+      }
     })
     sinon.stub(wrapper.vm, 'createNewInquiry')
 
@@ -303,8 +319,10 @@ describe('MainMenu.vue', () => {
 
       wrapper = shallowMount(MainMenu, {
         store,
-        mocks: { $route },
-        stubs: ['router-link']
+        global: {
+          mocks: { $route },
+          stubs: ['router-link']
+        }
       })
       sinon.stub(wrapper.vm, 'checkInquiryBeforeSave')
 
@@ -362,8 +380,10 @@ describe('MainMenu.vue', () => {
 
       wrapper = mount(MainMenu, {
         store,
-        mocks: { $route },
-        stubs: ['router-link', 'app-diagnostic-info']
+        global: {
+          mocks: { $route },
+          stubs: ['router-link', 'app-diagnostic-info']
+        }
       })
 
       await wrapper.find('#save-btn').trigger('click')
@@ -388,7 +408,7 @@ describe('MainMenu.vue', () => {
       }))).to.equal(true)
 
       // check that 'inquirySaved' event was triggered on $root
-      expect(createWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
+      expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
     })
 
   it('Shows en error when the new name is needed but not specifyied', async () => {
@@ -421,8 +441,10 @@ describe('MainMenu.vue', () => {
 
     wrapper = mount(MainMenu, {
       store,
-      mocks: { $route },
-      stubs: ['router-link', 'app-diagnostic-info']
+      global: {
+        mocks: { $route },
+        stubs: ['router-link', 'app-diagnostic-info']
+      }
     })
 
     await wrapper.find('#save-btn').trigger('click')
@@ -471,8 +493,10 @@ describe('MainMenu.vue', () => {
 
     wrapper = mount(MainMenu, {
       store,
-      mocks: { $route },
-      stubs: ['router-link', 'app-diagnostic-info']
+      global: {
+        mocks: { $route },
+        stubs: ['router-link', 'app-diagnostic-info']
+      }
     })
 
     await wrapper.find('#save-btn').trigger('click')
@@ -509,7 +533,7 @@ describe('MainMenu.vue', () => {
     }))).to.equal(true)
 
     // check that 'inquirySaved' event was triggered on $root
-    expect(createWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
+    expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
   })
 
   it('Saves a predefined inquiry with a new name', async () => {
@@ -551,8 +575,10 @@ describe('MainMenu.vue', () => {
 
     wrapper = mount(MainMenu, {
       store,
-      mocks: { $route },
-      stubs: ['router-link', 'app-diagnostic-info']
+      global: {
+        mocks: { $route },
+        stubs: ['router-link', 'app-diagnostic-info']
+      }
     })
 
     await wrapper.find('#save-btn').trigger('click')
@@ -592,7 +618,7 @@ describe('MainMenu.vue', () => {
     }))).to.equal(true)
 
     // check that 'inquirySaved' event was triggered on $root
-    expect(createWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
+    expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
 
     // We saved predefined inquiry, so the tab will be created again
     // (because of new id) and it will be without sql result and has default view - table.
@@ -637,8 +663,10 @@ describe('MainMenu.vue', () => {
 
     wrapper = mount(MainMenu, {
       store,
-      mocks: { $route },
-      stubs: ['router-link', 'app-diagnostic-info']
+      global: {
+        mocks: { $route },
+        stubs: ['router-link', 'app-diagnostic-info']
+      }
     })
 
     await wrapper.find('#save-btn').trigger('click')
diff --git a/tests/views/Main/Workspace/Schema/Schema.spec.js b/tests/views/Main/Workspace/Schema/Schema.spec.js
index ee8b1e4..44b6b47 100644
--- a/tests/views/Main/Workspace/Schema/Schema.spec.js
+++ b/tests/views/Main/Workspace/Schema/Schema.spec.js
@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { mount, createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
+import { mount } from '@vue/test-utils'
+import { createStore } from 'vuex'
 import actions from '@/store/actions'
 import mutations from '@/store/mutations'
 import Schema from '@/views/Main/Workspace/Schema'
@@ -10,9 +10,6 @@ import database from '@/lib/database'
 import fIo from '@/lib/utils/fileIo'
 import csv from '@/lib/csv'
 
-const localVue = createLocalVue()
-localVue.use(Vuex)
-
 describe('Schema.vue', () => {
   afterEach(() => {
     sinon.restore()
@@ -25,10 +22,14 @@ describe('Schema.vue', () => {
         dbName: 'fooDB'
       }
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
 
     // mout the component
-    const wrapper = mount(Schema, { store, localVue })
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
 
     // check DB name and schema visibility
     expect(wrapper.find('.db-name').text()).to.equal('fooDB')
@@ -42,10 +43,14 @@ describe('Schema.vue', () => {
         dbName: 'fooDB'
       }
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
 
     // mout the component
-    const wrapper = mount(Schema, { store, localVue })
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
 
     // click and check visibility
     await wrapper.find('.db-name').trigger('click')
@@ -84,30 +89,34 @@ describe('Schema.vue', () => {
         ]
       }
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
 
     // mount the component
-    const wrapper = mount(Schema, { store, localVue })
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
 
     // apply filters and check the list of tables
     await wrapper.find('#schema-filter input').setValue('foo')
     let tables = wrapper.findAllComponents(TableDescription)
     expect(tables).to.have.lengthOf(2)
-    expect(tables.at(0).vm.name).to.equal('foo')
-    expect(tables.at(1).vm.name).to.equal('foobar')
+    expect(tables[0].vm.name).to.equal('foo')
+    expect(tables[1].vm.name).to.equal('foobar')
 
     await wrapper.find('#schema-filter input').setValue('bar')
     tables = wrapper.findAllComponents(TableDescription)
     expect(tables).to.have.lengthOf(2)
-    expect(tables.at(0).vm.name).to.equal('bar')
-    expect(tables.at(1).vm.name).to.equal('foobar')
+    expect(tables[0].vm.name).to.equal('bar')
+    expect(tables[1].vm.name).to.equal('foobar')
 
     await wrapper.find('#schema-filter input').setValue('')
     tables = wrapper.findAllComponents(TableDescription)
     expect(tables).to.have.lengthOf(3)
-    expect(tables.at(0).vm.name).to.equal('foo')
-    expect(tables.at(1).vm.name).to.equal('bar')
-    expect(tables.at(2).vm.name).to.equal('foobar')
+    expect(tables[0].vm.name).to.equal('foo')
+    expect(tables[1].vm.name).to.equal('bar')
+    expect(tables[2].vm.name).to.equal('foobar')
   })
 
   it('exports db', async () => {
@@ -117,8 +126,12 @@ describe('Schema.vue', () => {
         export: sinon.stub().resolves()
       }
     }
-    const store = new Vuex.Store({ state })
-    const wrapper = mount(Schema, { store, localVue })
+    const store = createStore({ state })
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
 
     await wrapper.findComponent({ name: 'export-icon' }).find('svg').trigger('click')
     expect(state.db.export.calledOnceWith('fooDB'))
@@ -150,8 +163,12 @@ describe('Schema.vue', () => {
     state.db.refreshSchema()
     sinon.spy(state.db, 'refreshSchema')
 
-    const store = new Vuex.Store({ state, actions, mutations })
-    const wrapper = mount(Schema, { store, localVue })
+    const store = createStore({ state, actions, mutations })
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
     sinon.spy(wrapper.vm.$refs.addCsvJson, 'preview')
     sinon.spy(wrapper.vm, 'addCsvJson')
     sinon.spy(wrapper.vm.$refs.addCsvJson, 'loadToDb')
diff --git a/tests/views/Main/Workspace/Schema/TableDescription.spec.js b/tests/views/Main/Workspace/Schema/TableDescription.spec.js
index cc227e7..0e72e5e 100644
--- a/tests/views/Main/Workspace/Schema/TableDescription.spec.js
+++ b/tests/views/Main/Workspace/Schema/TableDescription.spec.js
@@ -5,7 +5,7 @@ import TableDescription from '@/views/Main/Workspace/Schema/TableDescription'
 describe('TableDescription.vue', () => {
   it('Initially the columns are hidden and table name is rendered', () => {
     const wrapper = shallowMount(TableDescription, {
-      propsData: {
+      props: {
         name: 'Test table',
         columns: [
           { name: 'id', type: 'number' },
@@ -19,8 +19,10 @@ describe('TableDescription.vue', () => {
 
   it('Columns are visible and correct when click on table name', async () => {
     const wrapper = shallowMount(TableDescription, {
-      stubs: ['router-link'],
-      propsData: {
+      global: {
+        stubs: ['router-link']
+      },
+      props: {
         name: 'Test table',
         columns: [
           { name: 'id', type: 'number' },
@@ -32,7 +34,7 @@ describe('TableDescription.vue', () => {
 
     expect(wrapper.find('.columns').isVisible()).to.equal(true)
     expect(wrapper.findAll('.column').length).to.equal(2)
-    expect(wrapper.findAll('.column').at(0).text()).to.include('id').and.include('number')
-    expect(wrapper.findAll('.column').at(1).text()).to.include('title').and.include('nvarchar(24)')
+    expect(wrapper.findAll('.column')[0].text()).to.include('id').and.include('number')
+    expect(wrapper.findAll('.column')[1].text()).to.include('title').and.include('nvarchar(24)')
   })
 })
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js
index 013cea3..c1bdd4b 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js
@@ -37,7 +37,7 @@ describe('Chart.vue', () => {
 
     // mount the component
     const wrapper = shallowMount(Chart, {
-      propsData: { dataSources }
+      props: { dataSources }
     })
 
     const newDataSources = {
@@ -58,7 +58,7 @@ describe('Chart.vue', () => {
 
     // mount the component
     const wrapper = shallowMount(Chart, {
-      propsData: { dataSources }
+      props: { dataSources }
     })
 
     await wrapper.setProps({ dataSources: null })
@@ -73,7 +73,7 @@ describe('Chart.vue', () => {
     }
 
     const wrapper = mount(Chart, {
-      propsData: { dataSources }
+      props: { dataSources }
     })
     sinon.spy(wrapper.vm, 'prepareCopy')
 
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
index f3128fc..3af18a6 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai'
-import { mount, createWrapper } from '@vue/test-utils'
+import { mount, DOMWrapper } from '@vue/test-utils'
 import DataView from '@/views/Main/Workspace/Tabs/Tab/DataView'
 import sinon from 'sinon'
 
@@ -11,7 +11,7 @@ describe('DataView.vue', () => {
   it('emits update on mode changing', async () => {
     const wrapper = mount(DataView)
 
-    const pivotBtn = createWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
     await pivotBtn.trigger('click')
 
     expect(wrapper.emitted('update')).to.have.lengthOf(1)
@@ -25,7 +25,7 @@ describe('DataView.vue', () => {
 
     expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'chart_settings' })
 
-    const pivotBtn = createWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
     await pivotBtn.trigger('click')
 
     const pivot = wrapper.findComponent({ name: 'pivot' }).vm
@@ -42,12 +42,12 @@ describe('DataView.vue', () => {
     sinon.spy(chart, 'saveAsSvg')
 
     // Export to svg
-    const svgBtn = createWrapper(wrapper.findComponent({ name: 'exportToSvgIcon' }).vm.$parent)
+    const svgBtn = new DOMWrapper(wrapper.findComponent({ name: 'exportToSvgIcon' }).vm.$parent)
     await svgBtn.trigger('click')
     expect(chart.saveAsSvg.calledOnce).to.equal(true)
 
     // Switch to pivot
-    const pivotBtn = createWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
     await pivotBtn.trigger('click')
 
     // Find pivot and spy the method
@@ -71,12 +71,12 @@ describe('DataView.vue', () => {
     sinon.spy(chart, 'saveAsHtml')
 
     // Export to html
-    const htmlBtn = createWrapper(wrapper.findComponent({ name: 'htmlIcon' }).vm.$parent)
+    const htmlBtn = new DOMWrapper(wrapper.findComponent({ name: 'htmlIcon' }).vm.$parent)
     await htmlBtn.trigger('click')
     expect(chart.saveAsHtml.calledOnce).to.equal(true)
 
     // Switch to pivot
-    const pivotBtn = createWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
     await pivotBtn.trigger('click')
 
     // Find pivot and spy the method
@@ -94,7 +94,7 @@ describe('DataView.vue', () => {
     sinon.spy(window, 'alert')
     const wrapper = mount(DataView)
 
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
     await copyBtn.trigger('click')
 
     expect(
@@ -117,7 +117,7 @@ describe('DataView.vue', () => {
     })
 
     // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
     await copyBtn.trigger('click')
 
     // The dialog is shown...
@@ -156,7 +156,7 @@ describe('DataView.vue', () => {
     })
 
     // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let prepareCopy run)
@@ -181,7 +181,7 @@ describe('DataView.vue', () => {
     })
 
     // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let prepareCopy run)
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js
index 8dad9c1..c62230a 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js
@@ -22,7 +22,7 @@ describe('Pivot.vue', () => {
 
   it('renders pivot table', () => {
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -39,25 +39,25 @@ describe('Pivot.vue', () => {
       }
     })
     const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
-    expect(colLabels.at(0).text()).to.equal('2020')
-    expect(colLabels.at(1).text()).to.equal('2021')
+    expect(colLabels[0].text()).to.equal('2020')
+    expect(colLabels[1].text()).to.equal('2021')
     const rows = wrapper.findAll('.pivot-output tbody tr')
     // row0: bar - 2 - 1
-    expect(rows.at(0).find('th').text()).to.equal('bar')
-    expect(rows.at(0).find('td.col0').text()).to.equal('2')
-    expect(rows.at(0).find('td.col1').text()).to.equal('1')
-    expect(rows.at(0).find('td.rowTotal').text()).to.equal('3')
+    expect(rows[0].find('th').text()).to.equal('bar')
+    expect(rows[0].find('td.col0').text()).to.equal('2')
+    expect(rows[0].find('td.col1').text()).to.equal('1')
+    expect(rows[0].find('td.rowTotal').text()).to.equal('3')
 
     // row1: foo -  - 2
-    expect(rows.at(1).find('th').text()).to.equal('foo')
-    expect(rows.at(1).find('td.col0').text()).to.equal('')
-    expect(rows.at(1).find('td.col1').text()).to.equal('1')
-    expect(rows.at(1).find('td.rowTotal').text()).to.equal('1')
+    expect(rows[1].find('th').text()).to.equal('foo')
+    expect(rows[1].find('td.col0').text()).to.equal('')
+    expect(rows[1].find('td.col1').text()).to.equal('1')
+    expect(rows[1].find('td.rowTotal').text()).to.equal('1')
   })
 
   it('updates when dataSource changes', async () => {
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -82,31 +82,31 @@ describe('Pivot.vue', () => {
     })
 
     const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
-    expect(colLabels.at(0).text()).to.equal('2020')
-    expect(colLabels.at(1).text()).to.equal('2021')
+    expect(colLabels[0].text()).to.equal('2020')
+    expect(colLabels[1].text()).to.equal('2021')
     const rows = wrapper.findAll('.pivot-output tbody tr')
     // row0: bar - 2 - 1
-    expect(rows.at(0).find('th').text()).to.equal('bar')
-    expect(rows.at(0).find('td.col0').text()).to.equal('2')
-    expect(rows.at(0).find('td.col1').text()).to.equal('1')
-    expect(rows.at(0).find('td.rowTotal').text()).to.equal('3')
+    expect(rows[0].find('th').text()).to.equal('bar')
+    expect(rows[0].find('td.col0').text()).to.equal('2')
+    expect(rows[0].find('td.col1').text()).to.equal('1')
+    expect(rows[0].find('td.rowTotal').text()).to.equal('3')
 
     // row1: baz - 1 -
-    expect(rows.at(1).find('th').text()).to.equal('baz')
-    expect(rows.at(1).find('td.col0').text()).to.equal('1')
-    expect(rows.at(1).find('td.col1').text()).to.equal('')
-    expect(rows.at(1).find('td.rowTotal').text()).to.equal('1')
+    expect(rows[1].find('th').text()).to.equal('baz')
+    expect(rows[1].find('td.col0').text()).to.equal('1')
+    expect(rows[1].find('td.col1').text()).to.equal('')
+    expect(rows[1].find('td.rowTotal').text()).to.equal('1')
 
     // row2: foo -  - 2
-    expect(rows.at(2).find('th').text()).to.equal('foo')
-    expect(rows.at(2).find('td.col0').text()).to.equal('')
-    expect(rows.at(2).find('td.col1').text()).to.equal('2')
-    expect(rows.at(2).find('td.rowTotal').text()).to.equal('2')
+    expect(rows[2].find('th').text()).to.equal('foo')
+    expect(rows[2].find('td.col0').text()).to.equal('')
+    expect(rows[2].find('td.col1').text()).to.equal('2')
+    expect(rows[2].find('td.rowTotal').text()).to.equal('2')
   })
 
   it('returns options for save', async () => {
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -182,7 +182,7 @@ describe('Pivot.vue', () => {
 
   it('prepareCopy returns canvas for tables and url for plotly charts', async () => {
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -239,7 +239,7 @@ describe('Pivot.vue', () => {
 
   it('saveAsSvg calls chart method if renderer is Custom Chart', async () => {
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -274,7 +274,7 @@ describe('Pivot.vue', () => {
 
   it('saveAsHtml calls chart method if renderer is Custom Chart', async () => {
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -309,7 +309,7 @@ describe('Pivot.vue', () => {
 
   it('saveAsPng calls chart method if renderer is Custom Chart', async () => {
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -346,7 +346,7 @@ describe('Pivot.vue', () => {
     sinon.spy(chartHelper, 'getImageDataUrl')
 
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -374,7 +374,7 @@ describe('Pivot.vue', () => {
     sinon.spy(chartHelper, 'getHtml')
 
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -404,7 +404,7 @@ describe('Pivot.vue', () => {
     sinon.stub(fIo, 'exportToFile')
 
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -434,7 +434,7 @@ describe('Pivot.vue', () => {
     sinon.stub(fIo, 'downloadFromUrl')
 
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
@@ -466,7 +466,7 @@ describe('Pivot.vue', () => {
     sinon.stub(fIo, 'downloadFromUrl')
 
     const wrapper = mount(Pivot, {
-      propsData: {
+      props: {
         dataSources: {
           item: ['foo', 'bar', 'bar', 'bar'],
           year: [2021, 2021, 2020, 2020]
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js
index 4a79e93..fbc0949 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js
@@ -4,7 +4,7 @@ import PivotSortBtn from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi
 
 describe('PivotSortBtn.vue', () => {
   it('switches order', async () => {
-    const wrapper = shallowMount(PivotSortBtn, { propsData: { value: 'key_a_to_z' } })
+    const wrapper = shallowMount(PivotSortBtn, { props: { value: 'key_a_to_z' } })
 
     expect(wrapper.vm.value).to.equal('key_a_to_z')
     await wrapper.find('.pivot-sort-btn').trigger('click')
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js
index 1933f3e..a897473 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js
@@ -5,13 +5,13 @@ import PivotUi from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi'
 describe('PivotUi.vue', () => {
   it('returns value when settings changed', async () => {
     const wrapper = mount(PivotUi, {
-      propsData: {
+      props: {
         keyNames: ['foo', 'bar']
       }
     })
 
     // choose columns
-    await wrapper.findAll('.sqliteviz-select.cols .multiselect__element > span').at(0)
+    await wrapper.findAll('.sqliteviz-select.cols .multiselect__element > span')[0]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(1)
@@ -25,7 +25,7 @@ describe('PivotUi.vue', () => {
     expect(wrapper.emitted().input[0][0].vals).to.eql([])
 
     // choose rows
-    await wrapper.findAll('.sqliteviz-select.rows .multiselect__element > span').at(0)
+    await wrapper.findAll('.sqliteviz-select.rows .multiselect__element > span')[0]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(2)
@@ -65,7 +65,7 @@ describe('PivotUi.vue', () => {
     expect(wrapper.emitted().input[3][0].vals).to.eql([])
 
     // change aggregator
-    await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span').at(12)
+    await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span')[12]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(5)
@@ -80,8 +80,8 @@ describe('PivotUi.vue', () => {
 
     // set first aggregator argument
     await wrapper
-      .findAll('.sqliteviz-select.aggr-arg').at(0)
-      .findAll('.multiselect__element > span').at(0)
+      .findAll('.sqliteviz-select.aggr-arg')[0]
+      .findAll('.multiselect__element > span')[0]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(6)
@@ -96,8 +96,8 @@ describe('PivotUi.vue', () => {
 
     // set second aggregator argument
     await wrapper
-      .findAll('.sqliteviz-select.aggr-arg').at(1)
-      .findAll('.multiselect__element > span').at(1)
+      .findAll('.sqliteviz-select.aggr-arg')[1]
+      .findAll('.multiselect__element > span')[1]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(7)
@@ -111,7 +111,7 @@ describe('PivotUi.vue', () => {
     expect(wrapper.emitted().input[6][0].vals).to.eql(['foo', 'bar'])
 
     // change renderer
-    await wrapper.findAll('.sqliteviz-select.renderer .multiselect__element > span').at(13)
+    await wrapper.findAll('.sqliteviz-select.renderer .multiselect__element > span')[13]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(8)
@@ -126,7 +126,7 @@ describe('PivotUi.vue', () => {
     expect(wrapper.emitted().input[7][0].vals).to.eql(['foo', 'bar'])
 
     // change aggregator again
-    await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span').at(3)
+    await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span')[3]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(9)
diff --git a/tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js b/tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js
index d15b88c..1766d51 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js
@@ -5,7 +5,7 @@ import Record from '@/views/Main/Workspace/Tabs/Tab/RunResult/Record'
 describe('Record.vue', () => {
   it('shows record with selected cell', async () => {
     const wrapper = mount(Record, {
-      propsData: {
+      props: {
         dataSet: {
           columns: ['id', 'name'],
           values: {
@@ -20,10 +20,10 @@ describe('Record.vue', () => {
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(2)
-    expect(rows.at(0).findAll('th').at(0).text()).to.equals('id')
-    expect(rows.at(0).findAll('td').at(0).text()).to.equals('2')
-    expect(rows.at(1).findAll('th').at(0).text()).to.equals('name')
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('bar')
+    expect(rows[0].findAll('th')[0].text()).to.equals('id')
+    expect(rows[0].findAll('td')[0].text()).to.equals('2')
+    expect(rows[1].findAll('th')[0].text()).to.equals('name')
+    expect(rows[1].findAll('td')[0].text()).to.equals('bar')
 
     const selectedCell = wrapper
       .find('.sqliteviz-table tbody td[aria-selected="true"]')
@@ -32,7 +32,7 @@ describe('Record.vue', () => {
 
   it('switches to the next or previous row', async () => {
     const wrapper = mount(Record, {
-      propsData: {
+      props: {
         dataSet: {
           columns: ['id', 'name'],
           values: {
@@ -47,8 +47,8 @@ describe('Record.vue', () => {
 
     let rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(2)
-    expect(rows.at(0).findAll('td').at(0).text()).to.equals('1')
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo')
+    expect(rows[0].findAll('td')[0].text()).to.equals('1')
+    expect(rows[1].findAll('td')[0].text()).to.equals('foo')
     let selectedCell = wrapper
       .find('.sqliteviz-table tbody td[aria-selected="true"]')
     expect(selectedCell.text()).to.equals('1')
@@ -56,8 +56,8 @@ describe('Record.vue', () => {
     await wrapper.find('.next').trigger('click')
 
     rows = wrapper.findAll('tbody tr')
-    expect(rows.at(0).findAll('td').at(0).text()).to.equals('2')
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('bar')
+    expect(rows[0].findAll('td')[0].text()).to.equals('2')
+    expect(rows[1].findAll('td')[0].text()).to.equals('bar')
     selectedCell = wrapper
       .find('.sqliteviz-table tbody td[aria-selected="true"]')
     expect(selectedCell.text()).to.equals('2')
@@ -65,8 +65,8 @@ describe('Record.vue', () => {
     await wrapper.find('.prev').trigger('click')
 
     rows = wrapper.findAll('tbody tr')
-    expect(rows.at(0).findAll('td').at(0).text()).to.equals('1')
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo')
+    expect(rows[0].findAll('td')[0].text()).to.equals('1')
+    expect(rows[1].findAll('td')[0].text()).to.equals('foo')
     selectedCell = wrapper
       .find('.sqliteviz-table tbody td[aria-selected="true"]')
     expect(selectedCell.text()).to.equals('1')
@@ -74,8 +74,8 @@ describe('Record.vue', () => {
     await wrapper.find('.last').trigger('click')
 
     rows = wrapper.findAll('tbody tr')
-    expect(rows.at(0).findAll('td').at(0).text()).to.equals('3')
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('baz')
+    expect(rows[0].findAll('td')[0].text()).to.equals('3')
+    expect(rows[1].findAll('td')[0].text()).to.equals('baz')
     selectedCell = wrapper
       .find('.sqliteviz-table tbody td[aria-selected="true"]')
     expect(selectedCell.text()).to.equals('3')
@@ -83,8 +83,8 @@ describe('Record.vue', () => {
     await wrapper.find('.first').trigger('click')
 
     rows = wrapper.findAll('tbody tr')
-    expect(rows.at(0).findAll('td').at(0).text()).to.equals('1')
-    expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo')
+    expect(rows[0].findAll('td')[0].text()).to.equals('1')
+    expect(rows[1].findAll('td')[0].text()).to.equals('foo')
     selectedCell = wrapper
       .find('.sqliteviz-table tbody td[aria-selected="true"]')
     expect(selectedCell.text()).to.equals('1')
@@ -92,7 +92,7 @@ describe('Record.vue', () => {
 
   it('removes selection when click on selected cell', async () => {
     const wrapper = mount(Record, {
-      propsData: {
+      props: {
         dataSet: {
           columns: ['id', 'name'],
           values: {
diff --git a/tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js b/tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js
index df7e977..ed26570 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai'
-import { mount, createWrapper } from '@vue/test-utils'
+import { mount, DOMWrapper } from '@vue/test-utils'
 import RunResult from '@/views/Main/Workspace/Tabs/Tab/RunResult'
 import csv from '@/lib/csv'
 import sinon from 'sinon'
@@ -14,7 +14,7 @@ describe('RunResult.vue', () => {
     delete window.ClipboardItem
     sinon.spy(window, 'alert')
     const wrapper = mount(RunResult, {
-      propsData: {
+      props: {
         tab: { id: 1 },
         result: {
           columns: ['id', 'name'],
@@ -26,7 +26,7 @@ describe('RunResult.vue', () => {
       }
     })
 
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
     await copyBtn.trigger('click')
 
     expect(
@@ -44,7 +44,7 @@ describe('RunResult.vue', () => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves()
     const clock = sinon.useFakeTimers()
     const wrapper = mount(RunResult, {
-      propsData: {
+      props: {
         tab: { id: 1 },
         result: {
           columns: ['id', 'name'],
@@ -60,7 +60,7 @@ describe('RunResult.vue', () => {
     })
 
     // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
     await copyBtn.trigger('click')
 
     // The dialog is shown...
@@ -90,7 +90,7 @@ describe('RunResult.vue', () => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves()
     const clock = sinon.useFakeTimers()
     const wrapper = mount(RunResult, {
-      propsData: {
+      props: {
         tab: { id: 1 },
         result: {
           columns: ['id', 'name'],
@@ -107,7 +107,7 @@ describe('RunResult.vue', () => {
     })
 
     // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let serialize run)
@@ -124,7 +124,7 @@ describe('RunResult.vue', () => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves()
     const clock = sinon.useFakeTimers()
     const wrapper = mount(RunResult, {
-      propsData: {
+      props: {
         tab: { id: 1 },
         result: {
           columns: ['id', 'name'],
@@ -141,7 +141,7 @@ describe('RunResult.vue', () => {
     })
 
     // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let serialize run)
@@ -159,7 +159,7 @@ describe('RunResult.vue', () => {
 
   it('shows value of selected cell - result set', async () => {
     const wrapper = mount(RunResult, {
-      propsData: {
+      props: {
         tab: { id: 1 },
         result: {
           columns: ['id', 'name'],
@@ -172,7 +172,7 @@ describe('RunResult.vue', () => {
     })
 
     // Open cell value panel
-    const viewValueBtn = createWrapper(
+    const viewValueBtn = new DOMWrapper(
       wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
     )
     await viewValueBtn.trigger('click')
@@ -186,7 +186,7 @@ describe('RunResult.vue', () => {
 
     // Click on '1' cell
     const rows = wrapper.findAll('table tbody tr')
-    await rows.at(0).findAll('td').at(0).trigger('click')
+    await rows[0].findAll('td')[0].trigger('click')
 
     expect(wrapper.find('.value-body').text()).to.equals('1')
 
@@ -207,12 +207,12 @@ describe('RunResult.vue', () => {
     expect(wrapper.find('.value-body').text()).to.equals('1')
 
     // Click on 'bar' cell
-    await rows.at(1).findAll('td').at(1).trigger('click')
+    await rows[1].findAll('td')[1].trigger('click')
 
     expect(wrapper.find('.value-body').text()).to.equals('bar')
 
     // Click on 'bar' cell again
-    await rows.at(1).findAll('td').at(1).trigger('click')
+    await rows[1].findAll('td')[1].trigger('click')
 
     expect(wrapper.find('.value-viewer-container .table-preview').text())
       .to.equals('No cell selected to view')
@@ -220,7 +220,7 @@ describe('RunResult.vue', () => {
 
   it('shows value of selected cell - record view', async () => {
     const wrapper = mount(RunResult, {
-      propsData: {
+      props: {
         tab: { id: 1 },
         result: {
           columns: ['id', 'name'],
@@ -233,13 +233,13 @@ describe('RunResult.vue', () => {
     })
 
     // Open cell value panel
-    const viewValueBtn = createWrapper(
+    const viewValueBtn = new DOMWrapper(
       wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
     )
     await viewValueBtn.trigger('click')
 
     // Go to record view
-    const vierRecordBtn = createWrapper(
+    const vierRecordBtn = new DOMWrapper(
       wrapper.findComponent({ name: 'rowIcon' }).vm.$parent
     )
     await vierRecordBtn.trigger('click')
@@ -280,18 +280,18 @@ describe('RunResult.vue', () => {
 
     // Click on 'foo' cell
     const rows = wrapper.findAll('table tbody tr')
-    await rows.at(1).find('td').trigger('click')
+    await rows[1].find('td').trigger('click')
     expect(wrapper.find('.value-body').text()).to.equals('foo')
 
     // Click on 'foo' cell again
-    await rows.at(1).find('td').trigger('click')
+    await rows[1].find('td').trigger('click')
     expect(wrapper.find('.value-viewer-container .table-preview').text())
       .to.equals('No cell selected to view')
   })
 
   it('keeps selected cell when switch between record and regular view', async () => {
     const wrapper = mount(RunResult, {
-      propsData: {
+      props: {
         tab: { id: 1 },
         result: {
           columns: ['id', 'name'],
@@ -304,19 +304,19 @@ describe('RunResult.vue', () => {
     })
 
     // Open cell value panel
-    const viewValueBtn = createWrapper(
+    const viewValueBtn = new DOMWrapper(
       wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
     )
     await viewValueBtn.trigger('click')
 
     // Click on 'name-1' cell
     const rows = wrapper.findAll('table tbody tr')
-    await rows.at(1).findAll('td').at(1).trigger('click')
+    await rows[1].findAll('td')[1].trigger('click')
 
     expect(wrapper.find('.value-body').text()).to.equals('name-1')
 
     // Go to record view
-    const vierRecordBtn = createWrapper(
+    const vierRecordBtn = new DOMWrapper(
       wrapper.findComponent({ name: 'rowIcon' }).vm.$parent
     )
     await vierRecordBtn.trigger('click')
diff --git a/tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js b/tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js
index c67bdc1..6015880 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js
@@ -10,7 +10,7 @@ describe('ValueViewer.vue', () => {
 
   it('shows value in text mode', async () => {
     const wrapper = mount(ValueViewer, {
-      propsData: {
+      props: {
         cellValue: 'foo'
       }
     })
@@ -20,7 +20,7 @@ describe('ValueViewer.vue', () => {
 
   it('shows error in json mode if the value is not json', async () => {
     const wrapper = mount(ValueViewer, {
-      propsData: {
+      props: {
         cellValue: 'foo'
       }
     })
@@ -31,7 +31,7 @@ describe('ValueViewer.vue', () => {
   it('copy to clipboard', async () => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves()
     const wrapper = mount(ValueViewer, {
-      propsData: {
+      props: {
         cellValue: 'foo'
       }
     })
diff --git a/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js b/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js
index 118b899..9ae3f22 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js
@@ -23,7 +23,7 @@ describe('SqlEditor.vue', () => {
     }
     const store = new Vuex.Store({ state })
 
-    const wrapper = mount(SqlEditor, { store, propsData: { isGettingResults: false } })
+    const wrapper = mount(SqlEditor, { store, props: { isGettingResults: false } })
     await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
     const runButton = wrapper.findComponent({ name: 'RunIcon' }).vm.$parent
 
diff --git a/tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js b/tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js
index 2709523..2d0f70e 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { mount, createWrapper } from '@vue/test-utils'
+import { mount, DOMWrapper } from '@vue/test-utils'
 import mutations from '@/store/mutations'
 import Vuex from 'vuex'
 import Tab from '@/views/Main/Workspace/Tabs/Tab'
@@ -29,8 +29,10 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab: {
           id: 1,
           name: 'foo',
@@ -68,8 +70,10 @@ describe('Tab.vue', () => {
     // mount the component
     const wrapper = mount(Tab, {
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab: {
           id: 1,
           name: 'foo',
@@ -103,8 +107,10 @@ describe('Tab.vue', () => {
     // mount the component
     const wrapper = mount(Tab, {
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab: {
           id: 1,
           name: 'foo',
@@ -159,8 +165,10 @@ describe('Tab.vue', () => {
     // mount the component
     const wrapper = mount(Tab, {
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab: state.tabs[0]
       }
     })
@@ -199,8 +207,10 @@ describe('Tab.vue', () => {
     // mount the component
     const wrapper = mount(Tab, {
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab: state.tabs[0]
       }
     })
@@ -236,8 +246,10 @@ describe('Tab.vue', () => {
     }
     const wrapper = mount(Tab, {
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab
       }
     })
@@ -275,8 +287,10 @@ describe('Tab.vue', () => {
     // mount the component
     const wrapper = mount(Tab, {
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab
       }
     })
@@ -329,8 +343,10 @@ describe('Tab.vue', () => {
     // mount the component
     const wrapper = mount(Tab, {
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab
       }
     })
@@ -372,34 +388,36 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab
       }
     })
 
-    let tableBtn = createWrapper(wrapper.find('.above .side-tool-bar')
+    let tableBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
       .findComponent({ name: 'tableIcon' }).vm.$parent)
     await tableBtn.trigger('click')
 
     expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.above .run-result-panel').exists()).to.equal(true)
 
-    const dataViewBtn = createWrapper(wrapper.find('.above .side-tool-bar')
+    const dataViewBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
       .findComponent({ name: 'dataViewIcon' }).vm.$parent)
     await dataViewBtn.trigger('click')
 
     expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.above .data-view-panel').exists()).to.equal(true)
 
-    const sqlEditorBtn = createWrapper(wrapper.find('.above .side-tool-bar')
+    const sqlEditorBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
       .findComponent({ name: 'sqlEditorIcon' }).vm.$parent)
     await sqlEditorBtn.trigger('click')
 
     expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.bottomPane .data-view-panel').exists()).to.equal(true)
 
-    tableBtn = createWrapper(wrapper.find('.bottomPane .side-tool-bar')
+    tableBtn = new DOMWrapper(wrapper.find('.bottomPane .side-tool-bar')
       .findComponent({ name: 'tableIcon' }).vm.$parent)
     await tableBtn.trigger('click')
 
@@ -435,8 +453,10 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab
       }
     })
@@ -473,8 +493,10 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab
       }
     })
@@ -510,8 +532,10 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       store,
-      stubs: ['chart'],
-      propsData: {
+      global: {
+        stubs: ['chart']
+      },
+      props: {
         tab
       }
     })
diff --git a/tests/views/Main/Workspace/Tabs/Tabs.spec.js b/tests/views/Main/Workspace/Tabs/Tabs.spec.js
index 8822dbb..74cfc36 100644
--- a/tests/views/Main/Workspace/Tabs/Tabs.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tabs.spec.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { shallowMount, mount, createWrapper } from '@vue/test-utils'
+import { shallowMount, mount, DOMWrapper } from '@vue/test-utils'
 import mutations from '@/store/mutations'
 import Vuex from 'vuex'
 import Tabs from '@/views/Main/Workspace/Tabs'
@@ -20,7 +20,9 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = shallowMount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     // check start-guide visibility
@@ -41,7 +43,9 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = shallowMount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     // check start-guide visibility
@@ -50,12 +54,12 @@ describe('Tabs.vue', () => {
     // check tabs
     expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(2)
 
-    const firstTab = wrapper.findAll('.tab').at(0)
+    const firstTab = wrapper.findAll('.tab')[0]
     expect(firstTab.text()).to.include('foo')
     expect(firstTab.find('.star').isVisible()).to.equal(false)
     expect(firstTab.classes()).to.not.include('tab-selected')
 
-    const secondTab = wrapper.findAll('.tab').at(1)
+    const secondTab = wrapper.findAll('.tab')[1]
     expect(secondTab.text()).to.include('Untitled')
     expect(secondTab.find('.star').isVisible()).to.equal(true)
     expect(secondTab.classes()).to.include('tab-selected')
@@ -76,16 +80,18 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = shallowMount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     // click on the first tab
-    const firstTab = wrapper.findAll('.tab').at(0)
+    const firstTab = wrapper.findAll('.tab')[0]
     await firstTab.trigger('click')
 
     // check that first tab is the current now
     expect(firstTab.classes()).to.include('tab-selected')
-    const secondTab = wrapper.findAll('.tab').at(1)
+    const secondTab = wrapper.findAll('.tab')[1]
     expect(secondTab.classes()).to.not.include('tab-selected')
     expect(state.currentTabId).to.equal(1)
   })
@@ -130,17 +136,19 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = mount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     // click on the close icon of the first tab
-    const firstTabCloseIcon = wrapper.findAll('.tab').at(0).find('.close-icon')
+    const firstTabCloseIcon = wrapper.findAll('.tab')[0].find('.close-icon')
     await firstTabCloseIcon.trigger('click')
 
     // check that the only one tab left and it's opened
     expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
 
-    const firstTab = wrapper.findAll('.tab').at(0)
+    const firstTab = wrapper.findAll('.tab')[0]
     expect(firstTab.text()).to.include('Untitled')
     expect(firstTab.find('.star').isVisible()).to.equal(true)
     expect(firstTab.classes()).to.include('tab-selected')
@@ -186,11 +194,13 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = mount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     // click on the close icon of the second tab
-    const secondTabCloseIcon = wrapper.findAll('.tab').at(1).find('.close-icon')
+    const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
     await secondTabCloseIcon.trigger('click')
 
     // check that Close Tab dialog is visible
@@ -252,11 +262,13 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = mount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     // click on the close icon of the second tab
-    const secondTabCloseIcon = wrapper.findAll('.tab').at(1).find('.close-icon')
+    const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
     await secondTabCloseIcon.trigger('click')
 
     // find 'Close without saving' in the dialog
@@ -269,13 +281,13 @@ describe('Tabs.vue', () => {
 
     // check that tab is closed
     expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
-    const firstTab = wrapper.findAll('.tab').at(0)
+    const firstTab = wrapper.findAll('.tab')[0]
     expect(firstTab.text()).to.include('foo')
     expect(firstTab.find('.star').isVisible()).to.equal(false)
     expect(firstTab.classes()).to.include('tab-selected')
 
     // check that 'saveInquiry' event was not emited
-    const rootWrapper = createWrapper(wrapper.vm.$root)
+    const rootWrapper = new DOMWrapper(wrapper.vm.$root)
     expect(rootWrapper.emitted('saveInquiry')).to.equal(undefined)
 
     // check that the dialog is closed
@@ -322,11 +334,13 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = mount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     // click on the close icon of the second tab
-    const secondTabCloseIcon = wrapper.findAll('.tab').at(1).find('.close-icon')
+    const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
     await secondTabCloseIcon.trigger('click')
 
     // find 'Save and close' in the dialog
@@ -342,13 +356,13 @@ describe('Tabs.vue', () => {
 
     // check that tab is closed
     expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
-    const firstTab = wrapper.findAll('.tab').at(0)
+    const firstTab = wrapper.findAll('.tab')[0]
     expect(firstTab.text()).to.include('foo')
     expect(firstTab.find('.star').isVisible()).to.equal(false)
     expect(firstTab.classes()).to.include('tab-selected')
 
     // check that 'saveInquiry' event was emited
-    const rootWrapper = createWrapper(wrapper.vm.$root)
+    const rootWrapper = new DOMWrapper(wrapper.vm.$root)
     expect(rootWrapper.emitted('saveInquiry')).to.have.lengthOf(1)
 
     // check that the dialog is closed
@@ -370,7 +384,9 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = shallowMount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     const event = new Event('beforeunload')
@@ -394,7 +410,9 @@ describe('Tabs.vue', () => {
     // mount the component
     const wrapper = shallowMount(Tabs, {
       store,
-      stubs: ['router-link']
+      global: {
+        stubs: ['router-link']
+      }
     })
 
     const event = new Event('beforeunload')
diff --git a/tests/views/Main/Workspace/Workspace.spec.js b/tests/views/Main/Workspace/Workspace.spec.js
index a281eeb..e8be92d 100644
--- a/tests/views/Main/Workspace/Workspace.spec.js
+++ b/tests/views/Main/Workspace/Workspace.spec.js
@@ -15,8 +15,10 @@ describe('Workspace.vue', () => {
     const $route = { path: '/workspace', query: {} }
     mount(Workspace, {
       store,
-      stubs: ['router-link'],
-      mocks: { $route }
+      global: {
+        stubs: ['router-link'],
+        mocks: { $route }
+      }
     })
 
     expect(state.tabs[0].query).to.include('Your database is empty.')
@@ -36,8 +38,10 @@ describe('Workspace.vue', () => {
     const $route = { path: '/workspace', query: { hide_schema: '1' } }
     const vm = mount(Workspace, {
       store,
-      stubs: ['router-link'],
-      mocks: { $route }
+      global: {
+        stubs: ['router-link'],
+        mocks: { $route }
+      }
     })
 
     expect(vm.find('#schema-container').element.offsetWidth).to.equal(0)