From c41507f64f7aa2996c63892cd63b733928edff17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 16:58:15 +0200
Subject: [PATCH 01/43] Bump Vue and VTU

---
 package.json | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index d579d2f3..cffb4237 100644
--- a/package.json
+++ b/package.json
@@ -35,15 +35,19 @@
     "vue.js 2",
     "vue.js 2 testing",
     "vue 2",
-    "vue 2 testing"
+    "vue 2 testing",
+    "vue.js 3",
+    "vue.js 3 testing",
+    "vue 3",
+    "vue 3 testing"
   ],
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.11.2",
     "@testing-library/dom": "^7.24.3",
-    "@types/testing-library__vue": "^5.0.0",
-    "@vue/test-utils": "^1.1.0"
+    "@babel/runtime": "^7.9.6",
+    "@types/testing-library__vue": "*",
+    "@vue/test-utils": "^2.0.0-alpha.3"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.11.5",
@@ -51,6 +55,8 @@
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "axios": "^0.20.0",
+    "apollo-client": "^2.6.10",
+    "@vue/compiler-sfc": "^3.0",
     "eslint-plugin-vue": "^6.2.2",
     "graphql": "^15.3.0",
     "graphql-tag": "^2.11.0",
@@ -60,19 +66,20 @@
     "lodash.merge": "^4.6.2",
     "msw": "^0.21.2",
     "portal-vue": "^2.1.7",
+    "typescript": "^3.8.3",
     "vee-validate": "^2.2.15",
-    "vue": "^2.6.12",
+    "vue": "^3.0",
     "vue-apollo": "^3.0.4",
     "vue-i18n": "^8.21.1",
     "vue-jest": "^4.0.0-rc.0",
     "vue-router": "^3.4.5",
-    "vue-template-compiler": "^2.6.12",
+    "vue-template-compiler": "^3.0",
     "vuetify": "^2.3.10",
     "vuex": "^3.5.1"
   },
   "peerDependencies": {
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "vue": "^3.0",
+    "@vue/compiler-sfc": "^3.0"
   },
   "husky": {
     "hooks": {

From a1b91eda50ba27813ebc66113592bf930ef5c7a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:00:13 +0200
Subject: [PATCH 02/43] Identify TODOs

---
 src/vue-testing-library.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index a7cd4472..66f2e2df 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -1,5 +1,6 @@
 /* eslint-disable testing-library/no-wait-for-empty-callback */
-import {createLocalVue, mount} from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
+// import {createLocalVue, mount} from '@vue/test-utils'
 
 import {
   getQueriesForElement,
@@ -21,6 +22,7 @@ function render(
   } = {},
   configurationCb,
 ) {
+  // TODO: Can we simplify this by using attachTo?
   const div = document.createElement('div')
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
@@ -28,28 +30,30 @@ function render(
   const attachTo = document.createElement('div')
   container.appendChild(attachTo)
 
-  const localVue = createLocalVue()
+  // const localVue = createLocalVue()
   let vuexStore = null
   let router = null
   let additionalOptions = {}
 
+  // TODO: Fix VTL + Vuex (v4?)
   if (store) {
     const Vuex = require('vuex')
-    localVue.use(Vuex)
+    // localVue.use(Vuex)
     vuexStore = new Vuex.Store(store)
   }
 
+  // TODO: Fix VTL + Vue-router(next?)
   if (routes) {
     const requiredRouter = require('vue-router')
     const VueRouter = requiredRouter.default || requiredRouter
-    localVue.use(VueRouter)
+    // localVue.use(VueRouter)
     router = new VueRouter({
       routes,
     })
   }
 
   if (configurationCb && typeof configurationCb === 'function') {
-    additionalOptions = configurationCb(localVue, vuexStore, router)
+    additionalOptions = configurationCb(vuexStore, router)
   }
 
   if (!mountOptions.propsData && !!mountOptions.props) {
@@ -58,10 +62,10 @@ function render(
   }
 
   const wrapper = mount(TestComponent, {
-    localVue,
-    router,
+    // localVue,
+    // router,
+    // store: vuexStore,
     attachTo,
-    store: vuexStore,
     ...mountOptions,
     ...additionalOptions,
   })
@@ -74,10 +78,14 @@ function render(
     baseElement,
     debug: (el = baseElement) =>
       Array.isArray(el) ? el.forEach(e => logDOM(e)) : logDOM(el),
-    unmount: () => wrapper.destroy(),
-    isUnmounted: () => wrapper.vm._isDestroyed,
+    unmount: () => wrapper.unmount(),
+    // isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
+
+    // TODO: Is this unnecessary now? No need to await for a tick because
+    //       setProps() handles it for us now.
+    // We can simply expose setProps.
     updateProps: _ => {
       wrapper.setProps(_)
       return waitFor(() => {})

From 76c662486271d37a30f62cdba40052bee5e99216 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:01:31 +0200
Subject: [PATCH 03/43] Allow propsData (mark as breaking change)

---
 src/vue-testing-library.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 66f2e2df..c31f20ed 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -56,9 +56,12 @@ function render(
     additionalOptions = configurationCb(vuexStore, router)
   }
 
-  if (!mountOptions.propsData && !!mountOptions.props) {
-    mountOptions.propsData = mountOptions.props
-    delete mountOptions.props
+  // If `propsData` is provided, rename it to `props`
+  // Since this is gonna be a breaking channge, we can remove the
+  // whole thing.
+  if (!mountOptions.props && !!mountOptions.propsData) {
+    mountOptions.props = mountOptions.propsData
+    delete mountOptions.propsData
   }
 
   const wrapper = mount(TestComponent, {

From ecfc251bbebd04b7016c7906db9685c32be90278 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:01:48 +0200
Subject: [PATCH 04/43] Remove removed method

---
 src/vue-testing-library.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index c31f20ed..fcac0c23 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -1,6 +1,5 @@
 /* eslint-disable testing-library/no-wait-for-empty-callback */
 import {mount} from '@vue/test-utils'
-// import {createLocalVue, mount} from '@vue/test-utils'
 
 import {
   getQueriesForElement,

From e9d5f9520106550a0b30b507e4296b163e8842f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:05:45 +0200
Subject: [PATCH 05/43] Fix fire-event tests

---
 src/__tests__/fire-event.js | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/__tests__/fire-event.js b/src/__tests__/fire-event.js
index bced573f..a9b6d537 100644
--- a/src/__tests__/fire-event.js
+++ b/src/__tests__/fire-event.js
@@ -1,3 +1,4 @@
+import {h} from 'vue'
 import {render, fireEvent} from '@testing-library/vue'
 import Button from './components/Button'
 
@@ -120,6 +121,8 @@ const eventTypes = [
   },
 ]
 
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+
 // For each event type, we assert that the right events are being triggered
 // when the associated fireEvent method is called.
 eventTypes.forEach(({type, events, elementType = 'input', init}) => {
@@ -128,21 +131,20 @@ eventTypes.forEach(({type, events, elementType = 'input', init}) => {
       it(`triggers ${eventName}`, async () => {
         const testId = `${type}-${eventName}`
         const spy = jest.fn()
+        const eventNameHandler = `on${capitalize(eventName)}`
 
-        // Render an element with a listener of the event under testing and a
-        // test-id attribute, so that we can get the DOM node afterwards.
-        const {getByTestId} = render({
-          render(h) {
+        const componentWithEvent = {
+          render() {
             return h(elementType, {
-              on: {
-                [eventName.toLowerCase()]: spy,
-              },
-              attrs: {
-                'data-testid': testId,
-              },
+              [eventNameHandler]: spy,
+              'data-testid': testId,
             })
           },
-        })
+        }
+
+        // Render an element with a listener of the event under testing and a
+        // test-id attribute, so that we can get the DOM node afterwards.
+        const {getByTestId} = render(componentWithEvent)
 
         const elem = getByTestId(testId)
 
@@ -157,13 +159,13 @@ eventTypes.forEach(({type, events, elementType = 'input', init}) => {
 test('triggers dblclick on doubleClick', async () => {
   const spy = jest.fn()
 
-  const {getByRole} = render({
-    render(h) {
-      return h('button', {
-        on: {dblclick: spy},
-      })
+  const componentWithDblClick = {
+    render() {
+      return h('button', {onDblClick: spy}, 'Click me')
     },
-  })
+  }
+
+  const {getByRole} = render(componentWithDblClick)
 
   const elem = getByRole('button')
 

From 9d1663e88da47b0bfc962d438dbc5434dbfeb897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:06:23 +0200
Subject: [PATCH 06/43] Add basic TS config (is this needed?)

---
 tsconfig.json | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 tsconfig.json

diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..e7c8019e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "outDir": "dist",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+}

From 3659de3f66875c424c6b9aca33abe59e9bde9b51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:13:04 +0200
Subject: [PATCH 07/43] Add link to related issue

---
 src/vue-testing-library.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index fcac0c23..c9b0e2e2 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -22,6 +22,7 @@ function render(
   configurationCb,
 ) {
   // TODO: Can we simplify this by using attachTo?
+  // Related: https://github.com/vuejs/vue-test-utils-next/issues/10
   const div = document.createElement('div')
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)

From e2ae9c8546fe72dd81ded01d87a8dd38d79dd8de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:22:20 +0200
Subject: [PATCH 08/43] Fix form.vue (not sure how this is related to Vue3?

---
 src/__tests__/components/Form.vue | 146 +++++++++++++++---------------
 1 file changed, 73 insertions(+), 73 deletions(-)

diff --git a/src/__tests__/components/Form.vue b/src/__tests__/components/Form.vue
index 78b83ca9..d4e7ab85 100644
--- a/src/__tests__/components/Form.vue
+++ b/src/__tests__/components/Form.vue
@@ -1,73 +1,73 @@
-<template>
-  <div>
-    <h1>Movie Review</h1>
-    <form @submit.prevent="submit">
-      <label for="movie-input">Title of the movie</label>
-      <input id="movie-input" v-model="title" name="title" />
-
-      <label id="review-textarea">Your review</label>
-      <textarea
-        v-model="review"
-        name="review-textarea"
-        placeholder="Write an awesome review"
-        aria-labelledby="review-textarea"
-      />
-
-      <label>
-        <input v-model="rating" type="radio" value="3" />
-        Wonderful
-      </label>
-      <label>
-        <input v-model="rating" type="radio" value="2" />
-        Average
-      </label>
-      <label>
-        <input v-model="rating" type="radio" value="1" />
-        Awful
-      </label>
-
-      <label id="recommend-label">Would you recommend this movie?</label>
-      <input
-        id="recommend"
-        v-model="recommend"
-        type="checkbox"
-        name="recommend"
-      />
-
-      <button :disabled="submitDisabled" type="submit">
-        Submit
-      </button>
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: '',
-      review: '',
-      rating: '1',
-      recommend: false,
-    }
-  },
-  computed: {
-    submitDisabled() {
-      return !this.title || !this.review
-    },
-  },
-
-  methods: {
-    submit() {
-      if (this.submitDisabled) return
-
-      this.$emit('submit', {
-        title: this.title,
-        review: this.review,
-        rating: this.rating,
-        recommend: this.recommend,
-      })
-    },
-  },
-}
-</script>
+<template>
+  <div>
+    <h1>Movie Review</h1>
+    <form>
+      <label for="movie-input">Title of the movie</label>
+      <input id="movie-input" v-model="title" name="title" />
+
+      <label id="review-textarea">Your review</label>
+      <textarea
+        v-model="review"
+        name="review-textarea"
+        placeholder="Write an awesome review"
+        aria-labelledby="review-textarea"
+      />
+
+      <label>
+        <input v-model="rating" type="radio" value="3" />
+        Wonderful
+      </label>
+      <label>
+        <input v-model="rating" type="radio" value="2" />
+        Average
+      </label>
+      <label>
+        <input v-model="rating" type="radio" value="1" />
+        Awful
+      </label>
+
+      <label id="recommend-label">Would you recommend this movie?</label>
+      <input
+        id="recommend"
+        v-model="recommend"
+        type="checkbox"
+        name="recommend"
+      />
+
+      <button :disabled="submitDisabled" type="submit" @click="submit">
+        Submit
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '',
+      review: '',
+      rating: '1',
+      recommend: false,
+    }
+  },
+  computed: {
+    submitDisabled() {
+      return !this.title || !this.review
+    },
+  },
+
+  methods: {
+    submit() {
+      if (this.submitDisabled) return
+
+      this.$emit('submit', {
+        title: this.title,
+        review: this.review,
+        rating: this.rating,
+        recommend: this.recommend,
+      })
+    },
+  },
+}
+</script>

From 75b58a2b1421021156ddfd054c1b6e281836b1fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:23:01 +0200
Subject: [PATCH 09/43] =?UTF-8?q?Remove=20unrelated=20test=20=E2=80=93?=
 =?UTF-8?q?=C2=A0we=20need=20to=20add=20a=20cleaner=20way=20to=20test=20un?=
 =?UTF-8?q?mount?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/stopwatch.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/__tests__/stopwatch.js b/src/__tests__/stopwatch.js
index 26fa0fbf..996a7e9e 100644
--- a/src/__tests__/stopwatch.js
+++ b/src/__tests__/stopwatch.js
@@ -37,20 +37,3 @@ test('updates component state', async () => {
   // content has changed.
   expect(elapsedTime).toHaveTextContent(timeBeforeStop)
 })
-
-test('unmounts a component', async () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {})
-
-  const {unmount, isUnmounted, getByText} = render(StopWatch)
-  await fireEvent.click(getByText('Start'))
-
-  // Destroys a Vue component instance.
-  unmount()
-
-  expect(isUnmounted()).toBe(true)
-
-  // Wait for a few milliseconds
-  await sleep(5)
-
-  expect(console.error).not.toHaveBeenCalled()
-})

From 217599348d8c5f858253214f9e20f36162333859 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:29:34 +0200
Subject: [PATCH 10/43] Fix inline snapshot

---
 src/__tests__/axios-mock.js | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/__tests__/axios-mock.js b/src/__tests__/axios-mock.js
index 39e51bab..c4f066d8 100644
--- a/src/__tests__/axios-mock.js
+++ b/src/__tests__/axios-mock.js
@@ -4,11 +4,9 @@ import {render, fireEvent} from '@testing-library/vue'
 import Component from './components/Fetch.vue'
 
 test('mocks an API call when load-greeting is clicked', async () => {
-  axiosMock.get.mockImplementationOnce(() =>
-    Promise.resolve({
-      data: {greeting: 'hello there'},
-    }),
-  )
+  axiosMock.get.mockResolvedValueOnce({
+    data: {greeting: 'hello there'},
+  })
 
   const {html, getByText} = render(Component, {props: {url: '/greeting'}})
 
@@ -22,11 +20,7 @@ test('mocks an API call when load-greeting is clicked', async () => {
   // that Snapshot Testing should not be treated as a replacement for regular
   // tests.
   // More about the topic: https://twitter.com/searls/status/919594505938112512
-  expect(html()).toMatchInlineSnapshot(`
-    <div><button>
-        Fetch
-      </button> <span>
-        hello there
-      </span></div>
-  `)
+  expect(html()).toMatchInlineSnapshot(
+    `<div><button> Fetch </button><span>hello there</span></div>`,
+  )
 })

From 23730bcf2b3f756cbc10bbe08e3ebdab7121658c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 17:48:20 +0200
Subject: [PATCH 11/43] Fix stubs test

---
 src/__tests__/components/Stubs.vue | 15 +++++++--------
 src/__tests__/stubs.js             | 11 ++++++++++-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/__tests__/components/Stubs.vue b/src/__tests__/components/Stubs.vue
index d3f9b83c..c6d7602c 100644
--- a/src/__tests__/components/Stubs.vue
+++ b/src/__tests__/components/Stubs.vue
@@ -1,16 +1,15 @@
 <template>
-  <form>
-    <label for="search"> <FontAwesomeIcon icon="search" /> Search </label>
-    <input id="search" type="text" name="search" />
-    <VButton text="Search now" />
-  </form>
+  <directive />
 </template>
 
 <script>
-import VButton from './Button'
+import Directive from './Directive'
 
 export default {
-  name: 'SearchForm',
-  components: { VButton }
+  name: 'Stubs',
+
+  components: {
+    Directive,
+  },
 }
 </script>
diff --git a/src/__tests__/stubs.js b/src/__tests__/stubs.js
index 7be93495..7c7d672b 100644
--- a/src/__tests__/stubs.js
+++ b/src/__tests__/stubs.js
@@ -3,8 +3,17 @@ import '@testing-library/jest-dom'
 import Stubs from './components/Stubs'
 
 test('Form contains search button', () => {
+  const DirectiveMock = {
+    template: '<p>fake template</p>',
+  }
+
   const {getByText} = render(Stubs, {
-    stubs: ['FontAwesomeIcon'],
+    global: {
+      stubs: {
+        directive: DirectiveMock,
+      },
+    },
   })
+
   expect(getByText('Search now')).toBeInTheDocument()
 })

From ee56d987075f8eaa432536cc76f75320fbd0bfa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 27 Apr 2020 18:03:59 +0200
Subject: [PATCH 12/43] Rename updateProps to setProps to align with VTU

---
 src/__tests__/{update-props.js => set-props.js} | 4 ++--
 src/vue-testing-library.js                      | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)
 rename src/__tests__/{update-props.js => set-props.js} (90%)

diff --git a/src/__tests__/update-props.js b/src/__tests__/set-props.js
similarity index 90%
rename from src/__tests__/update-props.js
rename to src/__tests__/set-props.js
index edaf1593..e2d0abe1 100644
--- a/src/__tests__/update-props.js
+++ b/src/__tests__/set-props.js
@@ -7,13 +7,13 @@ import NumberDisplay from './components/NumberDisplay.vue'
 // That said, if you'd prefer to update the props of a rendered component, this
 // function can be used to update props of the rendered component.
 test('calling render with the same component but different props does not remount', async () => {
-  const {getByTestId, updateProps} = render(NumberDisplay, {
+  const {getByTestId, setProps} = render(NumberDisplay, {
     props: {number: 1},
   })
 
   expect(getByTestId('number-display')).toHaveTextContent('1')
 
-  await updateProps({number: 2})
+  await setProps({number: 2})
 
   expect(getByTestId('number-display')).toHaveTextContent('2')
 
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index c9b0e2e2..1b1d2954 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -93,6 +93,7 @@ function render(
       wrapper.setProps(_)
       return waitFor(() => {})
     },
+    setProps: props => wrapper.setProps(props),
     ...getQueriesForElement(baseElement),
   }
 }

From 8ab20b36fa6da1e31f6f4cd032fb7c57b831da5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Wed, 20 May 2020 21:17:30 +0200
Subject: [PATCH 13/43] Bump deps

---
 src/vue-testing-library.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 1b1d2954..f907eeeb 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -57,7 +57,7 @@ function render(
   }
 
   // If `propsData` is provided, rename it to `props`
-  // Since this is gonna be a breaking channge, we can remove the
+  // Since this is gonna be a breaking change, we can remove the
   // whole thing.
   if (!mountOptions.props && !!mountOptions.propsData) {
     mountOptions.props = mountOptions.propsData
@@ -111,7 +111,7 @@ function cleanupAtWrapper(wrapper) {
   }
 
   try {
-    wrapper.destroy()
+    wrapper.unmount()
   } finally {
     mountedWrappers.delete(wrapper)
   }

From b2c597c0c3a7a08066072c2ebd670681721b1fa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Wed, 20 May 2020 21:17:41 +0200
Subject: [PATCH 14/43] Silence third-party tests

---
 src/__tests__/validate-plugin.js |  50 +++++++-------
 src/__tests__/vue-i18n.js        |  82 +++++++++++-----------
 src/__tests__/vue-portal.js      |  54 ++++++++-------
 src/__tests__/vue-router.js      |  54 ++++++++-------
 src/__tests__/vuetify.js         | 115 ++++++++++++++++---------------
 src/__tests__/vuex.js            | 114 +++++++++++++++---------------
 6 files changed, 241 insertions(+), 228 deletions(-)

diff --git a/src/__tests__/validate-plugin.js b/src/__tests__/validate-plugin.js
index 725ece8b..f6236fc8 100644
--- a/src/__tests__/validate-plugin.js
+++ b/src/__tests__/validate-plugin.js
@@ -1,29 +1,31 @@
-// Notice this example is using vee-validate v2.X
-import VeeValidate from 'vee-validate'
-import '@testing-library/jest-dom'
+test.todo('Your test suite must contain at least one test.')
 
-import {render, fireEvent} from '@testing-library/vue'
-import Validate from './components/Validate'
+// // Notice this example is using vee-validate v2.X
+// import VeeValidate from 'vee-validate'
+// import '@testing-library/jest-dom'
 
-test('can validate using plugin', async () => {
-  // The third argument of `render` is a callback function that receives the
-  // Vue instance as a parameter. This way, we can register plugins such as
-  // VeeValidate.
-  const {getByPlaceholderText, queryByTestId, getByTestId} = render(
-    Validate,
-    {},
-    vue => vue.use(VeeValidate, {events: 'blur'}),
-  )
+// import {render, fireEvent} from '@testing-library/vue'
+// import Validate from './components/Validate'
 
-  // Assert error messages are not in the DOM when rendering the component.
-  expect(queryByTestId('username-errors')).toBeNull()
+// test('can validate using plugin', async () => {
+//   // The third argument of `render` is a callback function that receives the
+//   // Vue instance as a parameter. This way, we can register plugins such as
+//   // VeeValidate.
+//   const {getByPlaceholderText, queryByTestId, getByTestId} = render(
+//     Validate,
+//     {},
+//     vue => vue.use(VeeValidate, {events: 'blur'}),
+//   )
 
-  const usernameInput = getByPlaceholderText('Username...')
-  await fireEvent.touch(usernameInput)
+//   // Assert error messages are not in the DOM when rendering the component.
+//   expect(queryByTestId('username-errors')).toBeNull()
 
-  // After "touching" the input (focusing and blurring), validation error
-  // should appear.
-  expect(getByTestId('username-errors')).toHaveTextContent(
-    /the username field is required/i,
-  )
-})
+//   const usernameInput = getByPlaceholderText('Username...')
+//   await fireEvent.touch(usernameInput)
+
+//   // After "touching" the input (focusing and blurring), validation error
+//   // should appear.
+//   expect(getByTestId('username-errors')).toHaveTextContent(
+//     /the username field is required/i,
+//   )
+// })
diff --git a/src/__tests__/vue-i18n.js b/src/__tests__/vue-i18n.js
index 45f2ba7e..1ef3e438 100644
--- a/src/__tests__/vue-i18n.js
+++ b/src/__tests__/vue-i18n.js
@@ -1,40 +1,42 @@
-import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
-import Vuei18n from 'vue-i18n'
-import Translations from './components/Translations'
-
-const messages = {
-  en: {
-    Hello: 'Hello',
-  },
-  ja: {
-    Hello: 'こんにちは',
-  },
-}
-
-test('renders translations', async () => {
-  const {queryByText, getByText} = render(Translations, {}, vue => {
-    // Let's register and configure Vuei18n normally
-    vue.use(Vuei18n)
-
-    const i18n = new Vuei18n({
-      locale: 'en',
-      fallbackLocale: 'en',
-      messages,
-    })
-
-    // Notice how we return an object from the callback function. It will be
-    // merged as an additional option on the created Vue instance.
-    return {
-      i18n,
-    }
-  })
-
-  expect(getByText('Hello')).toBeInTheDocument()
-
-  await fireEvent.click(getByText('Japanese'))
-
-  expect(getByText('こんにちは')).toBeInTheDocument()
-
-  expect(queryByText('Hello')).toBeNull()
-})
+test.todo('Your test suite must contain at least one test.')
+
+// import '@testing-library/jest-dom'
+// import {render, fireEvent} from '@testing-library/vue'
+// import Vuei18n from 'vue-i18n'
+// import Translations from './components/Translations'
+
+// const messages = {
+//   en: {
+//     Hello: 'Hello',
+//   },
+//   ja: {
+//     Hello: 'こんにちは',
+//   },
+// }
+
+// test('renders translations', async () => {
+//   const {queryByText, getByText} = render(Translations, {}, vue => {
+//     // Let's register and configure Vuei18n normally
+//     vue.use(Vuei18n)
+
+//     const i18n = new Vuei18n({
+//       locale: 'en',
+//       fallbackLocale: 'en',
+//       messages,
+//     })
+
+//     // Notice how we return an object from the callback function. It will be
+//     // merged as an additional option on the created Vue instance.
+//     return {
+//       i18n,
+//     }
+//   })
+
+//   expect(getByText('Hello')).toBeInTheDocument()
+
+//   await fireEvent.click(getByText('Japanese'))
+
+//   expect(getByText('こんにちは')).toBeInTheDocument()
+
+//   expect(queryByText('Hello')).toBeNull()
+// })
diff --git a/src/__tests__/vue-portal.js b/src/__tests__/vue-portal.js
index 2e3b3eea..9128d62c 100644
--- a/src/__tests__/vue-portal.js
+++ b/src/__tests__/vue-portal.js
@@ -1,30 +1,34 @@
-import {render, waitFor} from '@testing-library/vue'
-import '@testing-library/jest-dom/extend-expect'
-import PortalVue from 'portal-vue'
+test.todo('Your test suite must contain at least one test.')
 
-const PortalComponent = {
-  template: `
-    <div>
-      <Portal to="portalName" data-testid="portal">
-        <p>Content rendered wherever the portal-target is located.</p>
-      </Portal>
+// import {render, waitFor} from '@testing-library/vue'
+// import '@testing-library/jest-dom/extend-expect'
+// import PortalVue from 'portal-vue'
 
-      <PortalTarget name="portalName" data-testid="target" />
-  </div>`,
-}
+// const PortalComponent = {
+//   template: `
+//     <div>
+//       <Portal to="portalName" data-testid="portal">
+//         <p>Content rendered wherever the portal-target is located.</p>
+//       </Portal>
 
-test('portal', async () => {
-  const {getByTestId} = render(PortalComponent, {}, vue => {
-    vue.use(PortalVue)
-  })
+//       <PortalTarget name="portalName" data-testid="target" />
+//   </div>`,
+// }
 
-  // wait until PortalVue has removed content from the source element
-  // and moved it to the target one.
-  await waitFor(() => {
-    expect(getByTestId('portal')).toBeEmptyDOMElement()
-  })
+// wait until PortalVue has removed content from the source element
+// and moved it to the target one.
+// test('portal', async () => {
+//   const {getByTestId} = render(PortalComponent, {}, vue => {
+//     vue.use(PortalVue)
+//   })
 
-  expect(getByTestId('target')).toHaveTextContent(
-    'Content rendered wherever the portal-target is located.',
-  )
-})
+//   // wait until PortalVue has removed content from the source element
+//   // and moved it to the target one.
+//   await waitFor(() => {
+//     expect(getByTestId('portal')).toBeEmptyDOMElement()
+//   })
+
+//   expect(getByTestId('target')).toHaveTextContent(
+//     'Content rendered wherever the portal-target is located.',
+//   )
+// })
diff --git a/src/__tests__/vue-router.js b/src/__tests__/vue-router.js
index 1718b2be..256c8656 100644
--- a/src/__tests__/vue-router.js
+++ b/src/__tests__/vue-router.js
@@ -1,34 +1,36 @@
-import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
+test.todo('Your test suite must contain at least one test.')
 
-import App from './components/Router/App.vue'
-import Home from './components/Router/Home.vue'
-import About from './components/Router/About.vue'
+// import '@testing-library/jest-dom'
+// import {render, fireEvent} from '@testing-library/vue'
 
-const routes = [
-  {path: '/', component: Home},
-  {path: '/about', component: About},
-  {path: '*', redirect: '/about'},
-]
+// import App from './components/Router/App.vue'
+// import Home from './components/Router/Home.vue'
+// import About from './components/Router/About.vue'
 
-test('full app rendering/navigating', async () => {
-  // Notice how we pass a `routes` object to our render function.
-  const {queryByTestId} = render(App, {routes})
+// const routes = [
+//   {path: '/', component: Home},
+//   {path: '/about', component: About},
+//   {path: '*', redirect: '/about'},
+// ]
 
-  expect(queryByTestId('location-display')).toHaveTextContent('/')
+// test('full app rendering/navigating', async () => {
+//   // Notice how we pass a `routes` object to our render function.
+//   const {queryByTestId} = render(App, {routes})
 
-  await fireEvent.click(queryByTestId('about-link'))
+//   expect(queryByTestId('location-display')).toHaveTextContent('/')
 
-  expect(queryByTestId('location-display')).toHaveTextContent('/about')
-})
+//   await fireEvent.click(queryByTestId('about-link'))
 
-test('setting initial route', () => {
-  // The callback function receives three parameters: the Vue instance where
-  // the component is mounted, the store instance (if any) and the router
-  // object.
-  const {queryByTestId} = render(App, {routes}, (vue, store, router) => {
-    router.push('/about')
-  })
+//   expect(queryByTestId('location-display')).toHaveTextContent('/about')
+// })
 
-  expect(queryByTestId('location-display')).toHaveTextContent('/about')
-})
+// test('setting initial route', () => {
+//   // The callback function receives three parameters: the Vue instance where
+//   // the component is mounted, the store instance (if any) and the router
+//   // object.
+//   const {queryByTestId} = render(App, {routes}, (vue, store, router) => {
+//     router.push('/about')
+//   })
+
+//   expect(queryByTestId('location-display')).toHaveTextContent('/about')
+// })
diff --git a/src/__tests__/vuetify.js b/src/__tests__/vuetify.js
index b0ec36af..5a7261ed 100644
--- a/src/__tests__/vuetify.js
+++ b/src/__tests__/vuetify.js
@@ -1,72 +1,73 @@
-import '@testing-library/jest-dom'
-import Vue from 'vue'
-import {render, fireEvent} from '@testing-library/vue'
-import Vuetify from 'vuetify'
-import VuetifyDemoComponent from './components/Vuetify'
+test.todo('Your test suite must contain at least one test.')
+// import '@testing-library/jest-dom'
+// import Vue from 'vue'
+// import {render, fireEvent} from '@testing-library/vue'
+// import Vuetify from 'vuetify'
+// import VuetifyDemoComponent from './components/Vuetify'
 
-// We need to use a global Vue instance, otherwise Vuetify will complain about
-// read-only attributes.
-// This could also be done in a custom Jest-test-setup file to execute for all tests.
-// More info: https://github.com/vuetifyjs/vuetify/issues/4068
-//            https://vuetifyjs.com/en/getting-started/unit-testing
-Vue.use(Vuetify)
+// // We need to use a global Vue instance, otherwise Vuetify will complain about
+// // read-only attributes.
+// // This could also be done in a custom Jest-test-setup file to execute for all tests.
+// // More info: https://github.com/vuetifyjs/vuetify/issues/4068
+// //            https://vuetifyjs.com/en/getting-started/unit-testing
+// Vue.use(Vuetify)
 
-// Custom container to integrate Vuetify with Vue Testing Library.
-// Vuetify requires you to wrap your app with a v-app component that provides
-// a <div data-app="true"> node.
-const renderWithVuetify = (component, options, callback) => {
-  const root = document.createElement('div')
-  root.setAttribute('data-app', 'true')
+// // Custom container to integrate Vuetify with Vue Testing Library.
+// // Vuetify requires you to wrap your app with a v-app component that provides
+// // a <div data-app="true"> node.
+// const renderWithVuetify = (component, options, callback) => {
+//   const root = document.createElement('div')
+//   root.setAttribute('data-app', 'true')
 
-  return render(
-    component,
-    {
-      container: document.body.appendChild(root),
-      // for Vuetify components that use the $vuetify instance property
-      vuetify: new Vuetify(),
-      ...options,
-    },
-    callback,
-  )
-}
+//   return render(
+//     component,
+//     {
+//       container: document.body.appendChild(root),
+//       // for Vuetify components that use the $vuetify instance property
+//       vuetify: new Vuetify(),
+//       ...options,
+//     },
+//     callback,
+//   )
+// }
 
-test('should set [data-app] attribute on outer most div', () => {
-  const {container} = renderWithVuetify(VuetifyDemoComponent)
+// test('should set [data-app] attribute on outer most div', () => {
+//   const {container} = renderWithVuetify(VuetifyDemoComponent)
 
-  expect(container).toHaveAttribute('data-app', 'true')
-})
+//   expect(container).toHaveAttribute('data-app', 'true')
+// })
 
-test('renders a Vuetify-powered component', async () => {
-  const {getByText} = renderWithVuetify(VuetifyDemoComponent)
+// test('renders a Vuetify-powered component', async () => {
+//   const {getByText} = renderWithVuetify(VuetifyDemoComponent)
 
-  await fireEvent.click(getByText('open'))
+//   await fireEvent.click(getByText('open'))
 
-  expect(getByText('Lorem ipsum dolor sit amet.')).toMatchInlineSnapshot(`
-    <div
-      class="v-card__text"
-    >
-      Lorem ipsum dolor sit amet.
-    </div>
-  `)
-})
+//   expect(getByText('Lorem ipsum dolor sit amet.')).toMatchInlineSnapshot(`
+//     <div
+//       class="v-card__text"
+//     >
+//       Lorem ipsum dolor sit amet.
+//     </div>
+//   `)
+// })
 
-test('opens a menu', async () => {
-  const {getByRole, getByText, queryByText} = renderWithVuetify(
-    VuetifyDemoComponent,
-  )
+// test('opens a menu', async () => {
+//   const {getByRole, getByText, queryByText} = renderWithVuetify(
+//     VuetifyDemoComponent,
+//   )
 
-  const openMenuButton = getByRole('button', {name: 'open menu'})
+//   const openMenuButton = getByRole('button', {name: 'open menu'})
 
-  // Menu item is not rendered initially
-  expect(queryByText('menu item')).not.toBeInTheDocument()
+//   // Menu item is not rendered initially
+//   expect(queryByText('menu item')).not.toBeInTheDocument()
 
-  await fireEvent.click(openMenuButton)
+//   await fireEvent.click(openMenuButton)
 
-  const menuItem = getByText('menu item')
-  expect(menuItem).toBeInTheDocument()
+//   const menuItem = getByText('menu item')
+//   expect(menuItem).toBeInTheDocument()
 
-  await fireEvent.click(openMenuButton)
+//   await fireEvent.click(openMenuButton)
 
-  expect(menuItem).toBeInTheDocument()
-  expect(menuItem).not.toBeVisible()
-})
+//   expect(menuItem).toBeInTheDocument()
+//   expect(menuItem).not.toBeVisible()
+// })
diff --git a/src/__tests__/vuex.js b/src/__tests__/vuex.js
index f77206e6..e2b0934c 100644
--- a/src/__tests__/vuex.js
+++ b/src/__tests__/vuex.js
@@ -1,56 +1,58 @@
-import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
-
-import VuexTest from './components/Store/VuexTest'
-import {store} from './components/Store/store'
-
-// A common testing pattern is to create a custom renderer for a specific test
-// file. This way, common operations such as registering a Vuex store can be
-// abstracted out while avoiding sharing mutable state.
-//
-// Tests should be completely isolated from one another.
-// Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
-function renderVuexTestComponent(customStore) {
-  // Render the component and merge the original store and the custom one
-  // provided as a parameter. This way, we can alter some behaviors of the
-  // initial implementation.
-  return render(VuexTest, {store: {...store, ...customStore}})
-}
-
-test('can render with vuex with defaults', async () => {
-  const {getByTestId, getByText} = renderVuexTestComponent()
-  await fireEvent.click(getByText('+'))
-
-  expect(getByTestId('count-value')).toHaveTextContent('1')
-})
-
-test('can render with vuex with custom initial state', async () => {
-  const {getByTestId, getByText} = renderVuexTestComponent({
-    state: {count: 3},
-  })
-  await fireEvent.click(getByText('-'))
-
-  expect(getByTestId('count-value')).toHaveTextContent('2')
-})
-
-test('can render with vuex with custom store', async () => {
-  // This is a silly store that can never be changed.
-  // eslint-disable-next-line no-shadow
-  const store = {
-    state: {count: 1000},
-    actions: {
-      increment: () => jest.fn(),
-      decrement: () => jest.fn(),
-    },
-  }
-
-  // Notice how here we are not using the helper method, because there's no
-  // need to do that.
-  const {getByTestId, getByText} = render(VuexTest, {store})
-
-  await fireEvent.click(getByText('+'))
-  expect(getByTestId('count-value')).toHaveTextContent('1000')
-
-  await fireEvent.click(getByText('-'))
-  expect(getByTestId('count-value')).toHaveTextContent('1000')
-})
+test.todo('Your test suite must contain at least one test.')
+
+// import '@testing-library/jest-dom'
+// import {render, fireEvent} from '@testing-library/vue'
+
+// import VuexTest from './components/Store/VuexTest'
+// import {store} from './components/Store/store'
+
+// // A common testing pattern is to create a custom renderer for a specific test
+// // file. This way, common operations such as registering a Vuex store can be
+// // abstracted out while avoiding sharing mutable state.
+// //
+// // Tests should be completely isolated from one another.
+// // Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
+// function renderVuexTestComponent(customStore) {
+//   // Render the component and merge the original store and the custom one
+//   // provided as a parameter. This way, we can alter some behaviors of the
+//   // initial implementation.
+//   return render(VuexTest, {store: {...store, ...customStore}})
+// }
+
+// test('can render with vuex with defaults', async () => {
+//   const {getByTestId, getByText} = renderVuexTestComponent()
+//   await fireEvent.click(getByText('+'))
+
+//   expect(getByTestId('count-value')).toHaveTextContent('1')
+// })
+
+// test('can render with vuex with custom initial state', async () => {
+//   const {getByTestId, getByText} = renderVuexTestComponent({
+//     state: {count: 3},
+//   })
+//   await fireEvent.click(getByText('-'))
+
+//   expect(getByTestId('count-value')).toHaveTextContent('2')
+// })
+
+// test('can render with vuex with custom store', async () => {
+//   // This is a silly store that can never be changed.
+//   // eslint-disable-next-line no-shadow
+//   const store = {
+//     state: {count: 1000},
+//     actions: {
+//       increment: () => jest.fn(),
+//       decrement: () => jest.fn(),
+//     },
+//   }
+
+//   // Notice how here we are not using the helper method, because there's no
+//   // need to do that.
+//   const {getByTestId, getByText} = render(VuexTest, {store})
+
+//   await fireEvent.click(getByText('+'))
+//   expect(getByTestId('count-value')).toHaveTextContent('1000')
+
+//   await fireEvent.click(getByText('-'))
+//   expect(getByTestId('count-value')).toHaveTextContent('1000')
+// })

From fa3b7bfe3641f43f82a4ba7a3a163db20832bd97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 22 May 2020 12:31:59 +0200
Subject: [PATCH 15/43] Remove outdated comment

---
 src/vue-testing-library.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index f907eeeb..9177575e 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -21,8 +21,6 @@ function render(
   } = {},
   configurationCb,
 ) {
-  // TODO: Can we simplify this by using attachTo?
-  // Related: https://github.com/vuejs/vue-test-utils-next/issues/10
   const div = document.createElement('div')
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)

From a1fca690c77e26ebd6846f246414c73c1e51d17e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 22 May 2020 12:32:32 +0200
Subject: [PATCH 16/43] Comment out tests that relies on vue2 initialization
 and setting up

---
 src/__tests__/functional.js | 38 ++++++++++--------
 src/__tests__/vueI18n.js    | 78 +++++++++++++++++++------------------
 2 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/src/__tests__/functional.js b/src/__tests__/functional.js
index b6850e55..d24a219f 100644
--- a/src/__tests__/functional.js
+++ b/src/__tests__/functional.js
@@ -1,22 +1,26 @@
-import {render} from '@testing-library/vue'
-import '@testing-library/jest-dom'
-import FunctionalSFC from './components/FunctionalSFC'
+test.todo('Your test suite must contain at least one test.')
+// import {render} from '@testing-library/vue'
+// import '@testing-library/jest-dom'
+// import FunctionalSFC from './components/FunctionalSFC'
 
-const Functional = {
-  functional: true,
-  render(createElement) {
-    return createElement('p', null, 'Hi!')
-  },
-}
+// import {render} from '@testing-library/vue'
+// import FunctionalSFC from './components/FunctionalSFC'
 
-test('renders functional component', () => {
-  const {getByText} = render(Functional)
+// const Functional = {
+//   functional: true,
+//   render(createElement) {
+//     return createElement('p', null, 'Hi!')
+//   },
+// }
 
-  expect(getByText('Hi!')).toBeInTheDocument()
-})
+// test('renders functional component', () => {
+//   const {getByText} = render(Functional)
 
-test('renders functional SFC component', () => {
-  const {getByText} = render(FunctionalSFC)
+//   expect(getByText('Hi!')).toBeInTheDocument()
+// })
 
-  expect(getByText('Hi!')).toBeInTheDocument()
-})
+// test('renders functional SFC component', () => {
+//   const {getByText} = render(FunctionalSFC)
+
+//   expect(getByText('Hi!')).toBeInTheDocument()
+// })
diff --git a/src/__tests__/vueI18n.js b/src/__tests__/vueI18n.js
index d61545ac..2ac7ad94 100644
--- a/src/__tests__/vueI18n.js
+++ b/src/__tests__/vueI18n.js
@@ -1,38 +1,40 @@
-import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
-import Vuei18n from 'vue-i18n'
-import VueI18n from './components/VueI18n'
-
-const messages = {
-  en: {
-    Hello: 'Hello',
-  },
-  ja: {
-    Hello: 'こんにちは',
-  },
-}
-
-test('renders translations', async () => {
-  const {queryByText, getByText} = render(VueI18n, {}, vue => {
-    // Let's register Vuei18n normally
-    vue.use(Vuei18n)
-
-    const i18n = new Vuei18n({
-      locale: 'en',
-      fallbackLocale: 'en',
-      messages,
-    })
-
-    // Notice how we return an object from the callback function. It will be
-    // available as an additional option on the created Vue instance.
-    return {i18n}
-  })
-
-  expect(getByText('Hello')).toBeInTheDocument()
-
-  await fireEvent.click(getByText('Japanese'))
-
-  expect(getByText('こんにちは')).toBeInTheDocument()
-
-  expect(queryByText('Hello')).toBeNull()
-})
+test.todo('Your test suite must contain at least one test.')
+
+// import '@testing-library/jest-dom'
+// import {render, fireEvent} from '@testing-library/vue'
+// import Vuei18n from 'vue-i18n'
+// import VueI18n from './components/VueI18n'
+
+// const messages = {
+//   en: {
+//     Hello: 'Hello',
+//   },
+//   ja: {
+//     Hello: 'こんにちは',
+//   },
+// }
+
+// test('renders translations', async () => {
+//   const {queryByText, getByText} = render(VueI18n, {}, vue => {
+//     // Let's register Vuei18n normally
+//     vue.use(Vuei18n)
+
+//     const i18n = new Vuei18n({
+//       locale: 'en',
+//       fallbackLocale: 'en',
+//       messages,
+//     })
+
+//     // Notice how we return an object from the callback function. It will be
+//     // available as an additional option on the created Vue instance.
+//     return {i18n}
+//   })
+
+//   expect(getByText('Hello')).toBeInTheDocument()
+
+//   await fireEvent.click(getByText('Japanese'))
+
+//   expect(getByText('こんにちは')).toBeInTheDocument()
+
+//   expect(queryByText('Hello')).toBeNull()
+// })

From 7af298a794f5cbc8e55b96e598be268ddfeadfca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 7 Jun 2020 18:50:06 +0200
Subject: [PATCH 17/43] Comment out vue-apollo (relies on vue2)

---
 src/__tests__/vue-apollo.js | 119 ++++++++++++++++++------------------
 1 file changed, 60 insertions(+), 59 deletions(-)

diff --git a/src/__tests__/vue-apollo.js b/src/__tests__/vue-apollo.js
index b9f4bdd0..2c8cd316 100644
--- a/src/__tests__/vue-apollo.js
+++ b/src/__tests__/vue-apollo.js
@@ -1,74 +1,75 @@
-import '@testing-library/jest-dom'
-import fetch from 'isomorphic-unfetch'
-import {render, fireEvent, screen} from '@testing-library/vue'
-import VueApollo from 'vue-apollo'
-import {InMemoryCache} from 'apollo-cache-inmemory'
-import ApolloClient from 'apollo-boost'
+test.todo('Your test suite must contain at least one test.')
+// import '@testing-library/jest-dom'
+// import fetch from 'isomorphic-unfetch'
+// import {render, fireEvent, screen} from '@testing-library/vue'
+// import VueApollo from 'vue-apollo'
+// import {InMemoryCache} from 'apollo-cache-inmemory'
+// import ApolloClient from 'apollo-boost'
 
-// Since vue-apollo doesn't provides a MockProvider for Vue,
-// you need to use some kind of mocks for the queries.
+// // Since vue-apollo doesn't provides a MockProvider for Vue,
+// // you need to use some kind of mocks for the queries.
 
-// We recommend using Mock Service Worker library to declaratively mock API communication
-// in your tests instead of stubbing window.fetch, or relying on third-party adapters.
+// // We recommend using Mock Service Worker library to declaratively mock API communication
+// // in your tests instead of stubbing window.fetch, or relying on third-party adapters.
 
-import {setupServer} from 'msw/node'
-import {graphql} from 'msw'
+// import {setupServer} from 'msw/node'
+// import {graphql} from 'msw'
 
-import Component from './components/VueApollo.vue'
+// import Component from './components/VueApollo.vue'
 
-const apolloClient = new ApolloClient({
-  uri: 'http://localhost:3020/graphql',
-  cache: new InMemoryCache({
-    addTypename: false,
-  }),
-  fetch,
-})
+// const apolloClient = new ApolloClient({
+//   uri: 'http://localhost:3020/graphql',
+//   cache: new InMemoryCache({
+//     addTypename: false,
+//   }),
+//   fetch,
+// })
 
-const server = setupServer(
-  ...[
-    graphql.mutation('updateUser', (req, res, ctx) => {
-      const {variables} = req
+// const server = setupServer(
+//   ...[
+//     graphql.mutation('updateUser', (req, res, ctx) => {
+//       const {variables} = req
 
-      return res(
-        ctx.data({
-          updateUser: {id: variables.input.id, email: variables.input.email},
-        }),
-      )
-    }),
-    graphql.query('User', (req, res, ctx) => {
-      return res(ctx.data({user: {id: '1', email: 'alice@example.com'}}))
-    }),
-  ],
-)
+//       return res(
+//         ctx.data({
+//           updateUser: {id: variables.input.id, email: variables.input.email},
+//         }),
+//       )
+//     }),
+//     graphql.query('User', (req, res, ctx) => {
+//       return res(ctx.data({user: {id: '1', email: 'alice@example.com'}}))
+//     }),
+//   ],
+// )
 
-beforeAll(() => server.listen())
-afterEach(() => server.resetHandlers())
-afterAll(() => server.close())
+// beforeAll(() => server.listen())
+// afterEach(() => server.resetHandlers())
+// afterAll(() => server.close())
 
-test('mocking queries and mutations', async () => {
-  render(Component, {props: {id: '1'}}, localVue => {
-    localVue.use(VueApollo)
+// test('mocking queries and mutations', async () => {
+//   render(Component, {props: {id: '1'}}, localVue => {
+//     localVue.use(VueApollo)
 
-    return {
-      apolloProvider: new VueApollo({defaultClient: apolloClient}),
-    }
-  })
+//     return {
+//       apolloProvider: new VueApollo({defaultClient: apolloClient}),
+//     }
+//   })
 
-  //Initial rendering will be in the loading state,
-  expect(screen.getByText('Loading')).toBeInTheDocument()
+//   //Initial rendering will be in the loading state,
+//   expect(screen.getByText('Loading')).toBeInTheDocument()
 
-  expect(
-    await screen.findByText('Email: alice@example.com'),
-  ).toBeInTheDocument()
+//   expect(
+//     await screen.findByText('Email: alice@example.com'),
+//   ).toBeInTheDocument()
 
-  await fireEvent.update(
-    screen.getByLabelText('Email'),
-    'alice+new@example.com',
-  )
+//   await fireEvent.update(
+//     screen.getByLabelText('Email'),
+//     'alice+new@example.com',
+//   )
 
-  await fireEvent.click(screen.getByRole('button', {name: 'Change email'}))
+//   await fireEvent.click(screen.getByRole('button', {name: 'Change email'}))
 
-  expect(
-    await screen.findByText('Email: alice+new@example.com'),
-  ).toBeInTheDocument()
-})
+//   expect(
+//     await screen.findByText('Email: alice+new@example.com'),
+//   ).toBeInTheDocument()
+// })

From 650ff5aebc3c4472a6ceb7954b9954d44b7b1365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 8 Jun 2020 16:57:29 +0200
Subject: [PATCH 18/43] Comment out test that rely on vue2

---
 src/__tests__/directive.js | 34 +++++++++++------------
 src/__tests__/slots.js     | 56 ++++++++++++++++++++------------------
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/__tests__/directive.js b/src/__tests__/directive.js
index d4fe29c0..4765d126 100644
--- a/src/__tests__/directive.js
+++ b/src/__tests__/directive.js
@@ -1,20 +1,20 @@
-import {render} from '@testing-library/vue'
-import '@testing-library/jest-dom'
-import {uppercaseDirective} from './directives/uppercase-directive'
-import Directive from './components/Directive'
+test.todo('Your test suite must contain at least one test.')
 
-// We are about to test an easy vue directive, that we have implemented,
-// named v-uppercawse.
-test('Component with a custom directive', () => {
-  // Do not forget to add the new custom directive to the render function as
-  // the third parameter.
-  const {queryByText, getByText} = render(Directive, {}, vue =>
-    vue.directive('uppercase', uppercaseDirective),
-  )
+// import {render} from '@testing-library/vue'
+// import '@testing-library/jest-dom'
+// import {uppercaseDirective} from './directives/uppercase-directive'
+// import Directive from './components/Directive'
 
-  // Test that the text in lower case does not appear in the DOM
-  expect(queryByText('example text')).not.toBeInTheDocument()
+// test('Component with a custom directive', () => {
+//   // Do not forget to add the new custom directive to the render function as
+//   // the third parameter.
+//   const {queryByText, getByText} = render(Directive, {}, vue =>
+//     vue.directive('uppercase', uppercaseDirective),
+//   )
 
-  // Test that the text in upper case does appear in the DOM thanks to the directive
-  expect(getByText('EXAMPLE TEXT')).toBeInTheDocument()
-})
+//   // Test that the text in lower case does not appear in the DOM
+//   expect(queryByText('example text')).not.toBeInTheDocument()
+
+//   // Test that the text in upper case does appear in the DOM thanks to the directive
+//   expect(getByText('EXAMPLE TEXT')).toBeInTheDocument()
+// })
diff --git a/src/__tests__/slots.js b/src/__tests__/slots.js
index 6641d270..e606bca4 100644
--- a/src/__tests__/slots.js
+++ b/src/__tests__/slots.js
@@ -1,32 +1,34 @@
-import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
-import Card from './components/Card'
+test.todo('Your test suite must contain at least one test.')
 
-// In this test file we demo how to test a component with slots and a scoped slot.
+// import '@testing-library/jest-dom'
+// import {render} from '@testing-library/vue'
+// import Card from './components/Card'
 
-// Usage is the same as Vue Test Utils, since slots and scopedSlots
-// in the render options are directly passed through to the Utils mount().
-// For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
-test('Card component', () => {
-  const {getByText, queryByText} = render(Card, {
-    slots: {
-      header: '<h1>HEADER</h1>',
-      footer: '<div>FOOTER</div>',
-    },
-    scopedSlots: {
-      default: '<p>Yay! {{props.content}}</p>',
-    },
-  })
+// // In this test file we demo how to test a component with slots and a scoped slot.
 
-  // The default slot should render the template above with the scoped prop "content".
-  expect(getByText('Yay! Scoped content!')).toBeInTheDocument()
+// // Usage is the same as Vue Test Utils, since slots and scopedSlots
+// // in the render options are directly passed through to the Utils mount().
+// // For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
+// test('Card component', () => {
+//   const {getByText, queryByText} = render(Card, {
+//     slots: {
+//       header: '<h1>HEADER</h1>',
+//       footer: '<div>FOOTER</div>',
+//     },
+//     scopedSlots: {
+//       default: '<p>Yay! {{props.content}}</p>',
+//     },
+//   })
 
-  // Instead of the default slot's fallback content.
-  expect(
-    queryByText('Nothing used the Scoped content!'),
-  ).not.toBeInTheDocument()
+//   // The default slot should render the template above with the scoped prop "content".
+//   expect(getByText('Yay! Scoped content!')).toBeInTheDocument()
 
-  // And the header and footer slots should be rendered with the given templates.
-  expect(getByText('HEADER')).toBeInTheDocument()
-  expect(getByText('FOOTER')).toBeInTheDocument()
-})
+//   // Instead of the default slot's fallback content.
+//   expect(
+//     queryByText('Nothing used the Scoped content!'),
+//   ).not.toBeInTheDocument()
+
+//   // And the header and footer slots should be rendered with the given templates.
+//   expect(getByText('HEADER')).toBeInTheDocument()
+//   expect(getByText('FOOTER')).toBeInTheDocument()
+// })

From 09adb61b48f1ec3389089d3bf27777f4ab584dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 8 Jun 2020 20:30:42 +0200
Subject: [PATCH 19/43] Comment out potential deprecated test

---
 src/__tests__/cleanup-throw.js | 42 ++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/__tests__/cleanup-throw.js b/src/__tests__/cleanup-throw.js
index b8ba9fd7..828820f2 100644
--- a/src/__tests__/cleanup-throw.js
+++ b/src/__tests__/cleanup-throw.js
@@ -1,23 +1,25 @@
-import {render, cleanup} from '@testing-library/vue'
-import Vue from 'vue'
+test.todo('check if this test still makes sense')
 
-test('cleanup re-throws errors from async lifecycle hooks', async () => {
-  const err = new Error('foo')
-  render({
-    async mounted() {
-      await new Promise((resolve, reject) => {
-        reject(err)
-      })
-    },
-    template: `<h1>Hello World</h1>`,
-  })
-  // thrown errors are logged redundantly by vue-test-utils injected Vue.config.errorHandler
-  // mute console
-  const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
+// import {render, cleanup} from '@testing-library/vue'
+// import {nextTick} from 'vue'
 
-  await Vue.nextTick()
-  expect(cleanup).toThrow(err)
+// test('cleanup re-throws errors from async lifecycle hooks', async () => {
+//   const err = new Error('foo')
+//   render({
+//     async mounted() {
+//       await new Promise((resolve, reject) => {
+//         reject(err)
+//       })
+//     },
+//     template: `<h1>Hello World</h1>`,
+//   })
+//   // thrown errors are logged redundantly by vue-test-utils injected Vue.config.errorHandler
+//   // mute console
+//   const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
 
-  // unmute console
-  spy.mockReset()
-})
+//   await nextTick()
+//   expect(cleanup).toThrow(err)
+
+//   // unmute console
+//   spy.mockReset()
+// })

From b80926b408d61d948b7867e6eae30e41f9434bb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 8 Jun 2020 20:31:24 +0200
Subject: [PATCH 20/43] Cleanup template

---
 src/__tests__/auto-cleanup.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/auto-cleanup.js b/src/__tests__/auto-cleanup.js
index 8d5412ae..8255c083 100644
--- a/src/__tests__/auto-cleanup.js
+++ b/src/__tests__/auto-cleanup.js
@@ -1,12 +1,11 @@
 import {render} from '@testing-library/vue'
 import '@testing-library/jest-dom'
 
-// This just verifies that by importing VTL in an environment which supports
+// This verifies that by importing VTL in an environment which supports
 // afterEach (like jest) we'll get automatic cleanup between tests.
-test('render the first component', () => {
-  render({
-    template: `<h1>Hello World</h1>`,
-  })
+test('renders the component', () => {
+  render({template: `<h1>Hello World</h1>`})
+
   expect(document.body.innerHTML).toMatchInlineSnapshot(`
     <div>
       <h1>Hello World</h1>

From 2b0721071a3de23d36f11bb622dba014ea092ed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 8 Jun 2020 20:33:11 +0200
Subject: [PATCH 21/43] Fix autocleanup tests

---
 src/vue-testing-library.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 9177575e..27e69776 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -25,9 +25,6 @@ function render(
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
-  const attachTo = document.createElement('div')
-  container.appendChild(attachTo)
-
   // const localVue = createLocalVue()
   let vuexStore = null
   let router = null
@@ -66,13 +63,16 @@ function render(
     // localVue,
     // router,
     // store: vuexStore,
-    attachTo,
+    attachTo: container,
     ...mountOptions,
     ...additionalOptions,
   })
 
   mountedWrappers.add(wrapper)
-  container.appendChild(wrapper.element)
+
+  // hack to remove id="app"
+  // this fixes tests in auto-cleanup.js and auto-cleanup-skip.js
+  wrapper.parentElement.removeAttribute('id')
 
   return {
     container,

From 9e26a036ce1e79cc8cf08190eca8c59adc61207d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 23 Aug 2020 11:30:50 +0200
Subject: [PATCH 22/43] Fix warning on onsubmit jsdom

---
 src/__tests__/components/Form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/components/Form.vue b/src/__tests__/components/Form.vue
index d4e7ab85..809bf316 100644
--- a/src/__tests__/components/Form.vue
+++ b/src/__tests__/components/Form.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>Movie Review</h1>
-    <form>
+    <form onsubmit="return false">
       <label for="movie-input">Title of the movie</label>
       <input id="movie-input" v-model="title" name="title" />
 

From 848388917d6cc2081b4cf03978d63ea64a2f2299 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 23 Aug 2020 11:44:03 +0200
Subject: [PATCH 23/43] Bump vue deps

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index cffb4237..84e52fed 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,9 @@
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@testing-library/jest-dom": "^5.11.4",
     "apollo-boost": "^0.4.9",
+    "@testing-library/dom": "^7.5.7",
+    "@types/testing-library__vue": "*",
+    "@vue/test-utils": "^2.0.0-beta.2",
     "apollo-cache-inmemory": "^1.6.6",
     "axios": "^0.20.0",
     "apollo-client": "^2.6.10",

From a333bba213610a36c82df091c5569a56e38c7a72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 23 Aug 2020 11:44:14 +0200
Subject: [PATCH 24/43] Fix failing stubs tests

---
 src/__tests__/stubs.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/stubs.js b/src/__tests__/stubs.js
index 7c7d672b..f255b15c 100644
--- a/src/__tests__/stubs.js
+++ b/src/__tests__/stubs.js
@@ -2,15 +2,16 @@ import {render} from '@testing-library/vue'
 import '@testing-library/jest-dom'
 import Stubs from './components/Stubs'
 
-test('Form contains search button', () => {
-  const DirectiveMock = {
-    template: '<p>fake template</p>',
+test('Stubs out a component', () => {
+  const CustomStub = {
+    template: '<p>Search now</p>',
   }
 
   const {getByText} = render(Stubs, {
     global: {
       stubs: {
-        directive: DirectiveMock,
+        // "Directive" is the stubbed out component
+        Directive: CustomStub,
       },
     },
   })

From 690df459d71b841ec97fe64e6513bf63feed3a34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 9 Oct 2020 16:34:17 +0200
Subject: [PATCH 25/43] Update deps

---
 package.json  | 14 +++++---------
 tsconfig.json | 10 ----------
 2 files changed, 5 insertions(+), 19 deletions(-)
 delete mode 100644 tsconfig.json

diff --git a/package.json b/package.json
index 84e52fed..f384c1fa 100644
--- a/package.json
+++ b/package.json
@@ -47,19 +47,16 @@
     "@testing-library/dom": "^7.24.3",
     "@babel/runtime": "^7.9.6",
     "@types/testing-library__vue": "*",
-    "@vue/test-utils": "^2.0.0-alpha.3"
+    "@vue/test-utils": "^2.0.0-beta.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@testing-library/jest-dom": "^5.11.4",
+    "@vue/compiler-sfc": "^3.0",
     "apollo-boost": "^0.4.9",
-    "@testing-library/dom": "^7.5.7",
-    "@types/testing-library__vue": "*",
-    "@vue/test-utils": "^2.0.0-beta.2",
     "apollo-cache-inmemory": "^1.6.6",
-    "axios": "^0.20.0",
     "apollo-client": "^2.6.10",
-    "@vue/compiler-sfc": "^3.0",
+    "axios": "^0.20.0",
     "eslint-plugin-vue": "^6.2.2",
     "graphql": "^15.3.0",
     "graphql-tag": "^2.11.0",
@@ -71,12 +68,11 @@
     "portal-vue": "^2.1.7",
     "typescript": "^3.8.3",
     "vee-validate": "^2.2.15",
-    "vue": "^3.0",
+    "vue": "^3.0.0",
     "vue-apollo": "^3.0.4",
     "vue-i18n": "^8.21.1",
-    "vue-jest": "^4.0.0-rc.0",
+    "vue-jest": "^5.0.0-alpha.4",
     "vue-router": "^3.4.5",
-    "vue-template-compiler": "^3.0",
     "vuetify": "^2.3.10",
     "vuex": "^3.5.1"
   },
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index e7c8019e..00000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "outDir": "dist",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "esModuleInterop": true
-  },
-  "include": ["src"]
-}

From 553a8b0c47079ad3c5a038597f976a14cbfd08e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 9 Oct 2020 17:35:34 +0200
Subject: [PATCH 26/43] Rename lifecycle method

---
 src/__tests__/components/StopWatch.vue | 76 +++++++++++++-------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/__tests__/components/StopWatch.vue b/src/__tests__/components/StopWatch.vue
index b239a672..ca94507d 100644
--- a/src/__tests__/components/StopWatch.vue
+++ b/src/__tests__/components/StopWatch.vue
@@ -1,38 +1,38 @@
-<template>
-  <div>
-    <span data-testid="elapsed">{{ lapse }}ms</span>
-    <button @click="handleRunClick">
-      {{ running ? 'Stop' : 'Start' }}
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      running: false,
-      lapse: 0,
-      timer: null
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-  methods: {
-    handleRunClick() {
-      if (this.running) {
-        clearInterval(this.timer)
-      } else {
-        const startTime = Date.now() - this.lapse
-
-        this.timer = setInterval(() => {
-          this.lapse = Date.now() - startTime
-        })
-      }
-
-      this.running = !this.running
-    }
-  }
-}
-</script>
+<template>
+  <div>
+    <span data-testid="elapsed">{{ lapse }}ms</span>
+    <button @click="handleRunClick">
+      {{ running ? 'Stop' : 'Start' }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      running: false,
+      lapse: 0,
+      timer: null,
+    }
+  },
+  beforeUnmount() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    handleRunClick() {
+      if (this.running) {
+        clearInterval(this.timer)
+      } else {
+        const startTime = Date.now() - this.lapse
+
+        this.timer = setInterval(() => {
+          this.lapse = Date.now() - startTime
+        })
+      }
+
+      this.running = !this.running
+    },
+  },
+}
+</script>

From 1a6274d42e64876ab2709f5f7bd3ed4b2ead2d1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 9 Oct 2020 18:10:25 +0200
Subject: [PATCH 27/43] Fix directive example

---
 src/__tests__/directive.js                    | 32 +++++++++----------
 .../directives/uppercase-directive.js         | 10 +++---
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/__tests__/directive.js b/src/__tests__/directive.js
index 4765d126..5cf4981f 100644
--- a/src/__tests__/directive.js
+++ b/src/__tests__/directive.js
@@ -1,20 +1,18 @@
-test.todo('Your test suite must contain at least one test.')
+import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom'
+import {uppercaseDirective} from './directives/uppercase-directive'
+import ComponentUsingDirective from './components/Directive'
 
-// import {render} from '@testing-library/vue'
-// import '@testing-library/jest-dom'
-// import {uppercaseDirective} from './directives/uppercase-directive'
-// import Directive from './components/Directive'
+test('Component with a custom directive', () => {
+  const {queryByText, getByText} = render(ComponentUsingDirective, {
+    global: {
+      directives: {uppercase: uppercaseDirective},
+    },
+  })
 
-// test('Component with a custom directive', () => {
-//   // Do not forget to add the new custom directive to the render function as
-//   // the third parameter.
-//   const {queryByText, getByText} = render(Directive, {}, vue =>
-//     vue.directive('uppercase', uppercaseDirective),
-//   )
+  // Test that the text in lower case does not appear in the DOM
+  expect(queryByText('example text')).not.toBeInTheDocument()
 
-//   // Test that the text in lower case does not appear in the DOM
-//   expect(queryByText('example text')).not.toBeInTheDocument()
-
-//   // Test that the text in upper case does appear in the DOM thanks to the directive
-//   expect(getByText('EXAMPLE TEXT')).toBeInTheDocument()
-// })
+  // Test that the text in upper case does appear in the DOM thanks to the directive
+  expect(getByText('EXAMPLE TEXT')).toBeInTheDocument()
+})
diff --git a/src/__tests__/directives/uppercase-directive.js b/src/__tests__/directives/uppercase-directive.js
index 1c95eee2..5345dc84 100644
--- a/src/__tests__/directives/uppercase-directive.js
+++ b/src/__tests__/directives/uppercase-directive.js
@@ -1,6 +1,6 @@
-// This function converts the received text passed to the
-// v-uppercase directive used in the Directive.vue component
-// to upper case and this is appended to the <p> element
-export function uppercaseDirective(el, binding) {
-  el.innerHTML = binding.value.toUpperCase()
+// This directive converts any text into its uppercase version
+export const uppercaseDirective = {
+  beforeMount(el, binding) {
+    el.innerHTML = binding.value.toUpperCase()
+  },
 }

From 34e276e837842730d66d92d38d615f75883606c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 9 Oct 2020 18:14:33 +0200
Subject: [PATCH 28/43] Remove updateProps

---
 src/vue-testing-library.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 27e69776..dd22a3b5 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -83,14 +83,6 @@ function render(
     // isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
-
-    // TODO: Is this unnecessary now? No need to await for a tick because
-    //       setProps() handles it for us now.
-    // We can simply expose setProps.
-    updateProps: _ => {
-      wrapper.setProps(_)
-      return waitFor(() => {})
-    },
     setProps: props => wrapper.setProps(props),
     ...getQueriesForElement(baseElement),
   }

From e61a9aeac722921b60cf485246b28c7832f0e576 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 9 Oct 2020 18:23:07 +0200
Subject: [PATCH 29/43] Simplify the slots example

---
 src/__tests__/components/Card.vue | 16 -----------
 src/__tests__/slots.js            | 47 ++++++++++---------------------
 2 files changed, 15 insertions(+), 48 deletions(-)

diff --git a/src/__tests__/components/Card.vue b/src/__tests__/components/Card.vue
index 9174e499..c62ee1b4 100644
--- a/src/__tests__/components/Card.vue
+++ b/src/__tests__/components/Card.vue
@@ -1,22 +1,6 @@
 <template>
   <div class="card">
     <slot name="header" />
-    <slot :content="content">
-      <!-- Fallback content if no default slot is given -->
-      <p>Nothing used the {{ content }}</p>
-    </slot>
     <slot name="footer" />
   </div>
 </template>
-
-<script>
-// For the sake of demoing scopedSlots, this Card component
-// passes a simple string down to its default slot.
-export default {
-  data() {
-    return {
-      content: 'Scoped content!'
-    }
-  }
-}
-</script>
diff --git a/src/__tests__/slots.js b/src/__tests__/slots.js
index e606bca4..45ffb0fb 100644
--- a/src/__tests__/slots.js
+++ b/src/__tests__/slots.js
@@ -1,34 +1,17 @@
-test.todo('Your test suite must contain at least one test.')
+import '@testing-library/jest-dom'
+import {render} from '@testing-library/vue'
+import Card from './components/Card'
 
-// import '@testing-library/jest-dom'
-// import {render} from '@testing-library/vue'
-// import Card from './components/Card'
+// Usage is the same as Vue Test Utils, since slots values are passed using the `slots`
+// key from mount(). For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
+test('Card component', () => {
+  const {getByText} = render(Card, {
+    slots: {
+      header: '<h1>HEADER</h1>',
+      footer: '<div>FOOTER</div>',
+    },
+  })
 
-// // In this test file we demo how to test a component with slots and a scoped slot.
-
-// // Usage is the same as Vue Test Utils, since slots and scopedSlots
-// // in the render options are directly passed through to the Utils mount().
-// // For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
-// test('Card component', () => {
-//   const {getByText, queryByText} = render(Card, {
-//     slots: {
-//       header: '<h1>HEADER</h1>',
-//       footer: '<div>FOOTER</div>',
-//     },
-//     scopedSlots: {
-//       default: '<p>Yay! {{props.content}}</p>',
-//     },
-//   })
-
-//   // The default slot should render the template above with the scoped prop "content".
-//   expect(getByText('Yay! Scoped content!')).toBeInTheDocument()
-
-//   // Instead of the default slot's fallback content.
-//   expect(
-//     queryByText('Nothing used the Scoped content!'),
-//   ).not.toBeInTheDocument()
-
-//   // And the header and footer slots should be rendered with the given templates.
-//   expect(getByText('HEADER')).toBeInTheDocument()
-//   expect(getByText('FOOTER')).toBeInTheDocument()
-// })
+  expect(getByText('HEADER')).toBeInTheDocument()
+  expect(getByText('FOOTER')).toBeInTheDocument()
+})

From 347a30bdeb976171f227979e30ce74b5dc50cf35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 9 Oct 2020 18:28:52 +0200
Subject: [PATCH 30/43] Fix functional tests

---
 src/__tests__/functional.js | 35 +++++++++++++----------------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/__tests__/functional.js b/src/__tests__/functional.js
index d24a219f..22b8fee4 100644
--- a/src/__tests__/functional.js
+++ b/src/__tests__/functional.js
@@ -1,26 +1,17 @@
-test.todo('Your test suite must contain at least one test.')
-// import {render} from '@testing-library/vue'
-// import '@testing-library/jest-dom'
-// import FunctionalSFC from './components/FunctionalSFC'
+import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom'
+import {h} from 'vue'
 
-// import {render} from '@testing-library/vue'
-// import FunctionalSFC from './components/FunctionalSFC'
+// From docs: Performance gains from 2.x for functional components are now
+// negligible in 3.x, so we recommend just using stateful components.
 
-// const Functional = {
-//   functional: true,
-//   render(createElement) {
-//     return createElement('p', null, 'Hi!')
-//   },
-// }
+// eslint-disable-next-line no-unused-vars
+const Functional = (props, context) => {
+  return h('div', {}, 'Hi!')
+}
 
-// test('renders functional component', () => {
-//   const {getByText} = render(Functional)
+test('renders functional component', () => {
+  const {getByText} = render(Functional)
 
-//   expect(getByText('Hi!')).toBeInTheDocument()
-// })
-
-// test('renders functional SFC component', () => {
-//   const {getByText} = render(FunctionalSFC)
-
-//   expect(getByText('Hi!')).toBeInTheDocument()
-// })
+  expect(getByText('Hi!')).toBeInTheDocument()
+})

From 108b8b66a9ce02d4308b56b1f2bbf30878c01628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 11 Oct 2020 21:28:27 +0200
Subject: [PATCH 31/43] Add POC for Vuex 4

---
 package.json                            |   4 +-
 src/__tests__/components/Store/store.js |   6 +-
 src/__tests__/vuex.js                   | 115 ++++++++++++------------
 src/vue-testing-library.js              |  21 +++--
 4 files changed, 75 insertions(+), 71 deletions(-)

diff --git a/package.json b/package.json
index f384c1fa..f7bd336c 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@testing-library/dom": "^7.24.3",
     "@babel/runtime": "^7.9.6",
     "@types/testing-library__vue": "*",
+    "lodash.merge": "^4.6.2",
     "@vue/test-utils": "^2.0.0-beta.2"
   },
   "devDependencies": {
@@ -63,7 +64,6 @@
     "isomorphic-unfetch": "^3.0.0",
     "jest-serializer-vue": "^2.0.2",
     "kcd-scripts": "^6.5.1",
-    "lodash.merge": "^4.6.2",
     "msw": "^0.21.2",
     "portal-vue": "^2.1.7",
     "typescript": "^3.8.3",
@@ -74,7 +74,7 @@
     "vue-jest": "^5.0.0-alpha.4",
     "vue-router": "^3.4.5",
     "vuetify": "^2.3.10",
-    "vuex": "^3.5.1"
+    "vuex": "^4.0.0-beta.4"
   },
   "peerDependencies": {
     "vue": "^3.0",
diff --git a/src/__tests__/components/Store/store.js b/src/__tests__/components/Store/store.js
index e2a3d7f4..ee9e3fd5 100644
--- a/src/__tests__/components/Store/store.js
+++ b/src/__tests__/components/Store/store.js
@@ -1,6 +1,8 @@
 export const store = {
-  state: {
-    count: 0,
+  state() {
+    return {
+      count: 0,
+    }
   },
   actions: {
     increment: ({commit, state}) => commit('SET_COUNT', state.count + 1),
diff --git a/src/__tests__/vuex.js b/src/__tests__/vuex.js
index e2b0934c..1fb0bb0f 100644
--- a/src/__tests__/vuex.js
+++ b/src/__tests__/vuex.js
@@ -1,58 +1,57 @@
-test.todo('Your test suite must contain at least one test.')
-
-// import '@testing-library/jest-dom'
-// import {render, fireEvent} from '@testing-library/vue'
-
-// import VuexTest from './components/Store/VuexTest'
-// import {store} from './components/Store/store'
-
-// // A common testing pattern is to create a custom renderer for a specific test
-// // file. This way, common operations such as registering a Vuex store can be
-// // abstracted out while avoiding sharing mutable state.
-// //
-// // Tests should be completely isolated from one another.
-// // Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
-// function renderVuexTestComponent(customStore) {
-//   // Render the component and merge the original store and the custom one
-//   // provided as a parameter. This way, we can alter some behaviors of the
-//   // initial implementation.
-//   return render(VuexTest, {store: {...store, ...customStore}})
-// }
-
-// test('can render with vuex with defaults', async () => {
-//   const {getByTestId, getByText} = renderVuexTestComponent()
-//   await fireEvent.click(getByText('+'))
-
-//   expect(getByTestId('count-value')).toHaveTextContent('1')
-// })
-
-// test('can render with vuex with custom initial state', async () => {
-//   const {getByTestId, getByText} = renderVuexTestComponent({
-//     state: {count: 3},
-//   })
-//   await fireEvent.click(getByText('-'))
-
-//   expect(getByTestId('count-value')).toHaveTextContent('2')
-// })
-
-// test('can render with vuex with custom store', async () => {
-//   // This is a silly store that can never be changed.
-//   // eslint-disable-next-line no-shadow
-//   const store = {
-//     state: {count: 1000},
-//     actions: {
-//       increment: () => jest.fn(),
-//       decrement: () => jest.fn(),
-//     },
-//   }
-
-//   // Notice how here we are not using the helper method, because there's no
-//   // need to do that.
-//   const {getByTestId, getByText} = render(VuexTest, {store})
-
-//   await fireEvent.click(getByText('+'))
-//   expect(getByTestId('count-value')).toHaveTextContent('1000')
-
-//   await fireEvent.click(getByText('-'))
-//   expect(getByTestId('count-value')).toHaveTextContent('1000')
-// })
+ import '@testing-library/jest-dom'
+ import {render, fireEvent} from '@testing-library/vue'
+ import VuexTest from './components/Store/VuexTest'
+ import {store} from './components/Store/store'
+
+ // A common testing pattern is to create a custom renderer for a specific test
+ // file. This way, common operations such as registering a Vuex store can be
+ // abstracted out while avoiding sharing mutable state.
+ //
+ // Tests should be completely isolated from one another.
+ // Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
+ function renderVuexTestComponent(customStore) {
+   // Render the component and merge the original store and the custom one
+   // provided as a parameter. This way, we can alter some behaviors of the
+   // initial implementation.
+   return render(VuexTest, {store: {...store, ...customStore}})
+ }
+
+ test('can render with vuex with defaults', async () => {
+   const {getByTestId, getByText} = renderVuexTestComponent()
+   
+   await fireEvent.click(getByText('+'))
+   
+   expect(getByTestId('count-value')).toHaveTextContent('1')
+ })
+
+ test('can render with vuex with custom initial state', async () => {
+   const {getByTestId, getByText} = renderVuexTestComponent({
+     state: {count: 3},
+   })
+
+   await fireEvent.click(getByText('-'))
+   
+   expect(getByTestId('count-value')).toHaveTextContent('2')
+ })
+
+ test('can render with vuex with custom store', async () => {
+   // This is a silly store that can never be changed.
+   // eslint-disable-next-line no-shadow
+   const store = {
+     state: {count: 1000},
+     actions: {
+       increment: () => jest.fn(),
+       decrement: () => jest.fn(),
+     },
+   }
+
+   // Notice how here we are not using the helper rendering method, because
+   // there's no need to do that here. We're passing a whole store.
+   const {getByTestId, getByText} = render(VuexTest, {store})
+
+   await fireEvent.click(getByText('+'))
+   expect(getByTestId('count-value')).toHaveTextContent('1000')
+
+   await fireEvent.click(getByText('-'))
+   expect(getByTestId('count-value')).toHaveTextContent('1000')
+ })
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index dd22a3b5..317b4167 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -1,5 +1,6 @@
 /* eslint-disable testing-library/no-wait-for-empty-callback */
 import {mount} from '@vue/test-utils'
+import merge from 'lodash.merge'
 
 import {
   getQueriesForElement,
@@ -26,15 +27,14 @@ function render(
   const container = customContainer || baseElement.appendChild(div)
 
   // const localVue = createLocalVue()
-  let vuexStore = null
   let router = null
   let additionalOptions = {}
 
-  // TODO: Fix VTL + Vuex (v4?)
+  const plugins = []
+
   if (store) {
-    const Vuex = require('vuex')
-    // localVue.use(Vuex)
-    vuexStore = new Vuex.Store(store)
+    const { createStore } = require('vuex')
+    plugins.push(createStore(store))
   }
 
   // TODO: Fix VTL + Vue-router(next?)
@@ -47,8 +47,9 @@ function render(
     })
   }
 
+  // Should we expose vue 3 app? if so, how?
   if (configurationCb && typeof configurationCb === 'function') {
-    additionalOptions = configurationCb(vuexStore, router)
+    additionalOptions = configurationCb(router)
   }
 
   // If `propsData` is provided, rename it to `props`
@@ -59,14 +60,16 @@ function render(
     delete mountOptions.propsData
   }
 
-  const wrapper = mount(TestComponent, {
+  const wrapper = mount(TestComponent, merge({
     // localVue,
     // router,
-    // store: vuexStore,
     attachTo: container,
+    global: {
+      plugins
+    },
     ...mountOptions,
     ...additionalOptions,
-  })
+  }))
 
   mountedWrappers.add(wrapper)
 

From e8b1b027526695bec367af651d52319275333994 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 11 Oct 2020 22:16:12 +0200
Subject: [PATCH 32/43] Update vue-i18n example

---
 package.json                              |  2 +-
 src/__tests__/components/Translations.vue | 18 ++----
 src/__tests__/vue-i18n.js                 | 75 ++++++++++-------------
 3 files changed, 40 insertions(+), 55 deletions(-)

diff --git a/package.json b/package.json
index f7bd336c..5031ec68 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "vee-validate": "^2.2.15",
     "vue": "^3.0.0",
     "vue-apollo": "^3.0.4",
-    "vue-i18n": "^8.21.1",
+    "vue-i18n": "^9.0.0-beta.4",
     "vue-jest": "^5.0.0-alpha.4",
     "vue-router": "^3.4.5",
     "vuetify": "^2.3.10",
diff --git a/src/__tests__/components/Translations.vue b/src/__tests__/components/Translations.vue
index 0510b5d8..82fcbbb8 100644
--- a/src/__tests__/components/Translations.vue
+++ b/src/__tests__/components/Translations.vue
@@ -1,19 +1,13 @@
 <template>
-  <div>
-    <h2>{{ $t('Hello') }}</h2>
-    <button @click="switchLocale('en')">English</button>
-    <button @click="switchLocale('ja')">Japanese</button>
-  </div>
+    <h2>{{ $t('hello') }}</h2>
+    <select v-model="$i18n.locale">
+      <option value="en">English</option>
+      <option value="ja">Japanese</option>
+    </select>
 </template>
 
 <script>
 export default {
-  name: 'VueI18n',
-
-  methods: {
-    switchLocale(locale) {
-      this.$i18n.locale = locale
-    },
-  },
+  name: 'Translations',
 }
 </script>
diff --git a/src/__tests__/vue-i18n.js b/src/__tests__/vue-i18n.js
index 1ef3e438..94ead4af 100644
--- a/src/__tests__/vue-i18n.js
+++ b/src/__tests__/vue-i18n.js
@@ -1,42 +1,33 @@
-test.todo('Your test suite must contain at least one test.')
-
-// import '@testing-library/jest-dom'
-// import {render, fireEvent} from '@testing-library/vue'
-// import Vuei18n from 'vue-i18n'
-// import Translations from './components/Translations'
-
-// const messages = {
-//   en: {
-//     Hello: 'Hello',
-//   },
-//   ja: {
-//     Hello: 'こんにちは',
-//   },
-// }
-
-// test('renders translations', async () => {
-//   const {queryByText, getByText} = render(Translations, {}, vue => {
-//     // Let's register and configure Vuei18n normally
-//     vue.use(Vuei18n)
-
-//     const i18n = new Vuei18n({
-//       locale: 'en',
-//       fallbackLocale: 'en',
-//       messages,
-//     })
-
-//     // Notice how we return an object from the callback function. It will be
-//     // merged as an additional option on the created Vue instance.
-//     return {
-//       i18n,
-//     }
-//   })
-
-//   expect(getByText('Hello')).toBeInTheDocument()
-
-//   await fireEvent.click(getByText('Japanese'))
-
-//   expect(getByText('こんにちは')).toBeInTheDocument()
-
-//   expect(queryByText('Hello')).toBeNull()
-// })
+ import '@testing-library/jest-dom'
+ import {render, fireEvent} from '@testing-library/vue'
+ import {createI18n} from 'vue-i18n'
+ import Translations from './components/Translations'
+
+ const i18n = createI18n({
+    legacy: true,
+   locale: 'en',
+   messages: {
+    en: {
+      hello: 'Hello',
+    },
+    ja: {
+      hello: 'こんにちは',
+    },
+  },
+ })
+
+ test('renders translations', async () => {
+   const {queryByText, getByText} = render(Translations, {
+       global: {
+           plugins: [i18n]
+       }
+   })
+
+   expect(getByText('Hello')).toBeInTheDocument()
+
+   await fireEvent.update(getByText('Japanese'))
+
+   expect(getByText('こんにちは')).toBeInTheDocument()
+
+   expect(queryByText('Hello')).toBeNull()
+ })

From 49f6639e594696fadd31417f42b3e7bd42ff2a7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 13 Oct 2020 11:33:22 +0200
Subject: [PATCH 33/43] Fix snapshots

---
 src/__tests__/vue-i18n.js  |  40 ++++++-------
 src/__tests__/vuex.js      | 114 ++++++++++++++++++-------------------
 src/vue-testing-library.js |  37 +++++++-----
 3 files changed, 99 insertions(+), 92 deletions(-)

diff --git a/src/__tests__/vue-i18n.js b/src/__tests__/vue-i18n.js
index 94ead4af..24ede3b9 100644
--- a/src/__tests__/vue-i18n.js
+++ b/src/__tests__/vue-i18n.js
@@ -1,12 +1,12 @@
- import '@testing-library/jest-dom'
- import {render, fireEvent} from '@testing-library/vue'
- import {createI18n} from 'vue-i18n'
- import Translations from './components/Translations'
+import '@testing-library/jest-dom'
+import {render, fireEvent} from '@testing-library/vue'
+import {createI18n} from 'vue-i18n'
+import Translations from './components/Translations'
 
- const i18n = createI18n({
-    legacy: true,
-   locale: 'en',
-   messages: {
+const i18n = createI18n({
+  legacy: true,
+  locale: 'en',
+  messages: {
     en: {
       hello: 'Hello',
     },
@@ -14,20 +14,20 @@
       hello: 'こんにちは',
     },
   },
- })
+})
 
- test('renders translations', async () => {
-   const {queryByText, getByText} = render(Translations, {
-       global: {
-           plugins: [i18n]
-       }
-   })
+test('renders translations', async () => {
+  const {queryByText, getByText} = render(Translations, {
+    global: {
+      plugins: [i18n],
+    },
+  })
 
-   expect(getByText('Hello')).toBeInTheDocument()
+  expect(getByText('Hello')).toBeInTheDocument()
 
-   await fireEvent.update(getByText('Japanese'))
+  await fireEvent.update(getByText('Japanese'))
 
-   expect(getByText('こんにちは')).toBeInTheDocument()
+  expect(getByText('こんにちは')).toBeInTheDocument()
 
-   expect(queryByText('Hello')).toBeNull()
- })
+  expect(queryByText('Hello')).toBeNull()
+})
diff --git a/src/__tests__/vuex.js b/src/__tests__/vuex.js
index 1fb0bb0f..233e4533 100644
--- a/src/__tests__/vuex.js
+++ b/src/__tests__/vuex.js
@@ -1,57 +1,57 @@
- import '@testing-library/jest-dom'
- import {render, fireEvent} from '@testing-library/vue'
- import VuexTest from './components/Store/VuexTest'
- import {store} from './components/Store/store'
-
- // A common testing pattern is to create a custom renderer for a specific test
- // file. This way, common operations such as registering a Vuex store can be
- // abstracted out while avoiding sharing mutable state.
- //
- // Tests should be completely isolated from one another.
- // Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
- function renderVuexTestComponent(customStore) {
-   // Render the component and merge the original store and the custom one
-   // provided as a parameter. This way, we can alter some behaviors of the
-   // initial implementation.
-   return render(VuexTest, {store: {...store, ...customStore}})
- }
-
- test('can render with vuex with defaults', async () => {
-   const {getByTestId, getByText} = renderVuexTestComponent()
-   
-   await fireEvent.click(getByText('+'))
-   
-   expect(getByTestId('count-value')).toHaveTextContent('1')
- })
-
- test('can render with vuex with custom initial state', async () => {
-   const {getByTestId, getByText} = renderVuexTestComponent({
-     state: {count: 3},
-   })
-
-   await fireEvent.click(getByText('-'))
-   
-   expect(getByTestId('count-value')).toHaveTextContent('2')
- })
-
- test('can render with vuex with custom store', async () => {
-   // This is a silly store that can never be changed.
-   // eslint-disable-next-line no-shadow
-   const store = {
-     state: {count: 1000},
-     actions: {
-       increment: () => jest.fn(),
-       decrement: () => jest.fn(),
-     },
-   }
-
-   // Notice how here we are not using the helper rendering method, because
-   // there's no need to do that here. We're passing a whole store.
-   const {getByTestId, getByText} = render(VuexTest, {store})
-
-   await fireEvent.click(getByText('+'))
-   expect(getByTestId('count-value')).toHaveTextContent('1000')
-
-   await fireEvent.click(getByText('-'))
-   expect(getByTestId('count-value')).toHaveTextContent('1000')
- })
+import '@testing-library/jest-dom'
+import {render, fireEvent} from '@testing-library/vue'
+import VuexTest from './components/Store/VuexTest'
+import {store} from './components/Store/store'
+
+// A common testing pattern is to create a custom renderer for a specific test
+// file. This way, common operations such as registering a Vuex store can be
+// abstracted out while avoiding sharing mutable state.
+//
+// Tests should be completely isolated from one another.
+// Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
+function renderVuexTestComponent(customStore) {
+  // Render the component and merge the original store and the custom one
+  // provided as a parameter. This way, we can alter some behaviors of the
+  // initial implementation.
+  return render(VuexTest, {store: {...store, ...customStore}})
+}
+
+test('can render with vuex with defaults', async () => {
+  const {getByTestId, getByText} = renderVuexTestComponent()
+
+  await fireEvent.click(getByText('+'))
+
+  expect(getByTestId('count-value')).toHaveTextContent('1')
+})
+
+test('can render with vuex with custom initial state', async () => {
+  const {getByTestId, getByText} = renderVuexTestComponent({
+    state: {count: 3},
+  })
+
+  await fireEvent.click(getByText('-'))
+
+  expect(getByTestId('count-value')).toHaveTextContent('2')
+})
+
+test('can render with vuex with custom store', async () => {
+  // This is a silly store that can never be changed.
+  // eslint-disable-next-line no-shadow
+  const store = {
+    state: {count: 1000},
+    actions: {
+      increment: () => jest.fn(),
+      decrement: () => jest.fn(),
+    },
+  }
+
+  // Notice how here we are not using the helper rendering method, because
+  // there's no need to do that here. We're passing a whole store.
+  const {getByTestId, getByText} = render(VuexTest, {store})
+
+  await fireEvent.click(getByText('+'))
+  expect(getByTestId('count-value')).toHaveTextContent('1000')
+
+  await fireEvent.click(getByText('-'))
+  expect(getByTestId('count-value')).toHaveTextContent('1000')
+})
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 317b4167..479ce89a 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -33,7 +33,7 @@ function render(
   const plugins = []
 
   if (store) {
-    const { createStore } = require('vuex')
+    const {createStore} = require('vuex')
     plugins.push(createStore(store))
   }
 
@@ -60,23 +60,26 @@ function render(
     delete mountOptions.propsData
   }
 
-  const wrapper = mount(TestComponent, merge({
-    // localVue,
-    // router,
-    attachTo: container,
-    global: {
-      plugins
-    },
-    ...mountOptions,
-    ...additionalOptions,
-  }))
+  const wrapper = mount(
+    TestComponent,
+    merge({
+      // localVue,
+      // router,
+      attachTo: container,
+      global: {
+        plugins,
+      },
+      ...mountOptions,
+      ...additionalOptions,
+    }),
+  )
+
+  // this removes the additional "data-v-app" div node from VTU:
+  // https://github.com/vuejs/vue-test-utils-next/blob/master/src/mount.ts#L196-L213
+  unwrapNode(wrapper.parentElement)
 
   mountedWrappers.add(wrapper)
 
-  // hack to remove id="app"
-  // this fixes tests in auto-cleanup.js and auto-cleanup-skip.js
-  wrapper.parentElement.removeAttribute('id')
-
   return {
     container,
     baseElement,
@@ -91,6 +94,10 @@ function render(
   }
 }
 
+function unwrapNode(node) {
+  node.replaceWith(...node.childNodes)
+}
+
 function cleanup() {
   mountedWrappers.forEach(cleanupAtWrapper)
 }

From 1496dd1fb7ada3061782926d6b9bdb76cdba00f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 13 Oct 2020 16:14:31 +0200
Subject: [PATCH 34/43] Fix vee-validate tests

---
 package.json                          |  2 +-
 src/__tests__/components/Validate.vue | 53 +++++++++++++--------------
 src/__tests__/validate-plugin.js      | 53 +++++++++++----------------
 3 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index 5031ec68..df96f672 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "msw": "^0.21.2",
     "portal-vue": "^2.1.7",
     "typescript": "^3.8.3",
-    "vee-validate": "^2.2.15",
+    "vee-validate": "^4.0.0-beta.8",
     "vue": "^3.0.0",
     "vue-apollo": "^3.0.4",
     "vue-i18n": "^9.0.0-beta.4",
diff --git a/src/__tests__/components/Validate.vue b/src/__tests__/components/Validate.vue
index 6a4fe9df..d976ae27 100644
--- a/src/__tests__/components/Validate.vue
+++ b/src/__tests__/components/Validate.vue
@@ -1,36 +1,35 @@
 <template>
-  <form>
-    <label id="username-label" for="username">Username</label>
+  <Form>
+    <Field :rules="validateEmail" name="email" as="input" type="email" />
 
-    <input
-      v-model="username"
-      v-validate="'required|email'"
-      placeholder="Username..."
-      name="username"
-      aria-labelledby="username-label"
-    />
+    <error-message name="email" data-testid="error-message" />
 
-    <span v-if="errors.has('username')" data-testid="username-errors">{{
-      errors.first('username')
-    }}</span>
-
-    <label id="password-label" for="password">Password</label>
-    <input
-      v-model="password"
-      placeholder="Password..."
-      type="password"
-      name="password"
-      aria-labelledby="password-label"
-    />
-    <button type="submit">Submit</button>
-  </form>
+    <button>Sign up</button>
+  </Form>
 </template>
 
 <script>
+import {Form, Field, ErrorMessage} from 'vee-validate'
+
 export default {
-  data: () => ({
-    username: '',
-    password: ''
-  })
+  name: 'VeeValidate',
+  components: {
+    Form,
+    Field,
+    ErrorMessage,
+  },
+  methods: {
+    validateEmail(value) {
+      if (!value) {
+        return 'This field is required'
+      }
+
+      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
+        return 'This field must be a valid email'
+      }
+
+      return true
+    },
+  },
 }
 </script>
diff --git a/src/__tests__/validate-plugin.js b/src/__tests__/validate-plugin.js
index f6236fc8..22cd80e6 100644
--- a/src/__tests__/validate-plugin.js
+++ b/src/__tests__/validate-plugin.js
@@ -1,31 +1,22 @@
-test.todo('Your test suite must contain at least one test.')
-
-// // Notice this example is using vee-validate v2.X
-// import VeeValidate from 'vee-validate'
-// import '@testing-library/jest-dom'
-
-// import {render, fireEvent} from '@testing-library/vue'
-// import Validate from './components/Validate'
-
-// test('can validate using plugin', async () => {
-//   // The third argument of `render` is a callback function that receives the
-//   // Vue instance as a parameter. This way, we can register plugins such as
-//   // VeeValidate.
-//   const {getByPlaceholderText, queryByTestId, getByTestId} = render(
-//     Validate,
-//     {},
-//     vue => vue.use(VeeValidate, {events: 'blur'}),
-//   )
-
-//   // Assert error messages are not in the DOM when rendering the component.
-//   expect(queryByTestId('username-errors')).toBeNull()
-
-//   const usernameInput = getByPlaceholderText('Username...')
-//   await fireEvent.touch(usernameInput)
-
-//   // After "touching" the input (focusing and blurring), validation error
-//   // should appear.
-//   expect(getByTestId('username-errors')).toHaveTextContent(
-//     /the username field is required/i,
-//   )
-// })
+import '@testing-library/jest-dom'
+
+import {render, fireEvent} from '@testing-library/vue'
+import VeeValidate from './components/Validate'
+
+test('can validate using plugin', async () => {
+  const {findByText, getByRole, getByTestId} = render(VeeValidate)
+
+  // Assert error messages are not in the DOM when rendering the component.
+  expect(getByTestId('error-message')).toBeEmptyDOMElement()
+
+  const emailInput = getByRole('textbox')
+
+  await fireEvent.touch(emailInput)
+
+  await findByText('This field is required')
+
+  await fireEvent.update(emailInput, 'an invalid email')
+  await fireEvent.blur(emailInput)
+
+  await findByText('This field must be a valid email')
+})

From 90c377239e5646c09a7ea85c7fdffdbb1719ad3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 13 Oct 2020 18:49:33 +0200
Subject: [PATCH 35/43] Add missing test for unmount

---
 src/__tests__/render.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/__tests__/render.js b/src/__tests__/render.js
index ad0f0d88..6d8d4d69 100644
--- a/src/__tests__/render.js
+++ b/src/__tests__/render.js
@@ -75,3 +75,15 @@ test('baseElement matches container if not custom baseElement is provided', () =
     </blink>
   `)
 })
+
+test('unmounts', () => {
+  const {getByTestId, unmount, queryByTestId} = render({
+    template: `<div data-testid="node">Hi</div>`,
+  })
+
+  expect(getByTestId('node')).toBeInTheDocument()
+
+  unmount()
+
+  expect(queryByTestId('node')).not.toBeInTheDocument()
+})

From 13497b3c7351c702bda59f21628be9f7dbaab5ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 13 Oct 2020 23:26:18 +0200
Subject: [PATCH 36/43] Remove propsData

---
 src/vue-testing-library.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 479ce89a..71f452b5 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -52,14 +52,6 @@ function render(
     additionalOptions = configurationCb(router)
   }
 
-  // If `propsData` is provided, rename it to `props`
-  // Since this is gonna be a breaking change, we can remove the
-  // whole thing.
-  if (!mountOptions.props && !!mountOptions.propsData) {
-    mountOptions.props = mountOptions.propsData
-    delete mountOptions.propsData
-  }
-
   const wrapper = mount(
     TestComponent,
     merge({

From e05472859e7d3980783f4f606b27e233e3ed8ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 13 Oct 2020 23:26:53 +0200
Subject: [PATCH 37/43] Remove isUnmounted

---
 src/vue-testing-library.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 71f452b5..b620f6f6 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -78,7 +78,6 @@ function render(
     debug: (el = baseElement) =>
       Array.isArray(el) ? el.forEach(e => logDOM(e)) : logDOM(el),
     unmount: () => wrapper.unmount(),
-    // isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
     setProps: props => wrapper.setProps(props),

From 6e490c0b6754545c6a4bdebe6389e73d992de91d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 13 Oct 2020 23:45:35 +0200
Subject: [PATCH 38/43] Add composition API example

---
 src/__tests__/set-props.js | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/set-props.js b/src/__tests__/set-props.js
index e2d0abe1..48fe37fc 100644
--- a/src/__tests__/set-props.js
+++ b/src/__tests__/set-props.js
@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
+import {defineComponent, h, computed} from 'vue'
 import {render} from '@testing-library/vue'
-import NumberDisplay from './components/NumberDisplay.vue'
+import NumberDisplay from './components/NumberDisplay'
 
 // It'd probably be better if you test the component that's doing the prop
 // updating to ensure that the props are being updated correctly.
@@ -21,3 +22,30 @@ test('calling render with the same component but different props does not remoun
   // meaning we are testing the same component instance we rendered initially.
   expect(getByTestId('instance-id')).toHaveTextContent('1')
 })
+
+test('works with composition API', async () => {
+  const Component = defineComponent({
+    props: {
+      foo: {type: String, default: 'foo'},
+    },
+    setup(props) {
+      const foobar = computed(() => `${props.foo}-bar`)
+      return () =>
+        h(
+          'div',
+          {'data-testid': 'node'},
+          `Foo is: ${props.foo}. Foobar is: ${foobar.value}`,
+        )
+    },
+  })
+
+  const {setProps, getByTestId} = render(Component)
+
+  const node = getByTestId('node')
+
+  expect(node).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
+
+  await setProps({foo: 'qux'})
+
+  expect(node).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
+})

From 5c986179b79254692e31c652568676c2d3878daa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 17 Oct 2020 16:04:39 +0200
Subject: [PATCH 39/43] Bump deps

---
 package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index df96f672..fc1ee829 100644
--- a/package.json
+++ b/package.json
@@ -44,16 +44,16 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@testing-library/dom": "^7.24.3",
-    "@babel/runtime": "^7.9.6",
+    "@babel/runtime": "^7.12.1",
+    "@testing-library/dom": "^7.26.0",
     "@types/testing-library__vue": "*",
-    "lodash.merge": "^4.6.2",
-    "@vue/test-utils": "^2.0.0-beta.2"
+    "@vue/test-utils": "^2.0.0-beta.2",
+    "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/plugin-transform-runtime": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.4",
-    "@vue/compiler-sfc": "^3.0",
+    "@vue/compiler-sfc": "^3.0.1",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
@@ -63,15 +63,15 @@
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.0.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^6.5.1",
+    "kcd-scripts": "^6.6.0",
     "msw": "^0.21.2",
     "portal-vue": "^2.1.7",
     "typescript": "^3.8.3",
-    "vee-validate": "^4.0.0-beta.8",
-    "vue": "^3.0.0",
+    "vee-validate": "^4.0.0-beta.10",
+    "vue": "^3.0.1",
     "vue-apollo": "^3.0.4",
     "vue-i18n": "^9.0.0-beta.4",
-    "vue-jest": "^5.0.0-alpha.4",
+    "vue-jest": "^5.0.0-alpha.5",
     "vue-router": "^3.4.5",
     "vuetify": "^2.3.10",
     "vuex": "^4.0.0-beta.4"

From 93768a44869dbd3d651565e4e330e9880955d8b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 17 Oct 2020 18:15:29 +0200
Subject: [PATCH 40/43] Remove localVue references

---
 src/vue-testing-library.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index b620f6f6..aa1cd90d 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -26,7 +26,6 @@ function render(
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
-  // const localVue = createLocalVue()
   let router = null
   let additionalOptions = {}
 
@@ -41,7 +40,6 @@ function render(
   if (routes) {
     const requiredRouter = require('vue-router')
     const VueRouter = requiredRouter.default || requiredRouter
-    // localVue.use(VueRouter)
     router = new VueRouter({
       routes,
     })
@@ -55,7 +53,6 @@ function render(
   const wrapper = mount(
     TestComponent,
     merge({
-      // localVue,
       // router,
       attachTo: container,
       global: {

From 47d3f0a6c5717dced630119dd8c6eab3df3bffb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 18 Oct 2020 11:29:04 +0200
Subject: [PATCH 41/43] Bump vtu-next

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fc1ee829..305b8caa 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@babel/runtime": "^7.12.1",
     "@testing-library/dom": "^7.26.0",
     "@types/testing-library__vue": "*",
-    "@vue/test-utils": "^2.0.0-beta.2",
+    "@vue/test-utils": "^2.0.0-beta.7",
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {

From 8e0663126622d8bf45900ec2f1024009ba355674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 18 Oct 2020 11:49:50 +0200
Subject: [PATCH 42/43] Comment out unused features (router)

---
 package.json                      |  2 +-
 src/__tests__/vue-router-mocha.js | 28 +++++++++++++++-------------
 src/__tests__/vue-router.js       |  6 ++++--
 src/vue-testing-library.js        | 30 +++++++++++++-----------------
 4 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index 305b8caa..086b5d70 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "vue-apollo": "^3.0.4",
     "vue-i18n": "^9.0.0-beta.4",
     "vue-jest": "^5.0.0-alpha.5",
-    "vue-router": "^3.4.5",
+    "vue-router": "^4.0.0-beta.13",
     "vuetify": "^2.3.10",
     "vuex": "^4.0.0-beta.4"
   },
diff --git a/src/__tests__/vue-router-mocha.js b/src/__tests__/vue-router-mocha.js
index 6cb0fa4f..cec76851 100644
--- a/src/__tests__/vue-router-mocha.js
+++ b/src/__tests__/vue-router-mocha.js
@@ -1,16 +1,18 @@
-import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
+test.todo('Your test suite must contain at least one test.')
 
-import About from './components/Router/About.vue'
+// import '@testing-library/jest-dom'
+// import {render} from '@testing-library/vue'
 
-const routes = []
-test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => {
-  // Test for fix https://github.com/testing-library/vue-testing-library/issues/119
-  jest.mock('vue-router', () => {
-    return undefined
-  })
+// import About from './components/Router/About.vue'
 
-  expect(() => render(About, {routes})).toThrowError(
-    new TypeError("Cannot read property 'default' of undefined"),
-  )
-})
+// const routes = []
+// test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => {
+//   // Test for fix https://github.com/testing-library/vue-testing-library/issues/119
+//   jest.mock('vue-router', () => {
+//     return undefined
+//   })
+
+//   expect(() => render(About, {routes})).toThrowError(
+//     new TypeError("Cannot read property 'default' of undefined"),
+//   )
+// })
diff --git a/src/__tests__/vue-router.js b/src/__tests__/vue-router.js
index 256c8656..67cbb23a 100644
--- a/src/__tests__/vue-router.js
+++ b/src/__tests__/vue-router.js
@@ -1,8 +1,11 @@
 test.todo('Your test suite must contain at least one test.')
 
+// // Please notice that this example is a draft example on how to test
+// // the router.
+// // Related issue on Vue Test Utils: https://github.com/vuejs/vue-test-utils-next/issues/152
+
 // import '@testing-library/jest-dom'
 // import {render, fireEvent} from '@testing-library/vue'
-
 // import App from './components/Router/App.vue'
 // import Home from './components/Router/Home.vue'
 // import About from './components/Router/About.vue'
@@ -10,7 +13,6 @@ test.todo('Your test suite must contain at least one test.')
 // const routes = [
 //   {path: '/', component: Home},
 //   {path: '/about', component: About},
-//   {path: '*', redirect: '/about'},
 // ]
 
 // test('full app rendering/navigating', async () => {
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index aa1cd90d..b46e92c2 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -15,19 +15,18 @@ function render(
   TestComponent,
   {
     store = null,
-    routes = null,
+    // routes = null,
     container: customContainer,
     baseElement: customBaseElement,
     ...mountOptions
   } = {},
-  configurationCb,
+  // configurationCb,
 ) {
   const div = document.createElement('div')
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
-  let router = null
-  let additionalOptions = {}
+  // let additionalOptions = {}
 
   const plugins = []
 
@@ -36,30 +35,27 @@ function render(
     plugins.push(createStore(store))
   }
 
-  // TODO: Fix VTL + Vue-router(next?)
-  if (routes) {
-    const requiredRouter = require('vue-router')
-    const VueRouter = requiredRouter.default || requiredRouter
-    router = new VueRouter({
-      routes,
-    })
-  }
+  // if (routes) {
+  //   const requiredRouter = require('vue-router')
+  //   const {createRouter, createWebHistory} =
+  //     requiredRouter.default || requiredRouter
+  //   plugins.push(createRouter({history: createWebHistory(), routes}))
+  // }
 
   // Should we expose vue 3 app? if so, how?
-  if (configurationCb && typeof configurationCb === 'function') {
-    additionalOptions = configurationCb(router)
-  }
+  // if (configurationCb && typeof configurationCb === 'function') {
+  //   additionalOptions = configurationCb(router)
+  // }
 
   const wrapper = mount(
     TestComponent,
     merge({
-      // router,
       attachTo: container,
       global: {
         plugins,
       },
       ...mountOptions,
-      ...additionalOptions,
+      // ...additionalOptions,
     }),
   )
 

From 38f53aef6bf0146f1f255f6cf7b0797660f09f5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 31 Oct 2020 19:23:42 +0100
Subject: [PATCH 43/43] Update deps

---
 package.json | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 086b5d70..273dd82a 100644
--- a/package.json
+++ b/package.json
@@ -45,36 +45,36 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.12.1",
-    "@testing-library/dom": "^7.26.0",
+    "@testing-library/dom": "^7.26.3",
     "@types/testing-library__vue": "*",
     "@vue/test-utils": "^2.0.0-beta.7",
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.12.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@vue/compiler-sfc": "^3.0.1",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@vue/compiler-sfc": "^3.0.2",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "axios": "^0.20.0",
     "eslint-plugin-vue": "^6.2.2",
-    "graphql": "^15.3.0",
+    "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
-    "isomorphic-unfetch": "^3.0.0",
+    "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
     "kcd-scripts": "^6.6.0",
-    "msw": "^0.21.2",
+    "msw": "^0.21.3",
     "portal-vue": "^2.1.7",
     "typescript": "^3.8.3",
-    "vee-validate": "^4.0.0-beta.10",
-    "vue": "^3.0.1",
-    "vue-apollo": "^3.0.4",
-    "vue-i18n": "^9.0.0-beta.4",
+    "vee-validate": "^4.0.0-beta.16",
+    "vue": "^3.0.2",
+    "vue-apollo": "^3.0.5",
+    "vue-i18n": "^9.0.0-beta.6",
     "vue-jest": "^5.0.0-alpha.5",
-    "vue-router": "^4.0.0-beta.13",
-    "vuetify": "^2.3.10",
-    "vuex": "^4.0.0-beta.4"
+    "vue-router": "^4.0.0-rc.1",
+    "vuetify": "^2.3.16",
+    "vuex": "^4.0.0-rc.1"
   },
   "peerDependencies": {
     "vue": "^3.0",