From d9b1b5e0c049d07e21b65e00668dbde7349e26c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 31 Oct 2020 20:33:52 +0100
Subject: [PATCH 01/39] feat: Update to Vue 3.0 and Vue Test Utils 2.0 (#137)
 (#163)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE:
- Snapshots are potentially different due to whitespaces.
- Some options such as stubs are now moved to `global.stubs`.
- Previous usage of vue instance as a parameter for the callback function is not replaced with global `config` options (for example, `global.directives`).
- `isUnmounted` is gone.
- `updateProps` is now called setProps to align with VTU.

Some of the missing steps is to provide support to Vue Router, and also to update libraries of the ecosystem to their Vue 3 version.

This is an exciting release! 🎉  It marks the first release aiming to support Vue 3 and Vue Test Utils 2. Please [head to the PR](https://github.com/testing-library/vue-testing-library/pull/137) to get more information, and feel free to open up issues and PRs to fix missing features / ports 😄
---
 package.json                                  |  52 ++++---
 src/__tests__/auto-cleanup.js                 |   9 +-
 src/__tests__/axios-mock.js                   |  18 +--
 src/__tests__/cleanup-throw.js                |  42 ++---
 src/__tests__/components/Card.vue             |  16 --
 src/__tests__/components/Form.vue             | 146 +++++++++---------
 src/__tests__/components/StopWatch.vue        |  76 ++++-----
 src/__tests__/components/Store/store.js       |   6 +-
 src/__tests__/components/Stubs.vue            |  15 +-
 src/__tests__/components/Translations.vue     |  18 +--
 src/__tests__/components/Validate.vue         |  53 ++++---
 src/__tests__/directive.js                    |  14 +-
 .../directives/uppercase-directive.js         |  10 +-
 src/__tests__/fire-event.js                   |  36 +++--
 src/__tests__/functional.js                   |  19 +--
 src/__tests__/render.js                       |  12 ++
 src/__tests__/set-props.js                    |  51 ++++++
 src/__tests__/slots.js                        |  21 +--
 src/__tests__/stopwatch.js                    |  17 --
 src/__tests__/stubs.js                        |  14 +-
 src/__tests__/update-props.js                 |  23 ---
 src/__tests__/validate-plugin.js              |  31 ++--
 src/__tests__/vue-apollo.js                   | 119 +++++++-------
 src/__tests__/vue-i18n.js                     |  41 ++---
 src/__tests__/vue-portal.js                   |  54 ++++---
 src/__tests__/vue-router-mocha.js             |  28 ++--
 src/__tests__/vue-router.js                   |  56 +++----
 src/__tests__/vueI18n.js                      |  78 +++++-----
 src/__tests__/vuetify.js                      | 115 +++++++-------
 src/__tests__/vuex.js                         |   7 +-
 src/vue-testing-library.js                    |  88 +++++------
 31 files changed, 637 insertions(+), 648 deletions(-)
 create mode 100644 src/__tests__/set-props.js
 delete mode 100644 src/__tests__/update-props.js

diff --git a/package.json b/package.json
index d579d2f3..273dd82a 100644
--- a/package.json
+++ b/package.json
@@ -35,44 +35,50 @@
     "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.12.1",
+    "@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.11.5",
-    "@testing-library/jest-dom": "^5.11.4",
+    "@babel/plugin-transform-runtime": "^7.12.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.5.1",
-    "lodash.merge": "^4.6.2",
-    "msw": "^0.21.2",
+    "kcd-scripts": "^6.6.0",
+    "msw": "^0.21.3",
     "portal-vue": "^2.1.7",
-    "vee-validate": "^2.2.15",
-    "vue": "^2.6.12",
-    "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",
-    "vuetify": "^2.3.10",
-    "vuex": "^3.5.1"
+    "typescript": "^3.8.3",
+    "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-rc.1",
+    "vuetify": "^2.3.16",
+    "vuex": "^4.0.0-rc.1"
   },
   "peerDependencies": {
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "vue": "^3.0",
+    "@vue/compiler-sfc": "^3.0"
   },
   "husky": {
     "hooks": {
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>
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>`,
+  )
 })
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()
+// })
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__/components/Form.vue b/src/__tests__/components/Form.vue
index 78b83ca9..809bf316 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 onsubmit="return false">
+      <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>
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>
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__/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__/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__/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__/directive.js b/src/__tests__/directive.js
index d4fe29c0..5cf4981f 100644
--- a/src/__tests__/directive.js
+++ b/src/__tests__/directive.js
@@ -1,16 +1,14 @@
 import {render} from '@testing-library/vue'
 import '@testing-library/jest-dom'
 import {uppercaseDirective} from './directives/uppercase-directive'
-import Directive from './components/Directive'
+import ComponentUsingDirective from './components/Directive'
 
-// 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),
-  )
+  const {queryByText, getByText} = render(ComponentUsingDirective, {
+    global: {
+      directives: {uppercase: uppercaseDirective},
+    },
+  })
 
   // Test that the text in lower case does not appear in the DOM
   expect(queryByText('example text')).not.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()
+  },
 }
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')
 
diff --git a/src/__tests__/functional.js b/src/__tests__/functional.js
index b6850e55..22b8fee4 100644
--- a/src/__tests__/functional.js
+++ b/src/__tests__/functional.js
@@ -1,12 +1,13 @@
 import {render} from '@testing-library/vue'
 import '@testing-library/jest-dom'
-import FunctionalSFC from './components/FunctionalSFC'
+import {h} from 'vue'
 
-const Functional = {
-  functional: true,
-  render(createElement) {
-    return createElement('p', null, 'Hi!')
-  },
+// From docs: Performance gains from 2.x for functional components are now
+// negligible in 3.x, so we recommend just using stateful components.
+
+// eslint-disable-next-line no-unused-vars
+const Functional = (props, context) => {
+  return h('div', {}, 'Hi!')
 }
 
 test('renders functional component', () => {
@@ -14,9 +15,3 @@ test('renders functional component', () => {
 
   expect(getByText('Hi!')).toBeInTheDocument()
 })
-
-test('renders functional SFC component', () => {
-  const {getByText} = render(FunctionalSFC)
-
-  expect(getByText('Hi!')).toBeInTheDocument()
-})
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()
+})
diff --git a/src/__tests__/set-props.js b/src/__tests__/set-props.js
new file mode 100644
index 00000000..48fe37fc
--- /dev/null
+++ b/src/__tests__/set-props.js
@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom'
+import {defineComponent, h, computed} from 'vue'
+import {render} from '@testing-library/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.
+// 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, setProps} = render(NumberDisplay, {
+    props: {number: 1},
+  })
+
+  expect(getByTestId('number-display')).toHaveTextContent('1')
+
+  await setProps({number: 2})
+
+  expect(getByTestId('number-display')).toHaveTextContent('2')
+
+  // Assert that, even after updating props, the component hasn't remounted,
+  // 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')
+})
diff --git a/src/__tests__/slots.js b/src/__tests__/slots.js
index 6641d270..45ffb0fb 100644
--- a/src/__tests__/slots.js
+++ b/src/__tests__/slots.js
@@ -2,31 +2,16 @@ import '@testing-library/jest-dom'
 import {render} from '@testing-library/vue'
 import Card from './components/Card'
 
-// 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
+// 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, queryByText} = render(Card, {
+  const {getByText} = 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()
 })
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()
-})
diff --git a/src/__tests__/stubs.js b/src/__tests__/stubs.js
index 7be93495..f255b15c 100644
--- a/src/__tests__/stubs.js
+++ b/src/__tests__/stubs.js
@@ -2,9 +2,19 @@ import {render} from '@testing-library/vue'
 import '@testing-library/jest-dom'
 import Stubs from './components/Stubs'
 
-test('Form contains search button', () => {
+test('Stubs out a component', () => {
+  const CustomStub = {
+    template: '<p>Search now</p>',
+  }
+
   const {getByText} = render(Stubs, {
-    stubs: ['FontAwesomeIcon'],
+    global: {
+      stubs: {
+        // "Directive" is the stubbed out component
+        Directive: CustomStub,
+      },
+    },
   })
+
   expect(getByText('Search now')).toBeInTheDocument()
 })
diff --git a/src/__tests__/update-props.js b/src/__tests__/update-props.js
deleted file mode 100644
index edaf1593..00000000
--- a/src/__tests__/update-props.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
-import NumberDisplay from './components/NumberDisplay.vue'
-
-// 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.
-// 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, {
-    props: {number: 1},
-  })
-
-  expect(getByTestId('number-display')).toHaveTextContent('1')
-
-  await updateProps({number: 2})
-
-  expect(getByTestId('number-display')).toHaveTextContent('2')
-
-  // Assert that, even after updating props, the component hasn't remounted,
-  // meaning we are testing the same component instance we rendered initially.
-  expect(getByTestId('instance-id')).toHaveTextContent('1')
-})
diff --git a/src/__tests__/validate-plugin.js b/src/__tests__/validate-plugin.js
index 725ece8b..22cd80e6 100644
--- a/src/__tests__/validate-plugin.js
+++ b/src/__tests__/validate-plugin.js
@@ -1,29 +1,22 @@
-// 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'
+import VeeValidate 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'}),
-  )
+  const {findByText, getByRole, getByTestId} = render(VeeValidate)
 
   // Assert error messages are not in the DOM when rendering the component.
-  expect(queryByTestId('username-errors')).toBeNull()
+  expect(getByTestId('error-message')).toBeEmptyDOMElement()
 
-  const usernameInput = getByPlaceholderText('Username...')
-  await fireEvent.touch(usernameInput)
+  const emailInput = getByRole('textbox')
 
-  // After "touching" the input (focusing and blurring), validation error
-  // should appear.
-  expect(getByTestId('username-errors')).toHaveTextContent(
-    /the username field is required/i,
-  )
+  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')
 })
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()
+// })
diff --git a/src/__tests__/vue-i18n.js b/src/__tests__/vue-i18n.js
index 45f2ba7e..24ede3b9 100644
--- a/src/__tests__/vue-i18n.js
+++ b/src/__tests__/vue-i18n.js
@@ -1,38 +1,31 @@
 import '@testing-library/jest-dom'
 import {render, fireEvent} from '@testing-library/vue'
-import Vuei18n from 'vue-i18n'
+import {createI18n} from 'vue-i18n'
 import Translations from './components/Translations'
 
-const messages = {
-  en: {
-    Hello: 'Hello',
+const i18n = createI18n({
+  legacy: true,
+  locale: 'en',
+  messages: {
+    en: {
+      hello: 'Hello',
+    },
+    ja: {
+      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,
-    }
+  const {queryByText, getByText} = render(Translations, {
+    global: {
+      plugins: [i18n],
+    },
   })
 
   expect(getByText('Hello')).toBeInTheDocument()
 
-  await fireEvent.click(getByText('Japanese'))
+  await fireEvent.update(getByText('Japanese'))
 
   expect(getByText('こんにちは')).toBeInTheDocument()
 
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-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 1718b2be..67cbb23a 100644
--- a/src/__tests__/vue-router.js
+++ b/src/__tests__/vue-router.js
@@ -1,34 +1,38 @@
-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'
+// // 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
 
-const routes = [
-  {path: '/', component: Home},
-  {path: '/about', component: About},
-  {path: '*', redirect: '/about'},
-]
+// 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'
 
-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},
+// ]
 
-  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__/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()
+// })
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..233e4533 100644
--- a/src/__tests__/vuex.js
+++ b/src/__tests__/vuex.js
@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom'
 import {render, fireEvent} from '@testing-library/vue'
-
 import VuexTest from './components/Store/VuexTest'
 import {store} from './components/Store/store'
 
@@ -19,6 +18,7 @@ function renderVuexTestComponent(customStore) {
 
 test('can render with vuex with defaults', async () => {
   const {getByTestId, getByText} = renderVuexTestComponent()
+
   await fireEvent.click(getByText('+'))
 
   expect(getByTestId('count-value')).toHaveTextContent('1')
@@ -28,6 +28,7 @@ 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')
@@ -44,8 +45,8 @@ test('can render with vuex with custom store', async () => {
     },
   }
 
-  // Notice how here we are not using the helper method, because there's no
-  // need to do that.
+  // 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('+'))
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index a7cd4472..b46e92c2 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 merge from 'lodash.merge'
 
 import {
   getQueriesForElement,
@@ -14,78 +15,73 @@ 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)
 
-  const attachTo = document.createElement('div')
-  container.appendChild(attachTo)
+  // let additionalOptions = {}
 
-  const localVue = createLocalVue()
-  let vuexStore = null
-  let router = null
-  let additionalOptions = {}
+  const plugins = []
 
   if (store) {
-    const Vuex = require('vuex')
-    localVue.use(Vuex)
-    vuexStore = new Vuex.Store(store)
+    const {createStore} = require('vuex')
+    plugins.push(createStore(store))
   }
 
-  if (routes) {
-    const requiredRouter = require('vue-router')
-    const VueRouter = requiredRouter.default || requiredRouter
-    localVue.use(VueRouter)
-    router = new VueRouter({
-      routes,
-    })
-  }
-
-  if (configurationCb && typeof configurationCb === 'function') {
-    additionalOptions = configurationCb(localVue, vuexStore, router)
-  }
-
-  if (!mountOptions.propsData && !!mountOptions.props) {
-    mountOptions.propsData = mountOptions.props
-    delete mountOptions.props
-  }
-
-  const wrapper = mount(TestComponent, {
-    localVue,
-    router,
-    attachTo,
-    store: vuexStore,
-    ...mountOptions,
-    ...additionalOptions,
-  })
+  // 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)
+  // }
+
+  const wrapper = mount(
+    TestComponent,
+    merge({
+      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)
-  container.appendChild(wrapper.element)
 
   return {
     container,
     baseElement,
     debug: (el = baseElement) =>
       Array.isArray(el) ? el.forEach(e => logDOM(e)) : logDOM(el),
-    unmount: () => wrapper.destroy(),
-    isUnmounted: () => wrapper.vm._isDestroyed,
+    unmount: () => wrapper.unmount(),
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
-    updateProps: _ => {
-      wrapper.setProps(_)
-      return waitFor(() => {})
-    },
+    setProps: props => wrapper.setProps(props),
     ...getQueriesForElement(baseElement),
   }
 }
 
+function unwrapNode(node) {
+  node.replaceWith(...node.childNodes)
+}
+
 function cleanup() {
   mountedWrappers.forEach(cleanupAtWrapper)
 }
@@ -99,7 +95,7 @@ function cleanupAtWrapper(wrapper) {
   }
 
   try {
-    wrapper.destroy()
+    wrapper.unmount()
   } finally {
     mountedWrappers.delete(wrapper)
   }

From 9e2019886b920995a7acec9613845bd9c63e5dc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 31 Oct 2020 23:34:47 +0100
Subject: [PATCH 02/39] test: attempt to fix travis

---
 .travis.yml | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 5153af12..91989b6d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,8 +1,6 @@
 sudo: false
 language: node_js
-cache:
-  directories:
-    - ~/.npm
+cache: npm
 notifications:
   email: false
 node_js:
@@ -13,8 +11,9 @@ node_js:
 before_install:
   - nvm install-latest-npm
 install: npm install
-script: npm run validate
-after_success: kcd-scripts travis-after-success
+script:
+  - npm run validate
+  - npx codecov@3
 branches:
   only:
     - master

From ebe23d855ce95b6a5019704e19bd5745428120d8 Mon Sep 17 00:00:00 2001
From: Isaiah Thomason <47364027+ITenthusiasm@users.noreply.github.com>
Date: Fri, 20 Nov 2020 17:48:21 -0500
Subject: [PATCH 03/39] feat: Replace `setProps` with `rerender` Function
 (#173)

* Removed `setProps` function (and tests) to confirm with Testing
Library standards.
* Added `rerender` function (and tests) to make the API more familiar to
the Testing Library family.
---
 src/__tests__/rerender.js  | 53 ++++++++++++++++++++++++++++++++++++++
 src/__tests__/set-props.js | 51 ------------------------------------
 src/vue-testing-library.js | 47 ++++++++++++++++++++-------------
 3 files changed, 82 insertions(+), 69 deletions(-)
 create mode 100644 src/__tests__/rerender.js
 delete mode 100644 src/__tests__/set-props.js

diff --git a/src/__tests__/rerender.js b/src/__tests__/rerender.js
new file mode 100644
index 00000000..5951870c
--- /dev/null
+++ b/src/__tests__/rerender.js
@@ -0,0 +1,53 @@
+import '@testing-library/jest-dom'
+import {defineComponent, h, computed} from 'vue'
+import {render} from '@testing-library/vue'
+import NumberDisplay from './components/NumberDisplay'
+
+// It'd probably be better if you test the component that's doing the rerendering
+// to ensure that the rerendered component is being updated correctly.
+// That said, if you'd prefer to, for example, update the props of a rendered
+// component, this function can be used to do so.
+test('calling rerender remounts the component and updates the props', () => {
+  const {rerender, getByTestId} = render(NumberDisplay, {
+    props: {number: 1},
+  })
+
+  expect(getByTestId('number-display')).toHaveTextContent('1')
+
+  rerender({props: {number: 3}})
+  expect(getByTestId('number-display')).toHaveTextContent('3')
+
+  rerender({props: {number: 5}})
+  expect(getByTestId('number-display')).toHaveTextContent('5')
+
+  // Assert that, after rerendering and updating props, the component has been remounted,
+  // meaning we are testing a different component instance than we rendered initially.
+  expect(getByTestId('instance-id')).toHaveTextContent('3')
+})
+
+test('rerender works with composition API', () => {
+  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 {rerender, getByTestId} = render(Component)
+
+  const originalNode = getByTestId('node')
+  expect(originalNode).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
+
+  rerender({props: {foo: 'qux'}})
+
+  const newNode = getByTestId('node')
+  expect(newNode).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
+})
diff --git a/src/__tests__/set-props.js b/src/__tests__/set-props.js
deleted file mode 100644
index 48fe37fc..00000000
--- a/src/__tests__/set-props.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import '@testing-library/jest-dom'
-import {defineComponent, h, computed} from 'vue'
-import {render} from '@testing-library/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.
-// 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, setProps} = render(NumberDisplay, {
-    props: {number: 1},
-  })
-
-  expect(getByTestId('number-display')).toHaveTextContent('1')
-
-  await setProps({number: 2})
-
-  expect(getByTestId('number-display')).toHaveTextContent('2')
-
-  // Assert that, even after updating props, the component hasn't remounted,
-  // 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')
-})
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index b46e92c2..36e86ac9 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -47,23 +47,29 @@ function render(
   //   additionalOptions = configurationCb(router)
   // }
 
-  const wrapper = mount(
-    TestComponent,
-    merge({
-      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)
+  const mountComponent = (Component, newProps) => {
+    const wrapper = mount(
+      Component,
+      merge({
+        attachTo: container,
+        global: {
+          plugins,
+        },
+        ...mountOptions,
+        props: newProps || mountOptions.props,
+        // ...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)
+    return wrapper
+  }
+
+  let wrapper = mountComponent(TestComponent)
 
   return {
     container,
@@ -73,7 +79,12 @@ function render(
     unmount: () => wrapper.unmount(),
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
-    setProps: props => wrapper.setProps(props),
+    rerender: ({props}) => {
+      wrapper.unmount()
+      mountedWrappers.delete(wrapper)
+
+      wrapper = mountComponent(TestComponent, props)
+    },
     ...getQueriesForElement(baseElement),
   }
 }

From 7e1882a2cae09742d73a2ba9cddaaddb44a1dd18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 21 Nov 2020 00:05:13 +0100
Subject: [PATCH 04/39] feat: Rename setProps to rerender (#174)

* Suggest update when using fireEvent.input or fireEvent.change
* Rename setProps to rerender.
* Remove travis in favor on GH Action. We're already using it in master, and deployment won't work unless we leverage actions here, too.
---
 .eslintrc.js                               |  4 +-
 .github/workflows/validate.yml             | 81 ++++++++++++++++++++++
 .travis.yml                                | 28 --------
 README.md                                  | 16 ++---
 package.json                               | 14 ++--
 src/__tests__/components/Button.vue        |  8 +--
 src/__tests__/components/Form.vue          | 71 ++++++++++---------
 src/__tests__/components/NumberDisplay.vue | 14 ++--
 src/__tests__/components/Select.vue        |  4 +-
 src/__tests__/debug.js                     | 16 +++++
 src/__tests__/fire-event.js                | 34 +++++++++
 src/__tests__/form.js                      |  3 +
 src/__tests__/user-event.js                | 72 +++++++++++++++++++
 src/vue-testing-library.js                 | 20 +++++-
 14 files changed, 287 insertions(+), 98 deletions(-)
 create mode 100644 .github/workflows/validate.yml
 delete mode 100644 .travis.yml
 create mode 100644 src/__tests__/user-event.js

diff --git a/.eslintrc.js b/.eslintrc.js
index cf2c75f3..356e7ed8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
   extends: [
     './node_modules/kcd-scripts/eslint.js',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:testing-library/vue',
     'prettier/vue',
   ],
   plugins: ['vue'],
@@ -12,5 +13,6 @@ module.exports = {
     'testing-library/no-dom-import': 'off',
     'testing-library/prefer-screen-queries': 'off',
     'testing-library/no-manual-cleanup': 'off',
+    'testing-library/no-await-sync-events': 'off',
   },
 }
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
new file mode 100644
index 00000000..36e4130e
--- /dev/null
+++ b/.github/workflows/validate.yml
@@ -0,0 +1,81 @@
+name: validate
+on:
+  push:
+    branches:
+      [
+        '+([0-9])?(.{+([0-9]),x}).x',
+        'master',
+        'next',
+        'next-major',
+        'beta',
+        'alpha',
+        '!all-contributors/**',
+      ]
+  pull_request:
+    branches-ignore: ['all-contributors/**']
+jobs:
+  main:
+    strategy:
+      matrix:
+        node: [10.13, 12, 14]
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: ▶️ Run validate script
+        run: npm run validate
+
+      - name: ⬆️ Upload coverage report
+        uses: codecov/codecov-action@v1
+
+  release:
+    needs: main
+    runs-on: ubuntu-latest
+    if:
+      ${{ github.repository == 'testing-library/vue-testing-library' &&
+      contains('refs/heads/master,refs/heads/beta,refs/heads/next,refs/heads/alpha',
+      github.ref) && github.event_name == 'push' }}
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🏗 Run build script
+        run: npm run build
+
+      - name: 🚀 Release
+        uses: cycjimmy/semantic-release-action@v2
+        with:
+          semantic_version: 17
+          branches: |
+            [
+              '+([0-9])?(.{+([0-9]),x}).x',
+              'master',
+              'next',
+              'next-major',
+              {name: 'beta', prerelease: true},
+              {name: 'alpha', prerelease: true}
+            ]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 91989b6d..00000000
--- a/.travis.yml
+++ /dev/null
@@ -1,28 +0,0 @@
-sudo: false
-language: node_js
-cache: npm
-notifications:
-  email: false
-node_js:
-  - 10.18
-  - 12
-  - 14
-  - 15
-before_install:
-  - nvm install-latest-npm
-install: npm install
-script:
-  - npm run validate
-  - npx codecov@3
-branches:
-  only:
-    - master
-    - beta
-    - next
-
-jobs:
-  include:
-    - stage: release
-      node_js: 14
-      script: kcd-scripts travis-release
-      if: fork = false
diff --git a/README.md b/README.md
index 735f0594..077ed5d3 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-<h1>Vue Testing Library</h1>
+<h1>Vue Testing Library for Vue 3</h1>
 
 <br />
 
@@ -32,7 +32,6 @@
 [![GitHub version][github-badge]][github]
 [![npm version][npm-badge]][npm]
 [![Discord][discord-badge]][discord]
-
 [![MIT License][license-badge]][license]
 <!-- prettier-ignore-end -->
 
@@ -66,7 +65,7 @@ project's `devDependencies`:
 npm install --save-dev @testing-library/vue
 ```
 
-This library has `peerDependencies` listings for `Vue` and
+This library has `peerDependencies` listings for `Vue 3` and
 `vue-template-compiler`.
 
 You may also be interested in installing `jest-dom` so you can use [the custom
@@ -76,10 +75,8 @@ Jest matchers][jest-dom].
 
 ```html
 <template>
-  <div>
-    <p>Times clicked: {{ count }}</p>
-    <button @click="increment">increment</button>
-  </div>
+  <p>Times clicked: {{ count }}</p>
+  <button @click="increment">increment</button>
 </template>
 
 <script>
@@ -235,10 +232,11 @@ instead of filing an issue on GitHub.
 [![mediafreakch](https://avatars2.githubusercontent.com/u/777093?v=3&s=120)](https://github.com/mediafreakch)
 [![afenton90](https://avatars2.githubusercontent.com/u/8963736?v=3&s=120)](https://github.com/afenton90)
 [![cilice](https://avatars2.githubusercontent.com/u/835588?v=3&s=120)](https://github.com/cilice)
+[![ITenthusiasm](https://avatars2.githubusercontent.com/u/47364027?v3&s=120)](https://github.com/ITenthusiasm)
 
 <!-- prettier-ignore-start -->
-[build-badge]: https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master
-[build]: https://travis-ci.org/testing-library/vue-testing-library
+[build-badge]: https://img.shields.io/github/workflow/status/testing-library/vue-testing-library/validate?logo=github
+[build]: https://github.com/testing-library/vue-testing-library/actions?query=workflow%3Avalidate
 [coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/vue-testing-library.svg
 [coverage]: https://codecov.io/github/testing-library/vue-testing-library
 [github-badge]: https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg
diff --git a/package.json b/package.json
index 273dd82a..317791f7 100644
--- a/package.json
+++ b/package.json
@@ -46,27 +46,27 @@
   "dependencies": {
     "@babel/runtime": "^7.12.1",
     "@testing-library/dom": "^7.26.3",
-    "@types/testing-library__vue": "*",
-    "@vue/test-utils": "^2.0.0-beta.7",
+    "@vue/test-utils": "^2.0.0-beta.10",
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/user-event": "^12.2.2",
     "@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",
+    "eslint-plugin-vue": "^7.1.0",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^6.6.0",
+    "kcd-scripts": "^7.0.3",
     "msw": "^0.21.3",
     "portal-vue": "^2.1.7",
-    "typescript": "^3.8.3",
+    "typescript": "^4.1.2",
     "vee-validate": "^4.0.0-beta.16",
     "vue": "^3.0.2",
     "vue-apollo": "^3.0.5",
@@ -77,8 +77,8 @@
     "vuex": "^4.0.0-rc.1"
   },
   "peerDependencies": {
-    "vue": "^3.0",
-    "@vue/compiler-sfc": "^3.0"
+    "vue": ">= 3",
+    "@vue/compiler-sfc": ">= 3"
   },
   "husky": {
     "hooks": {
diff --git a/src/__tests__/components/Button.vue b/src/__tests__/components/Button.vue
index 9adc0241..4c825609 100644
--- a/src/__tests__/components/Button.vue
+++ b/src/__tests__/components/Button.vue
@@ -7,13 +7,13 @@ export default {
   props: {
     text: {
       type: String,
-      default: 'Button Text'
-    }
+      default: 'Button Text',
+    },
   },
   methods: {
     handleClick(e) {
       this.$emit('click')
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/src/__tests__/components/Form.vue b/src/__tests__/components/Form.vue
index 809bf316..ffa729f2 100644
--- a/src/__tests__/components/Form.vue
+++ b/src/__tests__/components/Form.vue
@@ -1,44 +1,42 @@
 <template>
-  <div>
-    <h1>Movie Review</h1>
-    <form onsubmit="return false">
-      <label for="movie-input">Title of the movie</label>
-      <input id="movie-input" v-model="title" name="title" />
+  <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 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>
+      <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"
-      />
+    <label id="recommend-label" for="recommend">
+      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>
+    <button :disabled="submitDisabled" type="submit">Submit</button>
+  </form>
 </template>
 
 <script>
@@ -51,6 +49,7 @@ export default {
       recommend: false,
     }
   },
+
   computed: {
     submitDisabled() {
       return !this.title || !this.review
diff --git a/src/__tests__/components/NumberDisplay.vue b/src/__tests__/components/NumberDisplay.vue
index 397914e5..940363f0 100644
--- a/src/__tests__/components/NumberDisplay.vue
+++ b/src/__tests__/components/NumberDisplay.vue
@@ -1,8 +1,6 @@
 <template>
-  <div>
-    <span data-testid="number-display">{{ number }}</span>
-    <span data-testid="instance-id">{{ id }}</span>
-  </div>
+  <span data-testid="number-display">{{ number }}</span>
+  <span data-testid="instance-id">{{ id }}</span>
 </template>
 
 <script>
@@ -12,13 +10,13 @@ export default {
   props: {
     number: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      id: idCounter++
+      id: idCounter++,
     }
-  }
+  },
 }
 </script>
diff --git a/src/__tests__/components/Select.vue b/src/__tests__/components/Select.vue
index a6bd39cb..c5b3c63d 100644
--- a/src/__tests__/components/Select.vue
+++ b/src/__tests__/components/Select.vue
@@ -18,8 +18,8 @@
 export default {
   data() {
     return {
-      selectedDino: 'dino1'
+      selectedDino: 'dino1',
     }
-  }
+  },
 }
 </script>
diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js
index d870244f..c17d4cd2 100644
--- a/src/__tests__/debug.js
+++ b/src/__tests__/debug.js
@@ -57,3 +57,19 @@ test('debug pretty prints multiple nodes with the given parameter', () => {
     expect.stringContaining('Lorem ipsum dolor sit amet'),
   )
 })
+
+test('allows same arguments as prettyDOM', () => {
+  const {debug, container} = render(HelloWorld)
+
+  // debug accepts a maxLength and an options parameters:
+  // https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom
+  debug(container, 6, {highlight: false})
+
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      <div>
+      ...,
+    ]
+  `)
+})
diff --git a/src/__tests__/fire-event.js b/src/__tests__/fire-event.js
index a9b6d537..7e18a512 100644
--- a/src/__tests__/fire-event.js
+++ b/src/__tests__/fire-event.js
@@ -121,6 +121,14 @@ const eventTypes = [
   },
 ]
 
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
+
 const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
 
 // For each event type, we assert that the right events are being triggered
@@ -184,6 +192,30 @@ test('calling `fireEvent` directly works too', async () => {
   expect(emitted()).toHaveProperty('click')
 })
 
+test.each(['input', 'change'])(
+  `fireEvent.%s prints a warning message to use fireEvent.update instead`,
+  async event => {
+    const {getByRole} = render({template: `<input type="text" />`})
+
+    await fireEvent[event](getByRole('textbox'), 'hello')
+
+    expect(console.warn).toHaveBeenCalledTimes(1)
+    expect(console.warn).toHaveBeenCalledWith(
+      `Using fireEvent.${event}() may lead to unexpected results. Please use fireEvent.update() instead.`,
+    )
+  },
+)
+
+test('fireEvent.update does not trigger warning messages', async () => {
+  const {getByTestId} = render({
+    template: `<input type="text" data-testid="test-update" />`,
+  })
+
+  await fireEvent.update(getByTestId('test-update'), 'hello')
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
+
 test('fireEvent.update does not crash if non-input element is passed in', async () => {
   const {getByText} = render({
     template: `<div>Hi</div>`,
@@ -196,4 +228,6 @@ test('fireEvent.update does not crash if non-input element is passed in', async
       Hi
     </div>
   `)
+
+  expect(console.warn).not.toHaveBeenCalled()
 })
diff --git a/src/__tests__/form.js b/src/__tests__/form.js
index 130c2a16..58493bed 100644
--- a/src/__tests__/form.js
+++ b/src/__tests__/form.js
@@ -8,6 +8,8 @@ import Form from './components/Form'
 // Read 'What queries should I use?' for additional context:
 // https://testing-library.com/docs/guide-which-query
 test('Review form submits', async () => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+
   const fakeReview = {
     title: 'An Awesome Movie',
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
@@ -61,4 +63,5 @@ test('Review form submits', async () => {
   // Assert the right event has been emitted.
   expect(emitted()).toHaveProperty('submit')
   expect(emitted().submit[0][0]).toMatchObject(fakeReview)
+  expect(console.warn).not.toHaveBeenCalled()
 })
diff --git a/src/__tests__/user-event.js b/src/__tests__/user-event.js
new file mode 100644
index 00000000..21e123e6
--- /dev/null
+++ b/src/__tests__/user-event.js
@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom'
+import {render} from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import Form from './components/Form'
+import Select from './components/Select'
+
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
+
+test('User events in a form', async () => {
+  const fakeReview = {
+    title: 'An Awesome Movie',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    rating: '3',
+  }
+  const {getByText, getByLabelText, emitted} = render(Form)
+
+  const submitButton = getByText('Submit')
+  expect(submitButton).toBeDisabled()
+
+  const titleInput = getByLabelText(/title of the movie/i)
+  await userEvent.type(titleInput, fakeReview.title)
+  expect(titleInput.value).toEqual(fakeReview.title)
+
+  const textArea = getByLabelText(/Your review/i)
+  await userEvent.type(textArea, 'The t-rex went insane!')
+  expect(textArea.value).toEqual('The t-rex went insane!')
+
+  await userEvent.clear(textArea)
+  expect(textArea.value).toEqual('')
+  await userEvent.type(textArea, fakeReview.review)
+  expect(textArea.value).toEqual(fakeReview.review)
+
+  const initialSelectedRating = getByLabelText(/Awful/i)
+  const wonderfulRadioInput = getByLabelText(/Wonderful/i)
+  expect(initialSelectedRating).toBeChecked()
+  expect(wonderfulRadioInput).not.toBeChecked()
+
+  await userEvent.click(wonderfulRadioInput)
+  expect(wonderfulRadioInput).toBeChecked()
+  expect(initialSelectedRating).not.toBeChecked()
+
+  const recommendInput = getByLabelText(/Would you recommend this movie?/i)
+  await userEvent.click(recommendInput)
+  expect(recommendInput).toBeChecked()
+
+  userEvent.tab()
+  expect(submitButton).toHaveFocus()
+  expect(submitButton).toBeEnabled()
+  await userEvent.type(submitButton, '{enter}')
+  expect(emitted().submit[0][0]).toMatchObject(fakeReview)
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
+
+test('selecting option with user events', async () => {
+  const {getByDisplayValue} = render(Select)
+  const select = getByDisplayValue('Tyrannosaurus')
+  expect(select.value).toBe('dino1')
+
+  await userEvent.selectOptions(select, 'dino2')
+  expect(select.value).toBe('dino2')
+
+  await userEvent.selectOptions(select, 'dino3')
+  expect(select.value).not.toBe('dino2')
+  expect(select.value).toBe('dino3')
+})
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 36e86ac9..b4e2eaf0 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -4,7 +4,7 @@ import merge from 'lodash.merge'
 
 import {
   getQueriesForElement,
-  logDOM,
+  prettyDOM,
   waitFor,
   fireEvent as dtlFireEvent,
 } from '@testing-library/dom'
@@ -74,8 +74,10 @@ function render(
   return {
     container,
     baseElement,
-    debug: (el = baseElement) =>
-      Array.isArray(el) ? el.forEach(e => logDOM(e)) : logDOM(el),
+    debug: (el = baseElement, maxLength, options) =>
+      Array.isArray(el)
+        ? el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
+        : console.log(prettyDOM(el, maxLength, options)),
     unmount: () => wrapper.unmount(),
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
@@ -121,8 +123,20 @@ async function fireEvent(...args) {
   await waitFor(() => {})
 }
 
+function suggestUpdateIfNecessary(eventValue, eventKey) {
+  const changeOrInputEventCalledDirectly =
+    eventValue && (eventKey === 'change' || eventKey === 'input')
+
+  if (changeOrInputEventCalledDirectly) {
+    console.warn(
+      `Using fireEvent.${eventKey}() may lead to unexpected results. Please use fireEvent.update() instead.`,
+    )
+  }
+}
+
 Object.keys(dtlFireEvent).forEach(key => {
   fireEvent[key] = async (...args) => {
+    suggestUpdateIfNecessary(args[1], key)
     dtlFireEvent[key](...args)
     await waitFor(() => {})
   }

From 3ef7112c1cbf2cd7d3d1de87321aabd6dd2857dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Thu, 3 Dec 2020 08:13:14 +0100
Subject: [PATCH 05/39] feat: Add types for Vue 3 (#180)

* Add basic types

* Rename main file to properly get types

* Fix import statement

* Fix compiler options lib

* Extract temporary-defined types to its own file

* Remove duplicate test

* Fix link

* Improve tests

* Remove unnecessary chars

* Add support for file inputs

* Update deps

* Fix rerender typing test

* Remove typecheck step until we figure out how to overcome ts-ignore in node_modules. lol

* Update deps
---
 .eslintrc.js                              |  3 +
 README.md                                 |  7 +-
 jest.config.js                            |  3 -
 package.json                              | 28 ++++---
 src/__tests__/auto-cleanup-skip.js        |  4 +-
 src/__tests__/auto-cleanup.js             |  2 +-
 src/__tests__/axios-mock.js               |  2 +-
 src/__tests__/cleanup-throw.js            |  2 +-
 src/__tests__/components/Translations.vue | 10 +--
 src/__tests__/components/VueI18n.vue      | 21 -----
 src/__tests__/debug.js                    |  2 +-
 src/__tests__/directive.js                |  2 +-
 src/__tests__/disappearance.js            |  2 +-
 src/__tests__/fire-event.js               | 19 ++++-
 src/__tests__/form.js                     |  2 +-
 src/__tests__/functional.js               |  4 +-
 src/__tests__/render.js                   |  2 +-
 src/__tests__/rerender.js                 |  2 +-
 src/__tests__/select.js                   | 10 +--
 src/__tests__/simple-button.js            |  2 +-
 src/__tests__/slots.js                    |  2 +-
 src/__tests__/stopwatch.js                |  2 +-
 src/__tests__/stubs.js                    |  2 +-
 src/__tests__/user-event.js               | 40 +++++-----
 src/__tests__/validate-plugin.js          |  2 +-
 src/__tests__/visibility.js               |  2 +-
 src/__tests__/vue-apollo.js               |  2 +-
 src/__tests__/vue-i18n.js                 |  4 +-
 src/__tests__/vue-portal.js               |  2 +-
 src/__tests__/vue-router-mocha.js         |  2 +-
 src/__tests__/vue-router.js               |  2 +-
 src/__tests__/vueI18n.js                  | 40 ----------
 src/__tests__/vuetify.js                  |  2 +-
 src/__tests__/vuex.js                     |  2 +-
 src/__tests__/within.js                   |  2 +-
 src/{vue-testing-library.js => index.js}  |  2 +
 types/index.d.ts                          | 65 +++++++++++++++
 types/test.ts                             | 97 +++++++++++++++++++++++
 types/tsconfig.json                       | 17 ++++
 types/tslint.json                         |  7 ++
 40 files changed, 286 insertions(+), 139 deletions(-)
 delete mode 100644 src/__tests__/components/VueI18n.vue
 delete mode 100644 src/__tests__/vueI18n.js
 rename src/{vue-testing-library.js => index.js} (98%)
 create mode 100644 types/index.d.ts
 create mode 100644 types/test.ts
 create mode 100644 types/tsconfig.json
 create mode 100644 types/tslint.json

diff --git a/.eslintrc.js b/.eslintrc.js
index 356e7ed8..4e9e131e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,7 @@
 module.exports = {
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+  },
   extends: [
     './node_modules/kcd-scripts/eslint.js',
     'plugin:vue/vue3-recommended',
diff --git a/README.md b/README.md
index 077ed5d3..dade3ebb 100644
--- a/README.md
+++ b/README.md
@@ -171,8 +171,7 @@ light-weight, simple, and understandable.
 
 ## Typings
 
-The TypeScript type definitions are in the [DefinitelyTyped repo][types] and
-bundled with Vue Testing Library.
+The TypeScript type definitions are in the [types][types-directory] directory.
 
 ## ESLint support
 
@@ -247,7 +246,6 @@ instead of filing an issue on GitHub.
 [license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
 [discord]: https://testing-library.com/discord
 [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=flat-square
-[types]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__vue
 [jest-dom]: https://github.com/testing-library/jest-dom
 [which-query]: https://testing-library.com/docs/guide-which-query
 [guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
@@ -261,10 +259,11 @@ instead of filing an issue on GitHub.
 [add-issue-bug]: https://github.com/testing-library/vue-testing-library/issues/new?assignees=&labels=bug&template=bug_report.md&title=
 [add-issue]: (https://github.com/testing-library/vue-testing-library/issues/new)
 
+[types-directory]: https://github.com/testing-library/vue-testing-library/blob/master/types
 [test-directory]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__
 [vuex-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js
 [vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-router.js
 [vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/validate-plugin.js
-[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vueI18n.js
+[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-i18n.js
 [vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuetify.js
 <!-- prettier-ignore-end -->
diff --git a/jest.config.js b/jest.config.js
index c68ee838..09a45c1d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,9 +4,6 @@ const config = require('kcd-scripts/jest')
 module.exports = merge(config, {
   testEnvironment: 'jsdom',
   moduleFileExtensions: ['js', 'vue'],
-  moduleNameMapper: {
-    '@testing-library/vue': '<rootDir>/src/vue-testing-library.js',
-  },
   coverageDirectory: './coverage',
   collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
   transform: {
diff --git a/package.json b/package.json
index 317791f7..8029eee1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,8 @@
   "name": "@testing-library/vue",
   "version": "0.0.0-semantically-released",
   "description": "Simple and complete Vue DOM testing utilities that encourage good testing practices.",
-  "main": "dist/vue-testing-library.js",
+  "main": "dist/index.js",
+  "types": "types/index.d.ts",
   "scripts": {
     "format": "kcd-scripts format",
     "build": "kcd-scripts build",
@@ -16,6 +17,7 @@
     "node": ">10.18"
   },
   "files": [
+    "types",
     "dist",
     "cleanup-after-each.js"
   ],
@@ -45,36 +47,38 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.12.1",
-    "@testing-library/dom": "^7.26.3",
-    "@vue/test-utils": "^2.0.0-beta.10",
+    "@testing-library/dom": "^7.28.1",
+    "@vue/test-utils": "^2.0.0-beta.12",
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/user-event": "^12.2.2",
-    "@vue/compiler-sfc": "^3.0.2",
+    "@testing-library/user-event": "^12.4.0",
+    "@types/estree": "0.0.45",
+    "@vue/compiler-sfc": "^3.0.4",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "axios": "^0.20.0",
+    "dtslint": "^4.0.6",
     "eslint-plugin-vue": "^7.1.0",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^7.0.3",
+    "kcd-scripts": "^7.5.1",
     "msw": "^0.21.3",
     "portal-vue": "^2.1.7",
     "typescript": "^4.1.2",
-    "vee-validate": "^4.0.0-beta.16",
-    "vue": "^3.0.2",
+    "vee-validate": "^4.0.2",
+    "vue": "^3.0.4",
     "vue-apollo": "^3.0.5",
     "vue-i18n": "^9.0.0-beta.6",
-    "vue-jest": "^5.0.0-alpha.5",
-    "vue-router": "^4.0.0-rc.1",
-    "vuetify": "^2.3.16",
-    "vuex": "^4.0.0-rc.1"
+    "vue-jest": "^5.0.0-alpha.7",
+    "vue-router": "^4.0.0-rc.6",
+    "vuetify": "^2.3.19",
+    "vuex": "^4.0.0-rc.2"
   },
   "peerDependencies": {
     "vue": ">= 3",
diff --git a/src/__tests__/auto-cleanup-skip.js b/src/__tests__/auto-cleanup-skip.js
index bcd4595a..0806864b 100644
--- a/src/__tests__/auto-cleanup-skip.js
+++ b/src/__tests__/auto-cleanup-skip.js
@@ -1,7 +1,7 @@
 let render
-beforeAll(async () => {
+beforeAll(() => {
   process.env.VTL_SKIP_AUTO_CLEANUP = 'true'
-  const vtl = await require('@testing-library/vue')
+  const vtl = require('..')
   render = vtl.render
 })
 
diff --git a/src/__tests__/auto-cleanup.js b/src/__tests__/auto-cleanup.js
index 8255c083..805d4303 100644
--- a/src/__tests__/auto-cleanup.js
+++ b/src/__tests__/auto-cleanup.js
@@ -1,4 +1,4 @@
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import '@testing-library/jest-dom'
 
 // This verifies that by importing VTL in an environment which supports
diff --git a/src/__tests__/axios-mock.js b/src/__tests__/axios-mock.js
index c4f066d8..8daeb14a 100644
--- a/src/__tests__/axios-mock.js
+++ b/src/__tests__/axios-mock.js
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 import axiosMock from 'axios'
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import Component from './components/Fetch.vue'
 
 test('mocks an API call when load-greeting is clicked', async () => {
diff --git a/src/__tests__/cleanup-throw.js b/src/__tests__/cleanup-throw.js
index 828820f2..d424d59f 100644
--- a/src/__tests__/cleanup-throw.js
+++ b/src/__tests__/cleanup-throw.js
@@ -1,6 +1,6 @@
 test.todo('check if this test still makes sense')
 
-// import {render, cleanup} from '@testing-library/vue'
+// import {render, cleanup} from '..'
 // import {nextTick} from 'vue'
 
 // test('cleanup re-throws errors from async lifecycle hooks', async () => {
diff --git a/src/__tests__/components/Translations.vue b/src/__tests__/components/Translations.vue
index 82fcbbb8..f431c86c 100644
--- a/src/__tests__/components/Translations.vue
+++ b/src/__tests__/components/Translations.vue
@@ -1,9 +1,9 @@
 <template>
-    <h2>{{ $t('hello') }}</h2>
-    <select v-model="$i18n.locale">
-      <option value="en">English</option>
-      <option value="ja">Japanese</option>
-    </select>
+  <h2>{{ $t('hello') }}</h2>
+  <select v-model="$i18n.locale">
+    <option value="en">English</option>
+    <option value="ja">Japanese</option>
+  </select>
 </template>
 
 <script>
diff --git a/src/__tests__/components/VueI18n.vue b/src/__tests__/components/VueI18n.vue
deleted file mode 100644
index d23a693d..00000000
--- a/src/__tests__/components/VueI18n.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <h2>{{ $t('Hello') }}</h2>
-    <button @click="switchLocale('en')">English</button>
-    <button @click="switchLocale('ja')">
-      Japanese
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'VueI18n',
-
-  methods: {
-    switchLocale(locale) {
-      this.$i18n.locale = locale
-    }
-  }
-}
-</script>
diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js
index c17d4cd2..554feb04 100644
--- a/src/__tests__/debug.js
+++ b/src/__tests__/debug.js
@@ -1,5 +1,5 @@
 /* eslint-disable testing-library/no-debug */
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import HelloWorld from './components/HelloWorld'
 
 beforeEach(() => {
diff --git a/src/__tests__/directive.js b/src/__tests__/directive.js
index 5cf4981f..f003f0fc 100644
--- a/src/__tests__/directive.js
+++ b/src/__tests__/directive.js
@@ -1,4 +1,4 @@
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import '@testing-library/jest-dom'
 import {uppercaseDirective} from './directives/uppercase-directive'
 import ComponentUsingDirective from './components/Directive'
diff --git a/src/__tests__/disappearance.js b/src/__tests__/disappearance.js
index 040848fc..8746f9ed 100644
--- a/src/__tests__/disappearance.js
+++ b/src/__tests__/disappearance.js
@@ -1,4 +1,4 @@
-import {render, waitForElementToBeRemoved} from '@testing-library/vue'
+import {render, waitForElementToBeRemoved} from '..'
 import Disappearance from './components/Disappearance'
 import '@testing-library/jest-dom'
 
diff --git a/src/__tests__/fire-event.js b/src/__tests__/fire-event.js
index 7e18a512..19cef6b2 100644
--- a/src/__tests__/fire-event.js
+++ b/src/__tests__/fire-event.js
@@ -1,5 +1,5 @@
 import {h} from 'vue'
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import Button from './components/Button'
 
 const eventTypes = [
@@ -231,3 +231,20 @@ test('fireEvent.update does not crash if non-input element is passed in', async
 
   expect(console.warn).not.toHaveBeenCalled()
 })
+
+test('fireEvent.update handles input file', async () => {
+  const {getByTestId} = render({
+    template: `<input type="file" data-testid="test-update" />`,
+  })
+
+  const file = new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})
+
+  const inputEl = getByTestId('test-update')
+
+  // You could replace the lines below with
+  // userEvent.upload(inputEl, file)
+  Object.defineProperty(inputEl, 'files', {value: [file]})
+  await fireEvent.update(inputEl)
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
diff --git a/src/__tests__/form.js b/src/__tests__/form.js
index 58493bed..5011b359 100644
--- a/src/__tests__/form.js
+++ b/src/__tests__/form.js
@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import '@testing-library/jest-dom'
 import Form from './components/Form'
 
diff --git a/src/__tests__/functional.js b/src/__tests__/functional.js
index 22b8fee4..323a6ff2 100644
--- a/src/__tests__/functional.js
+++ b/src/__tests__/functional.js
@@ -1,6 +1,6 @@
-import {render} from '@testing-library/vue'
-import '@testing-library/jest-dom'
 import {h} from 'vue'
+import {render} from '..'
+import '@testing-library/jest-dom'
 
 // From docs: Performance gains from 2.x for functional components are now
 // negligible in 3.x, so we recommend just using stateful components.
diff --git a/src/__tests__/render.js b/src/__tests__/render.js
index 6d8d4d69..151bd8bc 100644
--- a/src/__tests__/render.js
+++ b/src/__tests__/render.js
@@ -1,4 +1,4 @@
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import '@testing-library/jest-dom'
 
 test('baseElement defaults to document.body', () => {
diff --git a/src/__tests__/rerender.js b/src/__tests__/rerender.js
index 5951870c..d72dc1b6 100644
--- a/src/__tests__/rerender.js
+++ b/src/__tests__/rerender.js
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 import {defineComponent, h, computed} from 'vue'
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import NumberDisplay from './components/NumberDisplay'
 
 // It'd probably be better if you test the component that's doing the rerendering
diff --git a/src/__tests__/select.js b/src/__tests__/select.js
index 304d7bd0..c8e79750 100644
--- a/src/__tests__/select.js
+++ b/src/__tests__/select.js
@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import '@testing-library/jest-dom'
 import Select from './components/Select'
 
@@ -9,19 +9,19 @@ test('Select component', async () => {
 
   // Get the Select element by using the initially displayed value.
   const select = getByDisplayValue('Tyrannosaurus')
-  expect(select.value).toBe('dino1')
+  expect(select).toHaveValue('dino1')
 
   // Update it by manually sending a valid option value.
   await fireEvent.update(select, 'dino2')
-  expect(select.value).toBe('dino2')
+  expect(select).toHaveValue('dino2')
 
   // We can trigger an update event by directly getting the <option> element.
   optionElement = getByText('Deinonychus')
   await fireEvent.update(optionElement)
-  expect(select.value).toBe('dino3')
+  expect(select).toHaveValue('dino3')
 
   // ...even if option is within an <optgroup>.
   optionElement = getByText('Diplodocus')
   await fireEvent.update(optionElement)
-  expect(select.value).toBe('dino4')
+  expect(select).toHaveValue('dino4')
 })
diff --git a/src/__tests__/simple-button.js b/src/__tests__/simple-button.js
index a63d91ea..29698a4a 100644
--- a/src/__tests__/simple-button.js
+++ b/src/__tests__/simple-button.js
@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import Button from './components/Button'
 import '@testing-library/jest-dom'
 
diff --git a/src/__tests__/slots.js b/src/__tests__/slots.js
index 45ffb0fb..6fc643d6 100644
--- a/src/__tests__/slots.js
+++ b/src/__tests__/slots.js
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import Card from './components/Card'
 
 // Usage is the same as Vue Test Utils, since slots values are passed using the `slots`
diff --git a/src/__tests__/stopwatch.js b/src/__tests__/stopwatch.js
index 996a7e9e..b0e9737f 100644
--- a/src/__tests__/stopwatch.js
+++ b/src/__tests__/stopwatch.js
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom'
-import {render, waitFor, fireEvent} from '@testing-library/vue'
+import {render, waitFor, fireEvent} from '..'
 import StopWatch from './components/StopWatch.vue'
 
 const sleep = ms =>
diff --git a/src/__tests__/stubs.js b/src/__tests__/stubs.js
index f255b15c..38d8ddbd 100644
--- a/src/__tests__/stubs.js
+++ b/src/__tests__/stubs.js
@@ -1,4 +1,4 @@
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import '@testing-library/jest-dom'
 import Stubs from './components/Stubs'
 
diff --git a/src/__tests__/user-event.js b/src/__tests__/user-event.js
index 21e123e6..4db8c3e6 100644
--- a/src/__tests__/user-event.js
+++ b/src/__tests__/user-event.js
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
+import {render, waitFor} from '..'
 import Form from './components/Form'
 import Select from './components/Select'
 
@@ -24,49 +24,49 @@ test('User events in a form', async () => {
   expect(submitButton).toBeDisabled()
 
   const titleInput = getByLabelText(/title of the movie/i)
-  await userEvent.type(titleInput, fakeReview.title)
-  expect(titleInput.value).toEqual(fakeReview.title)
+  userEvent.type(titleInput, fakeReview.title)
+  expect(titleInput).toHaveValue(fakeReview.title)
 
   const textArea = getByLabelText(/Your review/i)
-  await userEvent.type(textArea, 'The t-rex went insane!')
-  expect(textArea.value).toEqual('The t-rex went insane!')
+  userEvent.type(textArea, 'The t-rex went insane!')
+  expect(textArea).toHaveValue('The t-rex went insane!')
 
-  await userEvent.clear(textArea)
-  expect(textArea.value).toEqual('')
-  await userEvent.type(textArea, fakeReview.review)
-  expect(textArea.value).toEqual(fakeReview.review)
+  userEvent.clear(textArea)
+  expect(textArea).toHaveValue('')
+  userEvent.type(textArea, fakeReview.review)
+  expect(textArea).toHaveValue(fakeReview.review)
 
   const initialSelectedRating = getByLabelText(/Awful/i)
   const wonderfulRadioInput = getByLabelText(/Wonderful/i)
   expect(initialSelectedRating).toBeChecked()
   expect(wonderfulRadioInput).not.toBeChecked()
 
-  await userEvent.click(wonderfulRadioInput)
+  userEvent.click(wonderfulRadioInput)
   expect(wonderfulRadioInput).toBeChecked()
-  expect(initialSelectedRating).not.toBeChecked()
+  await waitFor(() => expect(initialSelectedRating).not.toBeChecked())
 
   const recommendInput = getByLabelText(/Would you recommend this movie?/i)
-  await userEvent.click(recommendInput)
+  userEvent.click(recommendInput)
   expect(recommendInput).toBeChecked()
 
   userEvent.tab()
   expect(submitButton).toHaveFocus()
   expect(submitButton).toBeEnabled()
-  await userEvent.type(submitButton, '{enter}')
+  userEvent.type(submitButton, '{enter}')
   expect(emitted().submit[0][0]).toMatchObject(fakeReview)
 
   expect(console.warn).not.toHaveBeenCalled()
 })
 
-test('selecting option with user events', async () => {
+test('selecting option with user events', () => {
   const {getByDisplayValue} = render(Select)
   const select = getByDisplayValue('Tyrannosaurus')
-  expect(select.value).toBe('dino1')
+  expect(select).toHaveValue('dino1')
 
-  await userEvent.selectOptions(select, 'dino2')
-  expect(select.value).toBe('dino2')
+  userEvent.selectOptions(select, 'dino2')
+  expect(select).toHaveValue('dino2')
 
-  await userEvent.selectOptions(select, 'dino3')
-  expect(select.value).not.toBe('dino2')
-  expect(select.value).toBe('dino3')
+  userEvent.selectOptions(select, 'dino3')
+  expect(select).not.toHaveValue('dino2')
+  expect(select).toHaveValue('dino3')
 })
diff --git a/src/__tests__/validate-plugin.js b/src/__tests__/validate-plugin.js
index 22cd80e6..12d58981 100644
--- a/src/__tests__/validate-plugin.js
+++ b/src/__tests__/validate-plugin.js
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import VeeValidate from './components/Validate'
 
 test('can validate using plugin', async () => {
diff --git a/src/__tests__/visibility.js b/src/__tests__/visibility.js
index 0e9436a7..3cda56e4 100644
--- a/src/__tests__/visibility.js
+++ b/src/__tests__/visibility.js
@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import '@testing-library/jest-dom'
 import Collapsible from './components/Collapsible'
 
diff --git a/src/__tests__/vue-apollo.js b/src/__tests__/vue-apollo.js
index 2c8cd316..d7728ed8 100644
--- a/src/__tests__/vue-apollo.js
+++ b/src/__tests__/vue-apollo.js
@@ -1,7 +1,7 @@
 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 {render, fireEvent, screen} from '..'
 // import VueApollo from 'vue-apollo'
 // import {InMemoryCache} from 'apollo-cache-inmemory'
 // import ApolloClient from 'apollo-boost'
diff --git a/src/__tests__/vue-i18n.js b/src/__tests__/vue-i18n.js
index 24ede3b9..4dd1d2bd 100644
--- a/src/__tests__/vue-i18n.js
+++ b/src/__tests__/vue-i18n.js
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
 import {createI18n} from 'vue-i18n'
+import {render, fireEvent} from '..'
 import Translations from './components/Translations'
 
 const i18n = createI18n({
@@ -29,5 +29,5 @@ test('renders translations', async () => {
 
   expect(getByText('こんにちは')).toBeInTheDocument()
 
-  expect(queryByText('Hello')).toBeNull()
+  expect(queryByText('Hello')).not.toBeInTheDocument()
 })
diff --git a/src/__tests__/vue-portal.js b/src/__tests__/vue-portal.js
index 9128d62c..7aa87c82 100644
--- a/src/__tests__/vue-portal.js
+++ b/src/__tests__/vue-portal.js
@@ -1,6 +1,6 @@
 test.todo('Your test suite must contain at least one test.')
 
-// import {render, waitFor} from '@testing-library/vue'
+// import {render, waitFor} from '..'
 // import '@testing-library/jest-dom/extend-expect'
 // import PortalVue from 'portal-vue'
 
diff --git a/src/__tests__/vue-router-mocha.js b/src/__tests__/vue-router-mocha.js
index cec76851..2f7553d1 100644
--- a/src/__tests__/vue-router-mocha.js
+++ b/src/__tests__/vue-router-mocha.js
@@ -1,7 +1,7 @@
 test.todo('Your test suite must contain at least one test.')
 
 // import '@testing-library/jest-dom'
-// import {render} from '@testing-library/vue'
+// import {render} from '..'
 
 // import About from './components/Router/About.vue'
 
diff --git a/src/__tests__/vue-router.js b/src/__tests__/vue-router.js
index 67cbb23a..d2e098d3 100644
--- a/src/__tests__/vue-router.js
+++ b/src/__tests__/vue-router.js
@@ -5,7 +5,7 @@ test.todo('Your test suite must contain at least one test.')
 // // 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 {render, fireEvent} from '..'
 // import App from './components/Router/App.vue'
 // import Home from './components/Router/Home.vue'
 // import About from './components/Router/About.vue'
diff --git a/src/__tests__/vueI18n.js b/src/__tests__/vueI18n.js
deleted file mode 100644
index 2ac7ad94..00000000
--- a/src/__tests__/vueI18n.js
+++ /dev/null
@@ -1,40 +0,0 @@
-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()
-// })
diff --git a/src/__tests__/vuetify.js b/src/__tests__/vuetify.js
index 5a7261ed..a933e8ef 100644
--- a/src/__tests__/vuetify.js
+++ b/src/__tests__/vuetify.js
@@ -1,7 +1,7 @@
 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 {render, fireEvent} from '..'
 // import Vuetify from 'vuetify'
 // import VuetifyDemoComponent from './components/Vuetify'
 
diff --git a/src/__tests__/vuex.js b/src/__tests__/vuex.js
index 233e4533..7873f5bf 100644
--- a/src/__tests__/vuex.js
+++ b/src/__tests__/vuex.js
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import VuexTest from './components/Store/VuexTest'
 import {store} from './components/Store/store'
 
diff --git a/src/__tests__/within.js b/src/__tests__/within.js
index 245e4ed7..3a85664f 100644
--- a/src/__tests__/within.js
+++ b/src/__tests__/within.js
@@ -1,4 +1,4 @@
-import {render, within} from '@testing-library/vue'
+import {render, within} from '..'
 
 test('within() returns an object with all queries bound to the DOM node', () => {
   const {getByTestId, getByText} = render({
diff --git a/src/vue-testing-library.js b/src/index.js
similarity index 98%
rename from src/vue-testing-library.js
rename to src/index.js
index b4e2eaf0..4fbdf6e0 100644
--- a/src/vue-testing-library.js
+++ b/src/index.js
@@ -170,6 +170,8 @@ fireEvent.update = (elem, value) => {
       if (['checkbox', 'radio'].includes(type)) {
         elem.checked = true
         return fireEvent.change(elem)
+      } else if (type === 'file') {
+        return fireEvent.change(elem)
       } else {
         elem.value = value
         return fireEvent.input(elem)
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 00000000..5dec7fa4
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,65 @@
+// Minimum TypeScript Version: 4.0
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {EmitsOptions} from 'vue'
+import {MountingOptions} from '@vue/test-utils'
+import {StoreOptions} from 'vuex'
+import {queries, EventType, BoundFunctions} from '@testing-library/dom'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
+
+// NOTE: fireEvent is overridden below
+export * from '@testing-library/dom'
+
+type Debug = (
+  baseElement?: Element | DocumentFragment | Array<Element | DocumentFragment>,
+  maxLength?: number,
+  options?: PrettyFormatOptions,
+) => void
+
+export interface RenderResult extends BoundFunctions<typeof queries> {
+  container: Element
+  baseElement: Element
+  debug: Debug
+  unmount(): void
+  html(): string
+  emitted(): EmitsOptions
+  rerender(props: object): Promise<void>
+}
+
+type VueTestUtilsRenderOptions = Omit<
+  MountingOptions<Record<string, any>>,
+  'attachTo' | 'shallow' | 'propsData'
+>
+type VueTestingLibraryRenderOptions = {
+  store?: StoreOptions<{}>
+  // router?: ¿¿¿???
+  container?: Element
+  baseElement?: Element
+}
+type RenderOptions = VueTestUtilsRenderOptions & VueTestingLibraryRenderOptions
+
+export function render(
+  TestComponent: any, // this makes me sad :sob:
+  options?: RenderOptions,
+): RenderResult
+
+export type AsyncFireObject = {
+  [K in EventType]: (
+    element: Document | Element | Window,
+    options?: {},
+  ) => Promise<void>
+}
+
+export interface VueFireEventObject extends AsyncFireObject {
+  (element: Document | Element | Window, event: Event): Promise<void>
+  touch(element: Document | Element | Window): Promise<void>
+  update(element: HTMLOptionElement): Promise<void>
+  update(
+    element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+    value: string,
+  ): Promise<void>
+  update(element: Element, value?: string): Promise<void>
+}
+
+export const fireEvent: VueFireEventObject
diff --git a/types/test.ts b/types/test.ts
new file mode 100644
index 00000000..b11b466b
--- /dev/null
+++ b/types/test.ts
@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import {defineComponent} from 'vue'
+import {render, fireEvent, screen, waitFor} from '@testing-library/vue'
+
+declare const elem: Element
+
+const SomeComponent = defineComponent({
+  name: 'SomeComponent',
+  props: {
+    foo: {type: Number, default: 0},
+    bar: {type: String, default: '0'},
+  },
+})
+
+export async function testRender() {
+  const page = render({template: '<div />'})
+
+  // single queries
+  page.getByText('foo')
+  page.queryByText('foo')
+  await page.findByText('foo')
+
+  // multiple queries
+  page.getAllByText('bar')
+  page.queryAllByText('bar')
+  await page.findAllByText('bar')
+
+  // helpers
+  const {container, baseElement, unmount, debug, rerender} = page
+
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  rerender({a: 1}) // $ExpectType Promise<void>
+
+  debug() // $ExpectType void
+  debug(container) // $ExpectType void
+  debug([elem, elem], 100, {highlight: false}) // $ExpectType void
+
+  unmount() // $ExpectType void
+
+  container // $ExpectType Element
+  baseElement // $ExpectType Element
+}
+
+export function testRenderOptions() {
+  const container = document.createElement('div')
+  const baseElement = document.createElement('div')
+  const options = {container, baseElement}
+  render({template: 'div'}, options)
+}
+
+export async function testFireEvent() {
+  const {container} = render({template: 'button'})
+  await fireEvent.click(container) // $ExpectType Promise<void>
+  await fireEvent.touch(elem) // $ExpectType Promise<void>
+}
+
+export async function testScreen() {
+  render({template: 'button'})
+
+  await screen.findByRole('button') // $ExpectType Promise<HTMLElement>
+}
+
+export async function testWaitFor() {
+  const {container} = render({template: 'button'})
+  await fireEvent.update(container) // $ExpectType Promise<void>
+  await waitFor(() => {})
+}
+
+export function testOptions() {
+  render(SomeComponent, {
+    attrs: {a: 1},
+    props: {c: 1}, // ideally it would fail because `c` is not an existing prop…
+    data: () => ({b: 2}),
+    slots: {
+      default: '<div />',
+      footer: '<div />',
+    },
+    global: {
+      config: {isCustomElement: _ => true},
+    },
+    store: {
+      state: {count: 3},
+      strict: true,
+    },
+    baseElement: document.createElement('div'),
+    container: document.createElement('div'),
+  })
+}
+
+/*
+eslint
+  testing-library/prefer-explicit-assert: "off",
+  testing-library/no-wait-for-empty-callback: "off",
+  testing-library/no-debug: "off",
+  testing-library/prefer-screen-queries: "off",
+  @typescript-eslint/unbound-method: "off",
+*/
diff --git a/types/tsconfig.json b/types/tsconfig.json
new file mode 100644
index 00000000..d822978b
--- /dev/null
+++ b/types/tsconfig.json
@@ -0,0 +1,17 @@
+// this additional tsconfig is required by dtslint
+// see: https://github.com/Microsoft/dtslint#typestsconfigjson
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["ES2020", "DOM"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@testing-library/vue": ["."]
+    }
+  }
+}
diff --git a/types/tslint.json b/types/tslint.json
new file mode 100644
index 00000000..70c4494b
--- /dev/null
+++ b/types/tslint.json
@@ -0,0 +1,7 @@
+{
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "semicolon": false,
+    "whitespace": false
+  }
+}

From 22df3526104c69bb18508bd2c0aa9df0dece4e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Wed, 9 Dec 2020 22:28:17 +0100
Subject: [PATCH 06/39] feat: Reenable Vue Router for Vue 3 (#191)

* Enable vue-router example

* Add missing colon

* Reenable vue router mocha test
---
 package.json                                  |  4 +-
 src/__tests__/components/Router/App.vue       | 18 ++---
 .../components/Router/LocationDisplay.vue     |  3 -
 src/__tests__/components/Router/NoMatch.vue   |  3 -
 src/__tests__/vue-router-mocha.js             | 26 +++----
 src/__tests__/vue-router.js                   | 72 +++++++++----------
 src/index.js                                  | 27 +++----
 7 files changed, 62 insertions(+), 91 deletions(-)
 delete mode 100644 src/__tests__/components/Router/LocationDisplay.vue
 delete mode 100644 src/__tests__/components/Router/NoMatch.vue

diff --git a/package.json b/package.json
index 8029eee1..1f17fab0 100644
--- a/package.json
+++ b/package.json
@@ -74,9 +74,9 @@
     "vee-validate": "^4.0.2",
     "vue": "^3.0.4",
     "vue-apollo": "^3.0.5",
-    "vue-i18n": "^9.0.0-beta.6",
+    "vue-i18n": "^9.0.0-beta.10",
     "vue-jest": "^5.0.0-alpha.7",
-    "vue-router": "^4.0.0-rc.6",
+    "vue-router": "^4.0.1",
     "vuetify": "^2.3.19",
     "vuex": "^4.0.0-rc.2"
   },
diff --git a/src/__tests__/components/Router/App.vue b/src/__tests__/components/Router/App.vue
index c8451c7a..fbfe7943 100644
--- a/src/__tests__/components/Router/App.vue
+++ b/src/__tests__/components/Router/App.vue
@@ -1,12 +1,6 @@
-<template>
-  <div>
-    <RouterLink to="/" data-testid="home-link">
-      Home
-    </RouterLink>
-    <RouterLink to="/about" data-testid="about-link">
-      About
-    </RouterLink>
-    <RouterView />
-    <div data-testid="location-display">{{ $route.fullPath }}</div>
-  </div>
-</template>
+<template>
+  <router-link to="/" data-testid="home-link">Home</router-link>
+  <router-link to="/about" data-testid="about-link">About</router-link>
+  <router-view />
+  <div data-testid="location-display">{{ $route.fullPath }}</div>
+</template>
diff --git a/src/__tests__/components/Router/LocationDisplay.vue b/src/__tests__/components/Router/LocationDisplay.vue
deleted file mode 100644
index eecf2959..00000000
--- a/src/__tests__/components/Router/LocationDisplay.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div data-testid="location-display">{{ $route.fullPath }}</div>
-</template>
diff --git a/src/__tests__/components/Router/NoMatch.vue b/src/__tests__/components/Router/NoMatch.vue
deleted file mode 100644
index 8118731c..00000000
--- a/src/__tests__/components/Router/NoMatch.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template functional>
-  <div>No match</div>
-</template>
diff --git a/src/__tests__/vue-router-mocha.js b/src/__tests__/vue-router-mocha.js
index 2f7553d1..c7263c78 100644
--- a/src/__tests__/vue-router-mocha.js
+++ b/src/__tests__/vue-router-mocha.js
@@ -1,18 +1,14 @@
-test.todo('Your test suite must contain at least one test.')
+import '@testing-library/jest-dom'
+import {render} from '..'
 
-// import '@testing-library/jest-dom'
-// import {render} from '..'
+import About from './components/Router/About.vue'
 
-// import About from './components/Router/About.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', () => 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"),
-//   )
-// })
+  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 d2e098d3..221175ab 100644
--- a/src/__tests__/vue-router.js
+++ b/src/__tests__/vue-router.js
@@ -1,38 +1,34 @@
-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 '..'
-// import App from './components/Router/App.vue'
-// import Home from './components/Router/Home.vue'
-// import About from './components/Router/About.vue'
-
-// const routes = [
-//   {path: '/', component: Home},
-//   {path: '/about', component: About},
-// ]
-
-// test('full app rendering/navigating', async () => {
-//   // Notice how we pass a `routes` object to our render function.
-//   const {queryByTestId} = render(App, {routes})
-
-//   expect(queryByTestId('location-display')).toHaveTextContent('/')
-
-//   await fireEvent.click(queryByTestId('about-link'))
-
-//   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')
-// })
+// 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 {waitFor} from '@testing-library/dom'
+import {render, fireEvent} from '..'
+import App from './components/Router/App.vue'
+import Home from './components/Router/Home.vue'
+import About from './components/Router/About.vue'
+
+const routes = [
+  {path: '/', component: Home},
+  {path: '/about', component: About},
+]
+
+test('full app rendering/navigating', async () => {
+  // Notice how we pass a `routes` object to our render function.
+  const {findByText, getByText, getByTestId} = render(App, {routes})
+
+  // Vue Router navigation is async, so we need to wait until the
+  // initial render happens
+  expect(await findByText('You are home')).toBeInTheDocument()
+
+  await fireEvent.click(getByTestId('about-link'))
+
+  // Same thing here: Vue Router navigation is async, so we need to wait until the
+  // navigation happens
+  await waitFor(() =>
+    expect(getByTestId('location-display')).toHaveTextContent('/about'),
+  )
+
+  expect(getByText('You are on the about page')).toBeInTheDocument()
+})
diff --git a/src/index.js b/src/index.js
index 4fbdf6e0..2dc2432c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,19 +15,16 @@ function render(
   TestComponent,
   {
     store = null,
-    // routes = null,
+    routes = null,
     container: customContainer,
     baseElement: customBaseElement,
     ...mountOptions
   } = {},
-  // configurationCb,
 ) {
   const div = document.createElement('div')
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
-  // let additionalOptions = {}
-
   const plugins = []
 
   if (store) {
@@ -35,29 +32,23 @@ function render(
     plugins.push(createStore(store))
   }
 
-  // if (routes) {
-  //   const requiredRouter = require('vue-router')
-  //   const {createRouter, createWebHistory} =
-  //     requiredRouter.default || requiredRouter
-  //   plugins.push(createRouter({history: createWebHistory(), routes}))
-  // }
+  if (routes) {
+    const requiredRouter = require('vue-router')
+    const {createRouter, createWebHistory} =
+      requiredRouter.default || requiredRouter
 
-  // Should we expose vue 3 app? if so, how?
-  // if (configurationCb && typeof configurationCb === 'function') {
-  //   additionalOptions = configurationCb(router)
-  // }
+    const routerPlugin = createRouter({history: createWebHistory(), routes})
+    plugins.push(routerPlugin)
+  }
 
   const mountComponent = (Component, newProps) => {
     const wrapper = mount(
       Component,
       merge({
         attachTo: container,
-        global: {
-          plugins,
-        },
+        global: {plugins},
         ...mountOptions,
         props: newProps || mountOptions.props,
-        // ...additionalOptions,
       }),
     )
 

From 62e9b455a14591c8a46f0e841908c4a33c1f81d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Wed, 9 Dec 2020 22:32:16 +0100
Subject: [PATCH 07/39] chore: Cleanup examples

---
 src/__tests__/components/Button.vue        | 3 ++-
 src/__tests__/components/Collapsible.vue   | 2 +-
 src/__tests__/components/Form.vue          | 3 +--
 src/__tests__/components/FunctionalSFC.vue | 3 ---
 src/__tests__/components/Stubs.vue         | 1 -
 src/__tests__/components/TextMatchers.vue  | 3 ---
 src/__tests__/components/Vuetify.vue       | 2 +-
 7 files changed, 5 insertions(+), 12 deletions(-)
 delete mode 100644 src/__tests__/components/FunctionalSFC.vue
 delete mode 100644 src/__tests__/components/TextMatchers.vue

diff --git a/src/__tests__/components/Button.vue b/src/__tests__/components/Button.vue
index 4c825609..9c9aad3f 100644
--- a/src/__tests__/components/Button.vue
+++ b/src/__tests__/components/Button.vue
@@ -10,8 +10,9 @@ export default {
       default: 'Button Text',
     },
   },
+  emits: {click: null},
   methods: {
-    handleClick(e) {
+    handleClick(_e) {
       this.$emit('click')
     },
   },
diff --git a/src/__tests__/components/Collapsible.vue b/src/__tests__/components/Collapsible.vue
index 33766853..120db8eb 100644
--- a/src/__tests__/components/Collapsible.vue
+++ b/src/__tests__/components/Collapsible.vue
@@ -15,7 +15,7 @@ export default {
     }
   },
   methods: {
-    handleClick(e) {
+    handleClick(_) {
       this.displayElement = !this.displayElement
     },
   },
diff --git a/src/__tests__/components/Form.vue b/src/__tests__/components/Form.vue
index ffa729f2..73897cb2 100644
--- a/src/__tests__/components/Form.vue
+++ b/src/__tests__/components/Form.vue
@@ -41,6 +41,7 @@
 
 <script>
 export default {
+  emits: {submit: null},
   data() {
     return {
       title: '',
@@ -49,13 +50,11 @@ export default {
       recommend: false,
     }
   },
-
   computed: {
     submitDisabled() {
       return !this.title || !this.review
     },
   },
-
   methods: {
     submit() {
       if (this.submitDisabled) return
diff --git a/src/__tests__/components/FunctionalSFC.vue b/src/__tests__/components/FunctionalSFC.vue
deleted file mode 100644
index b69d9c91..00000000
--- a/src/__tests__/components/FunctionalSFC.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template functional>
-  <p>Hi!</p>
-</template>
diff --git a/src/__tests__/components/Stubs.vue b/src/__tests__/components/Stubs.vue
index c6d7602c..46d92232 100644
--- a/src/__tests__/components/Stubs.vue
+++ b/src/__tests__/components/Stubs.vue
@@ -7,7 +7,6 @@ import Directive from './Directive'
 
 export default {
   name: 'Stubs',
-
   components: {
     Directive,
   },
diff --git a/src/__tests__/components/TextMatchers.vue b/src/__tests__/components/TextMatchers.vue
deleted file mode 100644
index 5f88fd2a..00000000
--- a/src/__tests__/components/TextMatchers.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <a id="anchor" href="/about">About</a>
-</template>
diff --git a/src/__tests__/components/Vuetify.vue b/src/__tests__/components/Vuetify.vue
index 9ab90dfc..a43b6ace 100644
--- a/src/__tests__/components/Vuetify.vue
+++ b/src/__tests__/components/Vuetify.vue
@@ -8,7 +8,7 @@
       </v-card>
     </v-dialog>
     <v-menu bottom offset-y>
-      <template v-slot:activator="{on}">
+      <template #activator="{on}">
         <v-btn icon v-on="on">open menu</v-btn>
       </template>
       <v-list>

From 465676f5e98f1de59b72e366bc84580d1cdd6d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Wed, 9 Dec 2020 22:44:09 +0100
Subject: [PATCH 08/39] chore: Replace vue-portal with teleport

---
 package.json                |  1 -
 src/__tests__/teleport.js   | 41 +++++++++++++++++++++++++++++++++++++
 src/__tests__/vue-portal.js | 34 ------------------------------
 3 files changed, 41 insertions(+), 35 deletions(-)
 create mode 100644 src/__tests__/teleport.js
 delete mode 100644 src/__tests__/vue-portal.js

diff --git a/package.json b/package.json
index 1f17fab0..a10fa6c2 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
     "jest-serializer-vue": "^2.0.2",
     "kcd-scripts": "^7.5.1",
     "msw": "^0.21.3",
-    "portal-vue": "^2.1.7",
     "typescript": "^4.1.2",
     "vee-validate": "^4.0.2",
     "vue": "^3.0.4",
diff --git a/src/__tests__/teleport.js b/src/__tests__/teleport.js
new file mode 100644
index 00000000..04dbf6db
--- /dev/null
+++ b/src/__tests__/teleport.js
@@ -0,0 +1,41 @@
+import {defineComponent} from 'vue'
+import '@testing-library/jest-dom/extend-expect'
+import {render, fireEvent} from '..'
+
+const ModalButton = defineComponent({
+  data() {
+    return {
+      modalOpen: false,
+    }
+  },
+
+  template: `
+    <button @click="modalOpen = true">open</button>
+
+    <teleport to="body">
+      <div v-if="modalOpen" data-testid="teleported-modal">
+        This is a teleported modal!
+        <button @click="modalOpen = false">close</button>
+      </div>
+    </teleport>
+  `,
+})
+
+test('Teleport', async () => {
+  const {queryByText, getByText} = render(ModalButton)
+
+  expect(queryByText('This is a teleported modal!')).not.toBeInTheDocument()
+
+  // Open the modal
+  await fireEvent.click(getByText('open'))
+
+  const modal = getByText('This is a teleported modal!')
+
+  expect(modal).toBeInTheDocument()
+  expect(modal.parentNode.nodeName).toBe('BODY')
+
+  // Close the modal
+  await fireEvent.click(getByText('close'))
+
+  expect(queryByText('This is a teleported modal!')).not.toBeInTheDocument()
+})
diff --git a/src/__tests__/vue-portal.js b/src/__tests__/vue-portal.js
deleted file mode 100644
index 7aa87c82..00000000
--- a/src/__tests__/vue-portal.js
+++ /dev/null
@@ -1,34 +0,0 @@
-test.todo('Your test suite must contain at least one test.')
-
-// import {render, waitFor} from '..'
-// import '@testing-library/jest-dom/extend-expect'
-// import PortalVue from 'portal-vue'
-
-// const PortalComponent = {
-//   template: `
-//     <div>
-//       <Portal to="portalName" data-testid="portal">
-//         <p>Content rendered wherever the portal-target is located.</p>
-//       </Portal>
-
-//       <PortalTarget name="portalName" data-testid="target" />
-//   </div>`,
-// }
-
-// 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)
-//   })
-
-//   // 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.',
-//   )
-// })

From 11bf94866a58233da34474ddaea5b6ff8e379065 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Wed, 9 Dec 2020 22:50:50 +0100
Subject: [PATCH 09/39] Remove unnecessary guard

---
 src/__tests__/cleanup-throw.js | 25 -------------------------
 src/index.js                   |  7 ++-----
 2 files changed, 2 insertions(+), 30 deletions(-)
 delete mode 100644 src/__tests__/cleanup-throw.js

diff --git a/src/__tests__/cleanup-throw.js b/src/__tests__/cleanup-throw.js
deleted file mode 100644
index d424d59f..00000000
--- a/src/__tests__/cleanup-throw.js
+++ /dev/null
@@ -1,25 +0,0 @@
-test.todo('check if this test still makes sense')
-
-// import {render, cleanup} from '..'
-// import {nextTick} from 'vue'
-
-// 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(() => {})
-
-//   await nextTick()
-//   expect(cleanup).toThrow(err)
-
-//   // unmute console
-//   spy.mockReset()
-// })
diff --git a/src/index.js b/src/index.js
index 2dc2432c..e9b0ff9c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -98,11 +98,8 @@ function cleanupAtWrapper(wrapper) {
     document.body.removeChild(wrapper.element.parentNode)
   }
 
-  try {
-    wrapper.unmount()
-  } finally {
-    mountedWrappers.delete(wrapper)
-  }
+  wrapper.unmount()
+  mountedWrappers.delete(wrapper)
 }
 
 // Vue Testing Library's version of fireEvent will call DOM Testing Library's

From 56e0152b829e0a4c545d2f38ec7078b57e5db110 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Thu, 10 Dec 2020 09:23:31 +0100
Subject: [PATCH 10/39] docs: Add example for external UI library

---
 package.json                  |  1 +
 src/__tests__/element-plus.js | 37 +++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/__tests__/element-plus.js

diff --git a/package.json b/package.json
index a10fa6c2..a316663e 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "apollo-client": "^2.6.10",
     "axios": "^0.20.0",
     "dtslint": "^4.0.6",
+    "element-plus": "^1.0.1-beta.7",
     "eslint-plugin-vue": "^7.1.0",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
diff --git a/src/__tests__/element-plus.js b/src/__tests__/element-plus.js
new file mode 100644
index 00000000..0d1eb633
--- /dev/null
+++ b/src/__tests__/element-plus.js
@@ -0,0 +1,37 @@
+import ElementPlus from 'element-plus'
+import {defineComponent} from 'vue'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import {render, screen, waitFor} from '..'
+
+const Component = defineComponent({
+  template: `
+    <el-popover trigger="hover" content="this is content">
+      <template #reference>
+        <el-button>Hover to activate</el-button>
+      </template>
+    </el-popover>
+  `,
+})
+
+test('Stubs out a component', async () => {
+  render(Component, {
+    global: {
+      plugins: [ElementPlus],
+    },
+  })
+
+  const button = screen.getByText('Hover to activate')
+  const getContent = () => screen.getByText('this is content')
+
+  expect(getContent()).toBeInTheDocument()
+  expect(getContent()).not.toBeVisible()
+
+  userEvent.hover(button)
+
+  await waitFor(() => expect(getContent()).toBeVisible())
+
+  userEvent.unhover(button)
+
+  await waitFor(() => expect(getContent()).not.toBeVisible())
+})

From 49208ef25af03e19e5245ef592a04825e402cf29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 14 Dec 2020 00:12:58 +0100
Subject: [PATCH 11/39] fix(types): add missing types for Vue Router

---
 types/index.d.ts | 3 ++-
 types/test.ts    | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index 5dec7fa4..c886447a 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -4,6 +4,7 @@
 import {EmitsOptions} from 'vue'
 import {MountingOptions} from '@vue/test-utils'
 import {StoreOptions} from 'vuex'
+import {RouteRecordRaw} from 'vue-router'
 import {queries, EventType, BoundFunctions} from '@testing-library/dom'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
@@ -33,7 +34,7 @@ type VueTestUtilsRenderOptions = Omit<
 >
 type VueTestingLibraryRenderOptions = {
   store?: StoreOptions<{}>
-  // router?: ¿¿¿???
+  routes?: RouteRecordRaw[]
   container?: Element
   baseElement?: Element
 }
diff --git a/types/test.ts b/types/test.ts
index b11b466b..aeb5df89 100644
--- a/types/test.ts
+++ b/types/test.ts
@@ -82,6 +82,7 @@ export function testOptions() {
       state: {count: 3},
       strict: true,
     },
+    routes: [{path: '/', component: () => SomeComponent, name: 'route name'}],
     baseElement: document.createElement('div'),
     container: document.createElement('div'),
   })

From 94f57f886bf1e06dbe5de7b466c1a85ca9e45029 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Thu, 17 Dec 2020 10:01:50 +0100
Subject: [PATCH 12/39] docs: Add example for Apollo GraphQL + composition API
 (#192)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add vue-router types

* docs: Add example for external UI library

* docs: Add example for Apollo GraphQL + composition API

* Remove not used import

* Use global provider to inject apollo client

* fix: resolve failing test

* fix: remove coverage provider in jest.config

* Fron apollo/client 3.2.3 to 3.0.0

* Fron apollo/client 3.0.0 to 3.3.6

* Delete not needed apollo in memory dependency

Co-authored-by: Adrià Fontcuberta <afontcu@gmail.com>
Co-authored-by: atanda rasheed <atandarash@gmail.com>
---
 .babelrc                                      |   8 -
 babel.config.js                               |  14 ++
 compatibility-scripts/vue-apollo-patch.js     |  34 +++++
 jest.config.js                                |   8 +-
 package.json                                  |  11 +-
 src/__tests__/components/VueApollo.vue        |  57 ++++---
 src/__tests__/components/VueApollo/queries.js |  17 +--
 src/__tests__/vue-apollo.js                   | 139 ++++++++++--------
 8 files changed, 173 insertions(+), 115 deletions(-)
 delete mode 100644 .babelrc
 create mode 100644 babel.config.js
 create mode 100644 compatibility-scripts/vue-apollo-patch.js

diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 6849ed4f..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "presets": [
-    ["@babel/env"]
-  ],
-  "plugins": [
-    "@babel/plugin-transform-runtime"
-  ]
-}
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..424f157b
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  sourceType: 'module',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+          esmodules: true,
+        },
+      },
+    ],
+  ],
+}
diff --git a/compatibility-scripts/vue-apollo-patch.js b/compatibility-scripts/vue-apollo-patch.js
new file mode 100644
index 00000000..e1702929
--- /dev/null
+++ b/compatibility-scripts/vue-apollo-patch.js
@@ -0,0 +1,34 @@
+// This patch is run from post-install script and it is a temporary hack until a pending PR is merged
+// More details here:
+// https://github.com/vuejs/vue-apollo/issues/1011
+const fs = require('fs')
+const path = require('path')
+
+const useQueryPath = path.resolve(
+  __dirname,
+  '../node_modules/@vue/apollo-composable/dist/useQuery.js',
+)
+
+const vueApolloComposablePath = path.resolve(
+  __dirname,
+  '../node_modules/@vue/apollo-composable/dist/vue-apollo-composable.js',
+)
+
+fs.writeFileSync(
+  useQueryPath,
+  fs.readFileSync(useQueryPath, 'utf8').replace(/^onServerPrefetch, /mu, ''),
+)
+
+fs.writeFileSync(
+  useQueryPath,
+  fs
+    .readFileSync(useQueryPath, 'utf8')
+    .replace(/onServerPrefetch === null.*?\}\);/msu, ''),
+)
+
+fs.writeFileSync(
+  vueApolloComposablePath,
+  fs
+    .readFileSync(vueApolloComposablePath, 'utf8')
+    .replace(/vue_demi_5.onServerPrefetch === null.*?\}\);/msu, ''),
+)
diff --git a/jest.config.js b/jest.config.js
index 09a45c1d..9d901b60 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -12,8 +12,14 @@ module.exports = merge(config, {
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   testPathIgnorePatterns: [
-    '<rootDir>/node_modules',
+    '<rootDir>/node_modules/',
     '<rootDir>/src/__tests__/components',
     '<rootDir>/src/__tests__/directives',
   ],
+  moduleNameMapper: {
+    '@vue/apollo-composable': [
+      '<rootDir>/node_modules/@vue/apollo-composable/dist/index.js',
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!(@vue/apollo-composable)/)'],
 })
diff --git a/package.json b/package.json
index a316663e..622a3162 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
-    "setup": "npm install && npm run validate -s"
+    "setup": "npm install && npm run validate -s",
+    "postinstall": "node compatibility-scripts/vue-apollo-patch.js"
   },
   "engines": {
     "node": ">10.18"
@@ -52,14 +53,14 @@
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
+    "@apollo/client": "3.3.6",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/user-event": "^12.4.0",
     "@types/estree": "0.0.45",
+    "@vue/apollo-composable": "^4.0.0-alpha.12",
     "@vue/compiler-sfc": "^3.0.4",
     "apollo-boost": "^0.4.9",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
     "axios": "^0.20.0",
     "dtslint": "^4.0.6",
     "element-plus": "^1.0.1-beta.7",
@@ -81,8 +82,8 @@
     "vuex": "^4.0.0-rc.2"
   },
   "peerDependencies": {
-    "vue": ">= 3",
-    "@vue/compiler-sfc": ">= 3"
+    "@vue/compiler-sfc": ">= 3",
+    "vue": ">= 3"
   },
   "husky": {
     "hooks": {
diff --git a/src/__tests__/components/VueApollo.vue b/src/__tests__/components/VueApollo.vue
index a491c0e4..372978d3 100644
--- a/src/__tests__/components/VueApollo.vue
+++ b/src/__tests__/components/VueApollo.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
-    <div v-if="$apollo.queries.user.loading">Loading</div>
+    <div v-if="loading">Loading</div>
+
     <div v-if="user">
       <div>Email: {{ user.email }}</div>
       <form @submit.prevent="updateUser">
@@ -15,47 +16,39 @@
 </template>
 
 <script>
-import {userQuery, updateUserMutation} from './VueApollo/queries'
+import {reactive, ref} from 'vue'
+import {useQuery, useMutation, useResult} from '@vue/apollo-composable'
+import {updateUserMutation, getUserQuery} from './VueApollo/queries'
 
 export default {
-  apollo: {
-    user: {
-      query: userQuery,
-      variables() {
-        return {id: this.id}
-      },
-    },
-  },
   props: {
     id: {
       type: String,
       required: true,
     },
   },
-  data() {
-    return {
-      user: null,
-      email: '',
-    }
-  },
-  methods: {
-    async updateUser() {
-      const {
-        data: {
-          updateUser: {email},
-        },
-      } = await this.$apollo.mutate({
-        mutation: updateUserMutation,
-        variables: {
-          input: {
-            email: this.email,
-            id: this.id,
-          },
+  setup(props) {
+    const email = ref('')
+
+    const {result, loading, error} = useQuery(getUserQuery, {id: props.id})
+    const user = useResult(result, null, data => data.user)
+
+    const {mutate: updateUser} = useMutation(updateUserMutation, () => ({
+      variables: {
+        input: {
+          email: email.value,
+          id: props.id,
         },
-      })
+      },
+    }))
 
-      this.user.email = email
-    },
+    return {
+      email,
+      user,
+      loading,
+      error,
+      updateUser,
+    }
   },
 }
 </script>
diff --git a/src/__tests__/components/VueApollo/queries.js b/src/__tests__/components/VueApollo/queries.js
index 05cd43c2..cd85fa2f 100644
--- a/src/__tests__/components/VueApollo/queries.js
+++ b/src/__tests__/components/VueApollo/queries.js
@@ -1,19 +1,18 @@
-import gql from 'graphql-tag'
+import {gql} from 'apollo-boost'
 
-export const updateUserMutation = gql`
-  mutation updateUser($data: UpdateUserInput) {
-    updateUser(input: $data) {
+export const getUserQuery = gql`
+  query getUser($id: String!) {
+    user(id: $id) {
       id
       email
     }
   }
 `
-
-export const userQuery = gql`
-  query User($id: String!) {
-    user(id: $id) {
+export const updateUserMutation = gql`
+  mutation updateUser($data: UpdateUserInput) {
+    updateUser(input: $data) {
       id
       email
     }
   }
-`
+`
\ No newline at end of file
diff --git a/src/__tests__/vue-apollo.js b/src/__tests__/vue-apollo.js
index d7728ed8..a7d04e01 100644
--- a/src/__tests__/vue-apollo.js
+++ b/src/__tests__/vue-apollo.js
@@ -1,75 +1,94 @@
-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 '..'
-// import VueApollo from 'vue-apollo'
-// import {InMemoryCache} from 'apollo-cache-inmemory'
-// import ApolloClient from 'apollo-boost'
+import '@testing-library/jest-dom'
+import fetch from 'isomorphic-unfetch'
+import {render, fireEvent, screen} from '..'
+import {DefaultApolloClient} from '@vue/apollo-composable'
+import ApolloClient from 'apollo-boost'
+import {setupServer} from 'msw/node'
+import {graphql} from 'msw'
+import Component from './components/VueApollo.vue'
 
-// // 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 provide 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 are using Mock Service Worker (aka MSW) 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'
+const server = setupServer(
+  ...[
+    graphql.query('getUser', (req, res, ctx) => {
+      const {variables} = req
 
-// import Component from './components/VueApollo.vue'
+      if (variables.id !== '1') {
+        return res(
+          ctx.errors([
+            {
+              message: 'User not found',
+            },
+          ]),
+        )
+      }
 
-// const apolloClient = new ApolloClient({
-//   uri: 'http://localhost:3020/graphql',
-//   cache: new InMemoryCache({
-//     addTypename: false,
-//   }),
-//   fetch,
-// })
+      return res(
+        ctx.data({
+          user: {
+            id: 1,
+            email: 'alice@example.com',
+            __typename: 'User',
+          },
+        }),
+      )
+    }),
 
-// const server = setupServer(
-//   ...[
-//     graphql.mutation('updateUser', (req, res, ctx) => {
-//       const {variables} = req
+    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,
+            __typename: 'User',
+          },
+        }),
+      )
+    }),
+  ],
+)
 
-// 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 () => {
+  const apolloClient = new ApolloClient({
+    uri: 'http://localhost:3000',
+    fetch,
+  })
 
-//     return {
-//       apolloProvider: new VueApollo({defaultClient: apolloClient}),
-//     }
-//   })
+  render(Component, {
+    props: {id: '1'},
+    global: {
+      provide: {
+        [DefaultApolloClient]: 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 ca5f32c22dd938d4076615e9f673bf9eeb1b18f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 8 Jan 2021 15:28:41 +0100
Subject: [PATCH 13/39] fix(rerender): Do not mount component again on rerender
 (#199)

* Do not mount component again on rerender

* Remove leftover
---
 src/__tests__/rerender.js | 23 +++++++++++------------
 src/index.js              | 39 ++++++++++++++-------------------------
 2 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/src/__tests__/rerender.js b/src/__tests__/rerender.js
index d72dc1b6..490635fc 100644
--- a/src/__tests__/rerender.js
+++ b/src/__tests__/rerender.js
@@ -7,25 +7,24 @@ import NumberDisplay from './components/NumberDisplay'
 // to ensure that the rerendered component is being updated correctly.
 // That said, if you'd prefer to, for example, update the props of a rendered
 // component, this function can be used to do so.
-test('calling rerender remounts the component and updates the props', () => {
+test('rerender re-renders the element', async () => {
   const {rerender, getByTestId} = render(NumberDisplay, {
     props: {number: 1},
   })
 
   expect(getByTestId('number-display')).toHaveTextContent('1')
 
-  rerender({props: {number: 3}})
+  await rerender({number: 3})
   expect(getByTestId('number-display')).toHaveTextContent('3')
 
-  rerender({props: {number: 5}})
+  await rerender({number: 5})
   expect(getByTestId('number-display')).toHaveTextContent('5')
 
-  // Assert that, after rerendering and updating props, the component has been remounted,
-  // meaning we are testing a different component instance than we rendered initially.
-  expect(getByTestId('instance-id')).toHaveTextContent('3')
+  // Notice we don't remount a different instance
+  expect(getByTestId('instance-id')).toHaveTextContent('1')
 })
 
-test('rerender works with composition API', () => {
+test('rerender works with composition API', async () => {
   const Component = defineComponent({
     props: {
       foo: {type: String, default: 'foo'},
@@ -43,11 +42,11 @@ test('rerender works with composition API', () => {
 
   const {rerender, getByTestId} = render(Component)
 
-  const originalNode = getByTestId('node')
-  expect(originalNode).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
+  const getContent = () => getByTestId('node')
 
-  rerender({props: {foo: 'qux'}})
+  expect(getContent()).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
 
-  const newNode = getByTestId('node')
-  expect(newNode).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
+  await rerender({foo: 'qux'})
+
+  expect(getContent()).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
 })
diff --git a/src/index.js b/src/index.js
index e9b0ff9c..fca58e3f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,7 +12,7 @@ import {
 const mountedWrappers = new Set()
 
 function render(
-  TestComponent,
+  Component,
   {
     store = null,
     routes = null,
@@ -41,26 +41,20 @@ function render(
     plugins.push(routerPlugin)
   }
 
-  const mountComponent = (Component, newProps) => {
-    const wrapper = mount(
-      Component,
-      merge({
-        attachTo: container,
-        global: {plugins},
-        ...mountOptions,
-        props: newProps || mountOptions.props,
-      }),
-    )
-
-    // 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)
+  const wrapper = mount(
+    Component,
+    merge({
+      attachTo: container,
+      global: {plugins},
+      ...mountOptions,
+    }),
+  )
 
-    mountedWrappers.add(wrapper)
-    return wrapper
-  }
+  // 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)
 
-  let wrapper = mountComponent(TestComponent)
+  mountedWrappers.add(wrapper)
 
   return {
     container,
@@ -72,12 +66,7 @@ function render(
     unmount: () => wrapper.unmount(),
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
-    rerender: ({props}) => {
-      wrapper.unmount()
-      mountedWrappers.delete(wrapper)
-
-      wrapper = mountComponent(TestComponent, props)
-    },
+    rerender: props => wrapper.setProps(props),
     ...getQueriesForElement(baseElement),
   }
 }

From 92c3140faec9bf38d5beb63e7d093eec6b17445c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 8 Jan 2021 15:51:06 +0100
Subject: [PATCH 14/39] fix(plugins): allow setting vuex/router and custom
 plugins (#200)

* Do not mount component again on rerender

* fix(plugins): allow setting custom plugin and vuex/router

* Simplify setting logic
---
 package.json             |  4 ++--
 src/__tests__/plugins.js | 49 ++++++++++++++++++++++++++++++++++++++++
 src/index.js             | 16 +++++--------
 3 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 src/__tests__/plugins.js

diff --git a/package.json b/package.json
index 622a3162..a7b92fe6 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.1",
     "@testing-library/dom": "^7.28.1",
-    "@vue/test-utils": "^2.0.0-beta.12",
-    "lodash.merge": "^4.6.2"
+    "@vue/test-utils": "^2.0.0-beta.12"
   },
   "devDependencies": {
     "@apollo/client": "3.3.6",
@@ -70,6 +69,7 @@
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
     "kcd-scripts": "^7.5.1",
+    "lodash.merge": "^4.6.2",
     "msw": "^0.21.3",
     "typescript": "^4.1.2",
     "vee-validate": "^4.0.2",
diff --git a/src/__tests__/plugins.js b/src/__tests__/plugins.js
new file mode 100644
index 00000000..def1b78e
--- /dev/null
+++ b/src/__tests__/plugins.js
@@ -0,0 +1,49 @@
+import '@testing-library/jest-dom'
+import ElementPlus from 'element-plus'
+import userEvent from '@testing-library/user-event'
+import {defineComponent} from 'vue'
+import {render, screen, fireEvent, waitFor} from '..'
+import {store} from './components/Store/store'
+
+test('can set global options and custom options such as a store', async () => {
+  const ComponentWithStore = defineComponent({
+    template: `
+      <el-popover trigger="hover" content="this is content">
+        <template #reference>
+          <el-button @click="$store.dispatch('increment')">
+            Hover to activate
+          </el-button>
+        </template>
+      </el-popover>
+      <span data-testid="count-value">{{ $store.state.count }}</span>
+      <directive />
+    `,
+  })
+
+  const DirectiveStub = {
+    template: '<p>Search now</p>',
+  }
+
+  render(ComponentWithStore, {
+    store,
+    global: {
+      plugins: [ElementPlus],
+      stubs: {
+        Directive: DirectiveStub,
+      },
+    },
+  })
+
+  expect(screen.getByText('Search now')).toBeInTheDocument()
+
+  const button = screen.getByText('Hover to activate')
+  userEvent.hover(button)
+
+  await waitFor(() => expect(screen.getByText('this is content')).toBeVisible())
+
+  expect(screen.getByTestId('count-value')).toHaveTextContent('0')
+
+  await fireEvent.click(button)
+
+  expect(screen.getByTestId('count-value')).toHaveTextContent('1')
+})
diff --git a/src/index.js b/src/index.js
index fca58e3f..fb96bfc5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 /* eslint-disable testing-library/no-wait-for-empty-callback */
 import {mount} from '@vue/test-utils'
-import merge from 'lodash.merge'
 
 import {
   getQueriesForElement,
@@ -25,7 +24,7 @@ function render(
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
-  const plugins = []
+  const plugins = mountOptions.global?.plugins || []
 
   if (store) {
     const {createStore} = require('vuex')
@@ -41,14 +40,11 @@ function render(
     plugins.push(routerPlugin)
   }
 
-  const wrapper = mount(
-    Component,
-    merge({
-      attachTo: container,
-      global: {plugins},
-      ...mountOptions,
-    }),
-  )
+  const wrapper = mount(Component, {
+    ...mountOptions,
+    attachTo: container,
+    global: {...mountOptions.global, plugins},
+  })
 
   // 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

From fa22f41f0882e00adf6d2af3f7c48db56137d97d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 11 Jan 2021 10:46:03 +0100
Subject: [PATCH 15/39] fix(install): do not call vue-apollo patch on
 installation

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a7b92fe6..3f615118 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,11 @@
     "format": "kcd-scripts format",
     "build": "kcd-scripts build",
     "lint": "kcd-scripts lint",
+    "pretest": "node compatibility-scripts/vue-apollo-patch.js",
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
-    "setup": "npm install && npm run validate -s",
-    "postinstall": "node compatibility-scripts/vue-apollo-patch.js"
+    "setup": "npm install && npm run validate -s"
   },
   "engines": {
     "node": ">10.18"

From 9937f0197c072845b213e31768c6ac32d763a1dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Thu, 11 Feb 2021 09:39:16 +0100
Subject: [PATCH 16/39] chore: Bump deps (#207)

---
 package.json                          | 36 +++++++++++++--------------
 src/__tests__/components/Validate.vue |  4 +--
 src/__tests__/validate-plugin.js      |  4 +--
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 3f615118..2ba64573 100644
--- a/package.json
+++ b/package.json
@@ -47,39 +47,39 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.12.1",
-    "@testing-library/dom": "^7.28.1",
-    "@vue/test-utils": "^2.0.0-beta.12"
+    "@babel/runtime": "^7.12.13",
+    "@testing-library/dom": "^7.29.4",
+    "@vue/test-utils": "^2.0.0-rc.0"
   },
   "devDependencies": {
     "@apollo/client": "3.3.6",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/user-event": "^12.4.0",
+    "@babel/plugin-transform-runtime": "^7.12.15",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/user-event": "^12.7.0",
     "@types/estree": "0.0.45",
     "@vue/apollo-composable": "^4.0.0-alpha.12",
     "@vue/compiler-sfc": "^3.0.4",
     "apollo-boost": "^0.4.9",
     "axios": "^0.20.0",
-    "dtslint": "^4.0.6",
-    "element-plus": "^1.0.1-beta.7",
-    "eslint-plugin-vue": "^7.1.0",
-    "graphql": "^15.4.0",
+    "dtslint": "^4.0.7",
+    "element-plus": "^1.0.1-beta.27",
+    "eslint-plugin-vue": "^7.5.0",
+    "graphql": "^15.5.0",
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^7.5.1",
+    "kcd-scripts": "^7.6.0",
     "lodash.merge": "^4.6.2",
     "msw": "^0.21.3",
-    "typescript": "^4.1.2",
-    "vee-validate": "^4.0.2",
+    "typescript": "^4.1.5",
+    "vee-validate": "^4.1.18",
     "vue": "^3.0.4",
     "vue-apollo": "^3.0.5",
-    "vue-i18n": "^9.0.0-beta.10",
-    "vue-jest": "^5.0.0-alpha.7",
-    "vue-router": "^4.0.1",
-    "vuetify": "^2.3.19",
-    "vuex": "^4.0.0-rc.2"
+    "vue-i18n": "^9.0.0-rc.6",
+    "vue-jest": "^5.0.0-alpha.8",
+    "vue-router": "^4.0.3",
+    "vuetify": "^2.4.4",
+    "vuex": "^4.0.0"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": ">= 3",
diff --git a/src/__tests__/components/Validate.vue b/src/__tests__/components/Validate.vue
index d976ae27..2c5d76b9 100644
--- a/src/__tests__/components/Validate.vue
+++ b/src/__tests__/components/Validate.vue
@@ -1,9 +1,7 @@
 <template>
   <Form>
     <Field :rules="validateEmail" name="email" as="input" type="email" />
-
-    <error-message name="email" data-testid="error-message" />
-
+    <ErrorMessage name="email" data-testid="error-message" />
     <button>Sign up</button>
   </Form>
 </template>
diff --git a/src/__tests__/validate-plugin.js b/src/__tests__/validate-plugin.js
index 12d58981..16ed7fa9 100644
--- a/src/__tests__/validate-plugin.js
+++ b/src/__tests__/validate-plugin.js
@@ -4,10 +4,10 @@ import {render, fireEvent} from '..'
 import VeeValidate from './components/Validate'
 
 test('can validate using plugin', async () => {
-  const {findByText, getByRole, getByTestId} = render(VeeValidate)
+  const {findByText, getByRole, queryByTestId} = render(VeeValidate)
 
   // Assert error messages are not in the DOM when rendering the component.
-  expect(getByTestId('error-message')).toBeEmptyDOMElement()
+  expect(queryByTestId('error-message')).not.toBeInTheDocument()
 
   const emailInput = getByRole('textbox')
 

From de9f78ab7b1863614cffb75604d3fd4157899169 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Thu, 18 Feb 2021 16:25:56 +0100
Subject: [PATCH 17/39] chore: Cleanup structure  (#211)

* Split index into focused files

* Add test to increase coverage
---
 src/__tests__/fire-event.js |  14 ++-
 src/__tests__/vue-apollo.js |   2 +-
 src/fire-event.js           |  87 ++++++++++++++++++
 src/index.js                | 177 +-----------------------------------
 src/render.js               |  85 +++++++++++++++++
 5 files changed, 191 insertions(+), 174 deletions(-)
 create mode 100644 src/fire-event.js
 create mode 100644 src/render.js

diff --git a/src/__tests__/fire-event.js b/src/__tests__/fire-event.js
index 19cef6b2..da21747a 100644
--- a/src/__tests__/fire-event.js
+++ b/src/__tests__/fire-event.js
@@ -201,11 +201,23 @@ test.each(['input', 'change'])(
 
     expect(console.warn).toHaveBeenCalledTimes(1)
     expect(console.warn).toHaveBeenCalledWith(
-      `Using fireEvent.${event}() may lead to unexpected results. Please use fireEvent.update() instead.`,
+      `Using "fireEvent.${event}" may lead to unexpected results. Please use fireEvent.update() instead.`,
     )
   },
 )
 
+test('does not warn when disabled via env var', async () => {
+  process.env.VTL_SKIP_WARN_EVENT_UPDATE = 'true'
+
+  const {getByTestId} = render({
+    template: `<input type="text" data-testid="test-update" />`,
+  })
+
+  await fireEvent.input(getByTestId('test-update'), 'hello')
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
+
 test('fireEvent.update does not trigger warning messages', async () => {
   const {getByTestId} = render({
     template: `<input type="text" data-testid="test-update" />`,
diff --git a/src/__tests__/vue-apollo.js b/src/__tests__/vue-apollo.js
index a7d04e01..6d29c517 100644
--- a/src/__tests__/vue-apollo.js
+++ b/src/__tests__/vue-apollo.js
@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom'
 import fetch from 'isomorphic-unfetch'
-import {render, fireEvent, screen} from '..'
 import {DefaultApolloClient} from '@vue/apollo-composable'
 import ApolloClient from 'apollo-boost'
 import {setupServer} from 'msw/node'
 import {graphql} from 'msw'
+import {render, fireEvent, screen} from '..'
 import Component from './components/VueApollo.vue'
 
 // Since vue-apollo doesn't provide a MockProvider for Vue,
diff --git a/src/fire-event.js b/src/fire-event.js
new file mode 100644
index 00000000..0c70d211
--- /dev/null
+++ b/src/fire-event.js
@@ -0,0 +1,87 @@
+/* eslint-disable testing-library/no-wait-for-empty-callback */
+import {waitFor, fireEvent as dtlFireEvent} from '@testing-library/dom'
+
+// Vue Testing Lib's version of fireEvent will call DOM Testing Lib's
+// version of fireEvent. The reason is because we need to wait another
+// event loop tick to allow Vue to flush and update the DOM
+// More info: https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
+
+async function fireEvent(...args) {
+  dtlFireEvent(...args)
+  await waitFor(() => {})
+}
+
+Object.keys(dtlFireEvent).forEach(key => {
+  fireEvent[key] = async (...args) => {
+    warnOnChangeOrInputEventCalledDirectly(args[1], key)
+
+    dtlFireEvent[key](...args)
+    await waitFor(() => {})
+  }
+})
+
+fireEvent.touch = async elem => {
+  await fireEvent.focus(elem)
+  await fireEvent.blur(elem)
+}
+
+// fireEvent.update is a small utility to provide a better experience when
+// working with v-model.
+// Related upstream issue: https://github.com/vuejs/vue-test-utils/issues/345#issuecomment-380588199
+// Examples: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/form.js fireEvent.update = (elem, value) => {
+fireEvent.update = (elem, value) => {
+  const tagName = elem.tagName
+  const type = elem.type
+
+  switch (tagName) {
+    case 'OPTION': {
+      elem.selected = true
+
+      const parentSelectElement =
+        elem.parentElement.tagName === 'OPTGROUP'
+          ? elem.parentElement.parentElement
+          : elem.parentElement
+
+      return fireEvent.change(parentSelectElement)
+    }
+
+    case 'INPUT': {
+      if (['checkbox', 'radio'].includes(type)) {
+        elem.checked = true
+        return fireEvent.change(elem)
+      } else if (type === 'file') {
+        return fireEvent.change(elem)
+      } else {
+        elem.value = value
+        return fireEvent.input(elem)
+      }
+    }
+
+    case 'TEXTAREA': {
+      elem.value = value
+      return fireEvent.input(elem)
+    }
+
+    case 'SELECT': {
+      elem.value = value
+      return fireEvent.change(elem)
+    }
+
+    default:
+    // do nothing
+  }
+
+  return null
+}
+
+function warnOnChangeOrInputEventCalledDirectly(eventValue, eventKey) {
+  if (process.env.VTL_SKIP_WARN_EVENT_UPDATE) return
+
+  if (eventValue && (eventKey === 'change' || eventKey === 'input')) {
+    console.warn(
+      `Using "fireEvent.${eventKey}" may lead to unexpected results. Please use fireEvent.update() instead.`,
+    )
+  }
+}
+
+export {fireEvent}
diff --git a/src/index.js b/src/index.js
index fb96bfc5..b9f4dc4e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,176 +1,8 @@
-/* eslint-disable testing-library/no-wait-for-empty-callback */
-import {mount} from '@vue/test-utils'
-
-import {
-  getQueriesForElement,
-  prettyDOM,
-  waitFor,
-  fireEvent as dtlFireEvent,
-} from '@testing-library/dom'
-
-const mountedWrappers = new Set()
-
-function render(
-  Component,
-  {
-    store = null,
-    routes = null,
-    container: customContainer,
-    baseElement: customBaseElement,
-    ...mountOptions
-  } = {},
-) {
-  const div = document.createElement('div')
-  const baseElement = customBaseElement || customContainer || document.body
-  const container = customContainer || baseElement.appendChild(div)
-
-  const plugins = mountOptions.global?.plugins || []
-
-  if (store) {
-    const {createStore} = require('vuex')
-    plugins.push(createStore(store))
-  }
-
-  if (routes) {
-    const requiredRouter = require('vue-router')
-    const {createRouter, createWebHistory} =
-      requiredRouter.default || requiredRouter
-
-    const routerPlugin = createRouter({history: createWebHistory(), routes})
-    plugins.push(routerPlugin)
-  }
-
-  const wrapper = mount(Component, {
-    ...mountOptions,
-    attachTo: container,
-    global: {...mountOptions.global, plugins},
-  })
-
-  // 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)
-
-  return {
-    container,
-    baseElement,
-    debug: (el = baseElement, maxLength, options) =>
-      Array.isArray(el)
-        ? el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
-        : console.log(prettyDOM(el, maxLength, options)),
-    unmount: () => wrapper.unmount(),
-    html: () => wrapper.html(),
-    emitted: () => wrapper.emitted(),
-    rerender: props => wrapper.setProps(props),
-    ...getQueriesForElement(baseElement),
-  }
-}
-
-function unwrapNode(node) {
-  node.replaceWith(...node.childNodes)
-}
-
-function cleanup() {
-  mountedWrappers.forEach(cleanupAtWrapper)
-}
-
-function cleanupAtWrapper(wrapper) {
-  if (
-    wrapper.element.parentNode &&
-    wrapper.element.parentNode.parentNode === document.body
-  ) {
-    document.body.removeChild(wrapper.element.parentNode)
-  }
-
-  wrapper.unmount()
-  mountedWrappers.delete(wrapper)
-}
-
-// Vue Testing Library's version of fireEvent will call DOM Testing Library's
-// version of fireEvent plus wait for one tick of the event loop to allow Vue
-// to asynchronously handle the event.
-// More info: https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
-async function fireEvent(...args) {
-  dtlFireEvent(...args)
-  await waitFor(() => {})
-}
-
-function suggestUpdateIfNecessary(eventValue, eventKey) {
-  const changeOrInputEventCalledDirectly =
-    eventValue && (eventKey === 'change' || eventKey === 'input')
-
-  if (changeOrInputEventCalledDirectly) {
-    console.warn(
-      `Using fireEvent.${eventKey}() may lead to unexpected results. Please use fireEvent.update() instead.`,
-    )
-  }
-}
-
-Object.keys(dtlFireEvent).forEach(key => {
-  fireEvent[key] = async (...args) => {
-    suggestUpdateIfNecessary(args[1], key)
-    dtlFireEvent[key](...args)
-    await waitFor(() => {})
-  }
-})
-
-fireEvent.touch = async elem => {
-  await fireEvent.focus(elem)
-  await fireEvent.blur(elem)
-}
-
-// Small utility to provide a better experience when working with v-model.
-// Related upstream issue: https://github.com/vuejs/vue-test-utils/issues/345#issuecomment-380588199
-// Examples: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/form.js
-fireEvent.update = (elem, value) => {
-  const tagName = elem.tagName
-  const type = elem.type
-
-  switch (tagName) {
-    case 'OPTION': {
-      elem.selected = true
-
-      const parentSelectElement =
-        elem.parentElement.tagName === 'OPTGROUP'
-          ? elem.parentElement.parentElement
-          : elem.parentElement
-
-      return fireEvent.change(parentSelectElement)
-    }
-
-    case 'INPUT': {
-      if (['checkbox', 'radio'].includes(type)) {
-        elem.checked = true
-        return fireEvent.change(elem)
-      } else if (type === 'file') {
-        return fireEvent.change(elem)
-      } else {
-        elem.value = value
-        return fireEvent.input(elem)
-      }
-    }
-
-    case 'TEXTAREA': {
-      elem.value = value
-      return fireEvent.input(elem)
-    }
-
-    case 'SELECT': {
-      elem.value = value
-      return fireEvent.change(elem)
-    }
-
-    default:
-    // do nothing
-  }
-
-  return null
-}
+import {cleanup} from './render'
 
 // If we're running in a test runner that supports afterEach then we'll
-// automatically run cleanup after each test. This ensures that tests run in
-// isolation from each other.
+// automatically run cleanup after each test.
+// This ensures that tests run in isolation from each other.
 // If you don't like this, set the VTL_SKIP_AUTO_CLEANUP variable to 'true'.
 if (typeof afterEach === 'function' && !process.env.VTL_SKIP_AUTO_CLEANUP) {
   afterEach(() => {
@@ -179,4 +11,5 @@ if (typeof afterEach === 'function' && !process.env.VTL_SKIP_AUTO_CLEANUP) {
 }
 
 export * from '@testing-library/dom'
-export {cleanup, render, fireEvent}
+export {cleanup, render} from './render'
+export {fireEvent} from './fire-event'
diff --git a/src/render.js b/src/render.js
new file mode 100644
index 00000000..e5c303d8
--- /dev/null
+++ b/src/render.js
@@ -0,0 +1,85 @@
+/* eslint-disable testing-library/no-wait-for-empty-callback */
+import {mount} from '@vue/test-utils'
+
+import {getQueriesForElement, prettyDOM} from '@testing-library/dom'
+
+const mountedWrappers = new Set()
+
+function render(
+  Component,
+  {
+    store = null,
+    routes = null,
+    container: customContainer,
+    baseElement: customBaseElement,
+    ...mountOptions
+  } = {},
+) {
+  const div = document.createElement('div')
+  const baseElement = customBaseElement || customContainer || document.body
+  const container = customContainer || baseElement.appendChild(div)
+
+  const plugins = mountOptions.global?.plugins || []
+
+  if (store) {
+    const {createStore} = require('vuex')
+    plugins.push(createStore(store))
+  }
+
+  if (routes) {
+    const requiredRouter = require('vue-router')
+    const {createRouter, createWebHistory} =
+      requiredRouter.default || requiredRouter
+
+    const routerPlugin = createRouter({history: createWebHistory(), routes})
+    plugins.push(routerPlugin)
+  }
+
+  const wrapper = mount(Component, {
+    ...mountOptions,
+    attachTo: container,
+    global: {...mountOptions.global, plugins},
+  })
+
+  // 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)
+
+  return {
+    container,
+    baseElement,
+    debug: (el = baseElement, maxLength, options) =>
+      Array.isArray(el)
+        ? el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
+        : console.log(prettyDOM(el, maxLength, options)),
+    unmount: () => wrapper.unmount(),
+    html: () => wrapper.html(),
+    emitted: () => wrapper.emitted(),
+    rerender: props => wrapper.setProps(props),
+    ...getQueriesForElement(baseElement),
+  }
+}
+
+function unwrapNode(node) {
+  node.replaceWith(...node.childNodes)
+}
+
+function cleanup() {
+  mountedWrappers.forEach(cleanupAtWrapper)
+}
+
+function cleanupAtWrapper(wrapper) {
+  if (
+    wrapper.element.parentNode &&
+    wrapper.element.parentNode.parentNode === document.body
+  ) {
+    document.body.removeChild(wrapper.element.parentNode)
+  }
+
+  wrapper.unmount()
+  mountedWrappers.delete(wrapper)
+}
+
+export {render, cleanup}

From dfc513f09dce8978a3c9e19f46f7db706b80dd6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Thu, 18 Feb 2021 16:36:33 +0100
Subject: [PATCH 18/39] chore: bump deps

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2ba64573..8bb61c7c 100644
--- a/package.json
+++ b/package.json
@@ -47,13 +47,13 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.12.13",
+    "@babel/runtime": "^7.12.17",
     "@testing-library/dom": "^7.29.4",
     "@vue/test-utils": "^2.0.0-rc.0"
   },
   "devDependencies": {
     "@apollo/client": "3.3.6",
-    "@babel/plugin-transform-runtime": "^7.12.15",
+    "@babel/plugin-transform-runtime": "^7.12.17",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/user-event": "^12.7.0",
     "@types/estree": "0.0.45",

From aa00f27045d59bfb7a37ee3d12f9adc963f2d11d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 22 Feb 2021 14:54:34 +0100
Subject: [PATCH 19/39] trigger ci


From 3c33dc3dbae2098ec25fb8a0e515a67042be69df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 23 Feb 2021 19:40:42 +0100
Subject: [PATCH 20/39] feat: Remove Router/Vuex for Vue 3 (#206)

* Remove handling of router/vuex

* Fix existing tests

* Mark types as deprecated

* Add simple vuex example

* Improve messaging

* Mark store as optional
---
 src/__tests__/components/Store/VuexTest.vue | 44 +++++++-------
 src/__tests__/deprecated-options.js         | 39 +++++++++++++
 src/__tests__/plugins.js                    | 49 ----------------
 src/__tests__/vue-router-mocha.js           | 14 -----
 src/__tests__/vue-router.js                 | 65 +++++++++++++++++----
 src/__tests__/vuex.js                       | 49 +++++++++++++---
 src/render.js                               | 19 ++----
 types/index.d.ts                            | 14 +++--
 types/test.ts                               |  6 +-
 9 files changed, 168 insertions(+), 131 deletions(-)
 create mode 100644 src/__tests__/deprecated-options.js
 delete mode 100644 src/__tests__/plugins.js
 delete mode 100644 src/__tests__/vue-router-mocha.js

diff --git a/src/__tests__/components/Store/VuexTest.vue b/src/__tests__/components/Store/VuexTest.vue
index 42a9b3d9..e11a014e 100644
--- a/src/__tests__/components/Store/VuexTest.vue
+++ b/src/__tests__/components/Store/VuexTest.vue
@@ -1,24 +1,20 @@
-<template>
-  <div>
-    <h2>Counter</h2>
-    <div>
-      <button data-testid="decrementer" @click="decrement">-</button>
-      <span data-testid="count-value">{{ count }}</span>
-      <button data-testid="incrementer" @click="increment">+</button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions, mapState } from 'vuex'
-
-export default {
-  computed: {
-    ...mapState(['count'])
-  },
-
-  methods: {
-    ...mapActions(['decrement', 'increment'])
-  }
-}
-</script>
+<template>
+  <h2>Counter</h2>
+  <button data-testid="decrementer" @click="decrement">-</button>
+  <span data-testid="count-value">{{ count }}</span>
+  <button data-testid="incrementer" @click="increment">+</button>
+</template>
+
+<script>
+import {mapActions, mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState(['count']),
+  },
+
+  methods: {
+    ...mapActions(['decrement', 'increment']),
+  },
+}
+</script>
diff --git a/src/__tests__/deprecated-options.js b/src/__tests__/deprecated-options.js
new file mode 100644
index 00000000..8e01026a
--- /dev/null
+++ b/src/__tests__/deprecated-options.js
@@ -0,0 +1,39 @@
+import {render} from '..'
+
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
+
+test('warns on deprecated store option', () => {
+  const Component = {template: `<div></div>`}
+
+  render(Component, {
+    store: 'anything',
+  })
+
+  expect(console.warn).toHaveBeenCalledTimes(1)
+  expect(console.warn).toHaveBeenCalledWith(
+    expect.stringContaining(
+      `Providing 'store' or 'routes' options is no longer available`,
+    ),
+  )
+})
+
+test('warns on deprecated routes option', () => {
+  const Component = {template: `<div></div>`}
+
+  render(Component, {
+    routes: 'anything',
+  })
+
+  expect(console.warn).toHaveBeenCalledTimes(1)
+  expect(console.warn).toHaveBeenCalledWith(
+    expect.stringContaining(
+      `Providing 'store' or 'routes' options is no longer available`,
+    ),
+  )
+})
diff --git a/src/__tests__/plugins.js b/src/__tests__/plugins.js
deleted file mode 100644
index def1b78e..00000000
--- a/src/__tests__/plugins.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import '@testing-library/jest-dom'
-import ElementPlus from 'element-plus'
-import userEvent from '@testing-library/user-event'
-import {defineComponent} from 'vue'
-import {render, screen, fireEvent, waitFor} from '..'
-import {store} from './components/Store/store'
-
-test('can set global options and custom options such as a store', async () => {
-  const ComponentWithStore = defineComponent({
-    template: `
-      <el-popover trigger="hover" content="this is content">
-        <template #reference>
-          <el-button @click="$store.dispatch('increment')">
-            Hover to activate
-          </el-button>
-        </template>
-      </el-popover>
-      <span data-testid="count-value">{{ $store.state.count }}</span>
-      <directive />
-    `,
-  })
-
-  const DirectiveStub = {
-    template: '<p>Search now</p>',
-  }
-
-  render(ComponentWithStore, {
-    store,
-    global: {
-      plugins: [ElementPlus],
-      stubs: {
-        Directive: DirectiveStub,
-      },
-    },
-  })
-
-  expect(screen.getByText('Search now')).toBeInTheDocument()
-
-  const button = screen.getByText('Hover to activate')
-  userEvent.hover(button)
-
-  await waitFor(() => expect(screen.getByText('this is content')).toBeVisible())
-
-  expect(screen.getByTestId('count-value')).toHaveTextContent('0')
-
-  await fireEvent.click(button)
-
-  expect(screen.getByTestId('count-value')).toHaveTextContent('1')
-})
diff --git a/src/__tests__/vue-router-mocha.js b/src/__tests__/vue-router-mocha.js
deleted file mode 100644
index c7263c78..00000000
--- a/src/__tests__/vue-router-mocha.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import '@testing-library/jest-dom'
-import {render} from '..'
-
-import About from './components/Router/About.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', () => 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 221175ab..66db0540 100644
--- a/src/__tests__/vue-router.js
+++ b/src/__tests__/vue-router.js
@@ -1,26 +1,38 @@
-// 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
+/* eslint-disable vue/require-prop-types */
+/* eslint-disable vue/one-component-per-file */
 
 import '@testing-library/jest-dom'
 import {waitFor} from '@testing-library/dom'
+import {defineComponent} from 'vue'
+import {createRouter, createWebHistory} from 'vue-router'
 import {render, fireEvent} from '..'
 import App from './components/Router/App.vue'
 import Home from './components/Router/Home.vue'
 import About from './components/Router/About.vue'
 
-const routes = [
-  {path: '/', component: Home},
-  {path: '/about', component: About},
-]
+test('full app rendering/navigating from base URL', async () => {
+  // Create a Router instance
+  // https://next.router.vuejs.org/api/#createrouter
+  // using a HTML5 history.
+  // https://next.router.vuejs.org/api/#createwebhistory
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+      {path: '/', component: Home},
+      {path: '/about', component: About},
+    ],
+  })
 
-test('full app rendering/navigating', async () => {
-  // Notice how we pass a `routes` object to our render function.
-  const {findByText, getByText, getByTestId} = render(App, {routes})
+  const {findByText, getByText, getByTestId} = render(App, {
+    global: {
+      plugins: [router],
+    },
+  })
 
   // Vue Router navigation is async, so we need to wait until the
   // initial render happens
   expect(await findByText('You are home')).toBeInTheDocument()
+  expect(getByTestId('location-display')).toHaveTextContent('/')
 
   await fireEvent.click(getByTestId('about-link'))
 
@@ -32,3 +44,36 @@ test('full app rendering/navigating', async () => {
 
   expect(getByText('You are on the about page')).toBeInTheDocument()
 })
+
+test('sets router initial state', async () => {
+  const Component = defineComponent({
+    props: ['to'],
+    template: `<router-link :to="to">Learn More</router-link>`,
+  })
+
+  const route = {
+    name: 'routeName',
+    path: '/',
+    component: defineComponent({template: `<div></div>`}),
+  }
+
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [route],
+  })
+
+  const to = {name: route.name}
+
+  const {getByText} = render(Component, {
+    props: {to},
+    global: {
+      plugins: [router],
+    },
+  })
+
+  // We need to wait for router to complete the initial navigation.
+  await router.isReady()
+
+  const button = getByText('Learn More')
+  expect(button).toHaveAttribute('href', route.path)
+})
diff --git a/src/__tests__/vuex.js b/src/__tests__/vuex.js
index 7873f5bf..d0faa53a 100644
--- a/src/__tests__/vuex.js
+++ b/src/__tests__/vuex.js
@@ -1,8 +1,30 @@
 import '@testing-library/jest-dom'
+import {createStore} from 'vuex'
 import {render, fireEvent} from '..'
 import VuexTest from './components/Store/VuexTest'
 import {store} from './components/Store/store'
 
+test('basic test with Vuex store', async () => {
+  const storeInstance = createStore(store)
+
+  const {getByTestId, getByText} = render(VuexTest, {
+    global: {
+      plugins: [storeInstance],
+    },
+  })
+
+  expect(getByTestId('count-value')).toHaveTextContent('0')
+
+  await fireEvent.click(getByText('+'))
+  expect(getByTestId('count-value')).toHaveTextContent('1')
+
+  await fireEvent.click(getByText('+'))
+  expect(getByTestId('count-value')).toHaveTextContent('2')
+
+  await fireEvent.click(getByText('-'))
+  expect(getByTestId('count-value')).toHaveTextContent('1')
+})
+
 // 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.
@@ -10,10 +32,15 @@ import {store} from './components/Store/store'
 // 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}})
+  // Create a custom store with the original one and the one coming as a
+  // parameter. This way we can alter some of its values.
+  const mergedStoreInstance = createStore({...store, ...customStore})
+
+  return render(VuexTest, {
+    global: {
+      plugins: [mergedStoreInstance],
+    },
+  })
 }
 
 test('can render with vuex with defaults', async () => {
@@ -26,7 +53,7 @@ test('can render with vuex with defaults', async () => {
 
 test('can render with vuex with custom initial state', async () => {
   const {getByTestId, getByText} = renderVuexTestComponent({
-    state: {count: 3},
+    state: () => ({count: 3}),
   })
 
   await fireEvent.click(getByText('-'))
@@ -37,17 +64,21 @@ test('can render with vuex with custom initial state', async () => {
 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},
+  const store = createStore({
+    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})
+  const {getByTestId, getByText} = render(VuexTest, {
+    global: {
+      plugins: [store],
+    },
+  })
 
   await fireEvent.click(getByText('+'))
   expect(getByTestId('count-value')).toHaveTextContent('1000')
diff --git a/src/render.js b/src/render.js
index e5c303d8..0171441e 100644
--- a/src/render.js
+++ b/src/render.js
@@ -19,26 +19,15 @@ function render(
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
-  const plugins = mountOptions.global?.plugins || []
-
-  if (store) {
-    const {createStore} = require('vuex')
-    plugins.push(createStore(store))
-  }
-
-  if (routes) {
-    const requiredRouter = require('vue-router')
-    const {createRouter, createWebHistory} =
-      requiredRouter.default || requiredRouter
-
-    const routerPlugin = createRouter({history: createWebHistory(), routes})
-    plugins.push(routerPlugin)
+  if (store || routes) {
+    console.warn(`Providing 'store' or 'routes' options is no longer available.
+You need to create a router/vuex instance and provide it through 'global.plugins'.
+Check out the test examples on GitHub for further details.`)
   }
 
   const wrapper = mount(Component, {
     ...mountOptions,
     attachTo: container,
-    global: {...mountOptions.global, plugins},
   })
 
   // this removes the additional "data-v-app" div node from VTU:
diff --git a/types/index.d.ts b/types/index.d.ts
index c886447a..f479111f 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -3,8 +3,6 @@
 
 import {EmitsOptions} from 'vue'
 import {MountingOptions} from '@vue/test-utils'
-import {StoreOptions} from 'vuex'
-import {RouteRecordRaw} from 'vue-router'
 import {queries, EventType, BoundFunctions} from '@testing-library/dom'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
@@ -32,9 +30,15 @@ type VueTestUtilsRenderOptions = Omit<
   MountingOptions<Record<string, any>>,
   'attachTo' | 'shallow' | 'propsData'
 >
-type VueTestingLibraryRenderOptions = {
-  store?: StoreOptions<{}>
-  routes?: RouteRecordRaw[]
+interface VueTestingLibraryRenderOptions {
+  /**
+   * @deprecated Add a Vuex instance through `global.plugins` array instead.
+   */
+  store?: any
+  /**
+   * @deprecated Add a Router instance through `global.plugins` array instead.
+   */
+  routes?: any
   container?: Element
   baseElement?: Element
 }
diff --git a/types/test.ts b/types/test.ts
index aeb5df89..06aea9c4 100644
--- a/types/test.ts
+++ b/types/test.ts
@@ -77,12 +77,8 @@ export function testOptions() {
     },
     global: {
       config: {isCustomElement: _ => true},
+      plugins: [],
     },
-    store: {
-      state: {count: 3},
-      strict: true,
-    },
-    routes: [{path: '/', component: () => SomeComponent, name: 'route name'}],
     baseElement: document.createElement('div'),
     container: document.createElement('div'),
   })

From ba812f77d44cb69e92a009ee2b42d332ba1b6aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Thu, 22 Apr 2021 13:35:16 +0200
Subject: [PATCH 21/39] chore(lint): disable unbound-method rule

---
 .eslintrc.js     | 1 +
 types/index.d.ts | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 4e9e131e..6f206c62 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
   rules: {
     'no-console': 'off',
     'import/no-unresolved': 'off',
+    'jest/unbound-method': 'off',
 
     'testing-library/no-dom-import': 'off',
     'testing-library/prefer-screen-queries': 'off',
diff --git a/types/index.d.ts b/types/index.d.ts
index f479111f..db8ece75 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -11,7 +11,7 @@ import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
 export * from '@testing-library/dom'
 
 type Debug = (
-  baseElement?: Element | DocumentFragment | Array<Element | DocumentFragment>,
+  baseElement?: Array<DocumentFragment | Element> | DocumentFragment | Element,
   maxLength?: number,
   options?: PrettyFormatOptions,
 ) => void
@@ -28,7 +28,7 @@ export interface RenderResult extends BoundFunctions<typeof queries> {
 
 type VueTestUtilsRenderOptions = Omit<
   MountingOptions<Record<string, any>>,
-  'attachTo' | 'shallow' | 'propsData'
+  'attachTo' | 'propsData' | 'shallow'
 >
 interface VueTestingLibraryRenderOptions {
   /**
@@ -42,7 +42,7 @@ interface VueTestingLibraryRenderOptions {
   container?: Element
   baseElement?: Element
 }
-type RenderOptions = VueTestUtilsRenderOptions & VueTestingLibraryRenderOptions
+type RenderOptions = VueTestingLibraryRenderOptions & VueTestUtilsRenderOptions
 
 export function render(
   TestComponent: any, // this makes me sad :sob:

From 9f20f590b513e54286ae4570d0f1c26c967a85b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 8 May 2021 19:32:32 +0200
Subject: [PATCH 22/39] chore: update deps and fix tests

---
 .eslintrc.js                  |  3 ++-
 package.json                  | 22 ++++++++++----------
 src/__tests__/auto-cleanup.js |  2 +-
 src/__tests__/element-plus.js | 10 ++++-----
 src/__tests__/fire-event.js   | 38 ++++++++++++++++++++++++-----------
 src/__tests__/within.js       |  2 +-
 6 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6f206c62..ecff3872 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,7 +6,7 @@ module.exports = {
     './node_modules/kcd-scripts/eslint.js',
     'plugin:vue/vue3-recommended',
     'plugin:testing-library/vue',
-    'prettier/vue',
+    'prettier',
   ],
   plugins: ['vue'],
   rules: {
@@ -18,5 +18,6 @@ module.exports = {
     'testing-library/prefer-screen-queries': 'off',
     'testing-library/no-manual-cleanup': 'off',
     'testing-library/no-await-sync-events': 'off',
+    'testing-library/prefer-user-event': 'off',
   },
 }
diff --git a/package.json b/package.json
index 8bb61c7c..01f8f723 100644
--- a/package.json
+++ b/package.json
@@ -47,16 +47,16 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.12.17",
-    "@testing-library/dom": "^7.29.4",
+    "@babel/runtime": "^7.14.0",
+    "@testing-library/dom": "^7.30.4",
     "@vue/test-utils": "^2.0.0-rc.0"
   },
   "devDependencies": {
-    "@apollo/client": "3.3.6",
+    "@apollo/client": "^3.3.16",
     "@babel/plugin-transform-runtime": "^7.12.17",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/user-event": "^12.7.0",
-    "@types/estree": "0.0.45",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/user-event": "^13.1.8",
+    "@types/estree": "0.0.47",
     "@vue/apollo-composable": "^4.0.0-alpha.12",
     "@vue/compiler-sfc": "^3.0.4",
     "apollo-boost": "^0.4.9",
@@ -65,20 +65,20 @@
     "element-plus": "^1.0.1-beta.27",
     "eslint-plugin-vue": "^7.5.0",
     "graphql": "^15.5.0",
-    "graphql-tag": "^2.11.0",
+    "graphql-tag": "^2.12.4",
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^7.6.0",
+    "kcd-scripts": "^10.0.0",
     "lodash.merge": "^4.6.2",
     "msw": "^0.21.3",
     "typescript": "^4.1.5",
-    "vee-validate": "^4.1.18",
+    "vee-validate": "^4.3.5",
     "vue": "^3.0.4",
     "vue-apollo": "^3.0.5",
-    "vue-i18n": "^9.0.0-rc.6",
+    "vue-i18n": "^9.1.6",
     "vue-jest": "^5.0.0-alpha.8",
     "vue-router": "^4.0.3",
-    "vuetify": "^2.4.4",
+    "vuetify": "^2.4.11",
     "vuex": "^4.0.0"
   },
   "peerDependencies": {
diff --git a/src/__tests__/auto-cleanup.js b/src/__tests__/auto-cleanup.js
index 805d4303..1f899a44 100644
--- a/src/__tests__/auto-cleanup.js
+++ b/src/__tests__/auto-cleanup.js
@@ -14,5 +14,5 @@ test('renders the component', () => {
 })
 
 test('cleans up after each test by default', () => {
-  expect(document.body.innerHTML).toMatchInlineSnapshot(`""`)
+  expect(document.body.innerHTML).toMatchInlineSnapshot(``)
 })
diff --git a/src/__tests__/element-plus.js b/src/__tests__/element-plus.js
index 0d1eb633..45bbca9b 100644
--- a/src/__tests__/element-plus.js
+++ b/src/__tests__/element-plus.js
@@ -6,9 +6,9 @@ import {render, screen, waitFor} from '..'
 
 const Component = defineComponent({
   template: `
-    <el-popover trigger="hover" content="this is content">
+    <el-popover trigger="click" content="this is content">
       <template #reference>
-        <el-button>Hover to activate</el-button>
+        <el-button>Click to activate</el-button>
       </template>
     </el-popover>
   `,
@@ -21,17 +21,17 @@ test('Stubs out a component', async () => {
     },
   })
 
-  const button = screen.getByText('Hover to activate')
+  const button = screen.getByRole('button')
   const getContent = () => screen.getByText('this is content')
 
   expect(getContent()).toBeInTheDocument()
   expect(getContent()).not.toBeVisible()
 
-  userEvent.hover(button)
+  userEvent.click(button)
 
   await waitFor(() => expect(getContent()).toBeVisible())
 
-  userEvent.unhover(button)
+  userEvent.click(button)
 
   await waitFor(() => expect(getContent()).not.toBeVisible())
 })
diff --git a/src/__tests__/fire-event.js b/src/__tests__/fire-event.js
index da21747a..e51d8ab7 100644
--- a/src/__tests__/fire-event.js
+++ b/src/__tests__/fire-event.js
@@ -5,7 +5,7 @@ import Button from './components/Button'
 const eventTypes = [
   {
     type: 'Clipboard',
-    events: ['copy', 'paste'],
+    events: ['copy', 'cut', 'paste'],
   },
   {
     type: 'Composition',
@@ -18,21 +18,17 @@ const eventTypes = [
   },
   {
     type: 'Focus',
-    events: ['focus', 'blur'],
-  },
-  {
-    type: 'Form',
-    events: ['focus', 'blur'],
-  },
-  {
-    type: 'Focus',
-    events: ['input', 'invalid'],
+    events: ['focus', 'blur', 'focusIn', 'focusOut'],
   },
   {
     type: 'Focus',
     events: ['submit'],
     elementType: 'form',
   },
+  {
+    type: 'Form',
+    events: ['change', 'input', 'invalid', 'submit', 'reset'],
+  },
   {
     type: 'Mouse',
     events: [
@@ -119,6 +115,22 @@ const eventTypes = [
     events: ['transitionEnd'],
     elementType: 'div',
   },
+  {
+    type: 'Pointer',
+    events: [
+      'pointerOver',
+      'pointerEnter',
+      'pointerDown',
+      'pointerMove',
+      'pointerUp',
+      'pointerCancel',
+      'pointerOut',
+      'pointerLeave',
+      'gotPointerCapture',
+      'lostPointerCapture',
+    ],
+    elementType: 'div',
+  },
 ]
 
 beforeEach(() => {
@@ -139,7 +151,9 @@ eventTypes.forEach(({type, events, elementType = 'input', init}) => {
       it(`triggers ${eventName}`, async () => {
         const testId = `${type}-${eventName}`
         const spy = jest.fn()
-        const eventNameHandler = `on${capitalize(eventName)}`
+        const eventNameHandler = `on${capitalize(
+          eventName.toLocaleLowerCase(),
+        )}`
 
         const componentWithEvent = {
           render() {
@@ -169,7 +183,7 @@ test('triggers dblclick on doubleClick', async () => {
 
   const componentWithDblClick = {
     render() {
-      return h('button', {onDblClick: spy}, 'Click me')
+      return h('button', {onDblclick: spy}, 'Click me')
     },
   }
 
diff --git a/src/__tests__/within.js b/src/__tests__/within.js
index 3a85664f..53f70bab 100644
--- a/src/__tests__/within.js
+++ b/src/__tests__/within.js
@@ -27,7 +27,7 @@ test('within() returns an object with all queries bound to the DOM node', () =>
   // Here, proof that there's only one match for the specified text.
   expect(divNode).toMatchInlineSnapshot(`
     <div
-      data-testid="div"
+      data-testid=div
     >
       repeated text
     </div>

From e6d3e02423db635341b15a0badddb8eccc9bb08a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 8 May 2021 19:37:02 +0200
Subject: [PATCH 23/39] chore: fix lint issues

---
 .eslintrc.js  |  2 ++
 types/test.ts | 16 ++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index ecff3872..acb83293 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,5 +19,7 @@ module.exports = {
     'testing-library/no-manual-cleanup': 'off',
     'testing-library/no-await-sync-events': 'off',
     'testing-library/prefer-user-event': 'off',
+    'testing-library/no-node-access': 'off',
+    'testing-library/await-fire-event': 'off',
   },
 }
diff --git a/types/test.ts b/types/test.ts
index 06aea9c4..a2459ba6 100644
--- a/types/test.ts
+++ b/types/test.ts
@@ -13,20 +13,20 @@ const SomeComponent = defineComponent({
 })
 
 export async function testRender() {
-  const page = render({template: '<div />'})
+  const utils = render({template: '<div />'})
 
   // single queries
-  page.getByText('foo')
-  page.queryByText('foo')
-  await page.findByText('foo')
+  utils.getByText('foo')
+  utils.queryByText('foo')
+  await utils.findByText('foo')
 
   // multiple queries
-  page.getAllByText('bar')
-  page.queryAllByText('bar')
-  await page.findAllByText('bar')
+  utils.getAllByText('bar')
+  utils.queryAllByText('bar')
+  await utils.findAllByText('bar')
 
   // helpers
-  const {container, baseElement, unmount, debug, rerender} = page
+  const {container, baseElement, unmount, debug, rerender} = utils
 
   // eslint-disable-next-line @typescript-eslint/no-floating-promises
   rerender({a: 1}) // $ExpectType Promise<void>

From c1d968c43875a1991ac4cb160c6f1beeeabb8f14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 8 May 2021 19:42:08 +0200
Subject: [PATCH 24/39] chore: update node version for validate workflow

---
 .github/workflows/validate.yml | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index 36e4130e..b564aaf9 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -17,14 +17,14 @@ jobs:
   main:
     strategy:
       matrix:
-        node: [10.13, 12, 14]
+        node: [10.13, 12, 14, 15, 16]
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v2
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
 
@@ -47,11 +47,14 @@ jobs:
       contains('refs/heads/master,refs/heads/beta,refs/heads/next,refs/heads/alpha',
       github.ref) && github.event_name == 'push' }}
     steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.0
+
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v2
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 14
 
@@ -78,4 +81,4 @@ jobs:
             ]
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
\ No newline at end of file
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

From 4ace583adcfb27e6985a0b8d973deb2397b29ef4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 8 May 2021 19:52:55 +0200
Subject: [PATCH 25/39] chore: fix workflow for node 15/16

---
 .github/workflows/validate.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index b564aaf9..d3a59a52 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -32,6 +32,9 @@ jobs:
         uses: bahmutov/npm-install@v1
         with:
           useLockFile: false
+          # Needed because @vue/apollo-composable requires @vue/composition-api
+          # which has a peerDep on Vue 2.
+          install-command: npm i --legacy-peer-deps
 
       - name: ▶️ Run validate script
         run: npm run validate

From cbedda072ad27091c6c5da843e1a5e6b0f26bd5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sat, 8 May 2021 19:56:57 +0200
Subject: [PATCH 26/39] fix: Fix incorrect type definition for emitted

---
 types/index.d.ts | 3 +--
 types/test.ts    | 5 +++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index db8ece75..10202fde 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,7 +1,6 @@
 // Minimum TypeScript Version: 4.0
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {EmitsOptions} from 'vue'
 import {MountingOptions} from '@vue/test-utils'
 import {queries, EventType, BoundFunctions} from '@testing-library/dom'
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -22,7 +21,7 @@ export interface RenderResult extends BoundFunctions<typeof queries> {
   debug: Debug
   unmount(): void
   html(): string
-  emitted(): EmitsOptions
+  emitted<T = unknown>(): Record<string, T[]>
   rerender(props: object): Promise<void>
 }
 
diff --git a/types/test.ts b/types/test.ts
index a2459ba6..5adf53a2 100644
--- a/types/test.ts
+++ b/types/test.ts
@@ -84,6 +84,11 @@ export function testOptions() {
   })
 }
 
+export function testEmitted() {
+  const {emitted} = render(SomeComponent)
+  emitted().foo // $ExpectType unknown[]
+}
+
 /*
 eslint
   testing-library/prefer-explicit-assert: "off",

From 6a279278a04cc77e70900477a10b052e585fe045 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Sun, 9 May 2021 07:17:34 +0200
Subject: [PATCH 27/39] fix(types): expose RenderOptions (#225)

---
 types/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index 10202fde..acefd282 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -41,7 +41,7 @@ interface VueTestingLibraryRenderOptions {
   container?: Element
   baseElement?: Element
 }
-type RenderOptions = VueTestingLibraryRenderOptions & VueTestUtilsRenderOptions
+export type RenderOptions = VueTestingLibraryRenderOptions & VueTestUtilsRenderOptions
 
 export function render(
   TestComponent: any, // this makes me sad :sob:

From fc90f61177572482e6e75f3a14cf836aa148fc4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 14 Jun 2021 17:07:13 +0200
Subject: [PATCH 28/39] chore: add editorconfig

---
 .editorconfig | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..53b061a8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
\ No newline at end of file

From 4b921298941c118e29839b3b5aa9f17e8f9be8bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 14 Jun 2021 17:08:04 +0200
Subject: [PATCH 29/39] chore(ci): remove unsuported node version

---
 .github/workflows/validate.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index d3a59a52..86c71921 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -17,7 +17,7 @@ jobs:
   main:
     strategy:
       matrix:
-        node: [10.13, 12, 14, 15, 16]
+        node: [12, 14, 16]
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo

From ed995e8603e4ee4cee83ab76dd44a0d21d16b92a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 15 Jun 2021 08:59:27 +0200
Subject: [PATCH 30/39] chore: bump deps

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

diff --git a/package.json b/package.json
index 01f8f723..953d0fcc 100644
--- a/package.json
+++ b/package.json
@@ -47,23 +47,23 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.14.0",
-    "@testing-library/dom": "^7.30.4",
+    "@babel/runtime": "^7.14.6",
+    "@testing-library/dom": "^7.31.2",
     "@vue/test-utils": "^2.0.0-rc.0"
   },
   "devDependencies": {
-    "@apollo/client": "^3.3.16",
-    "@babel/plugin-transform-runtime": "^7.12.17",
-    "@testing-library/jest-dom": "^5.12.0",
+    "@apollo/client": "^3.3.20",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/user-event": "^13.1.8",
-    "@types/estree": "0.0.47",
+    "@types/estree": "0.0.48",
     "@vue/apollo-composable": "^4.0.0-alpha.12",
-    "@vue/compiler-sfc": "^3.0.4",
+    "@vue/compiler-sfc": "^3.1.1",
     "apollo-boost": "^0.4.9",
     "axios": "^0.20.0",
-    "dtslint": "^4.0.7",
+    "dtslint": "^4.1.0",
     "element-plus": "^1.0.1-beta.27",
-    "eslint-plugin-vue": "^7.5.0",
+    "eslint-plugin-vue": "^7.11.1",
     "graphql": "^15.5.0",
     "graphql-tag": "^2.12.4",
     "isomorphic-unfetch": "^3.1.0",
@@ -78,7 +78,7 @@
     "vue-i18n": "^9.1.6",
     "vue-jest": "^5.0.0-alpha.8",
     "vue-router": "^4.0.3",
-    "vuetify": "^2.4.11",
+    "vuetify": "^2.5.3",
     "vuex": "^4.0.0"
   },
   "peerDependencies": {

From 631527d2371b71cbd5d08a990d070027e209096b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Tue, 15 Jun 2021 08:59:39 +0200
Subject: [PATCH 31/39] chore: fix element-plus test

---
 src/__tests__/element-plus.js | 26 ++++----------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/__tests__/element-plus.js b/src/__tests__/element-plus.js
index 45bbca9b..d5ce16b6 100644
--- a/src/__tests__/element-plus.js
+++ b/src/__tests__/element-plus.js
@@ -1,37 +1,19 @@
 import ElementPlus from 'element-plus'
 import {defineComponent} from 'vue'
-import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
-import {render, screen, waitFor} from '..'
+import {render, screen} from '..'
 
 const Component = defineComponent({
   template: `
-    <el-popover trigger="click" content="this is content">
-      <template #reference>
-        <el-button>Click to activate</el-button>
-      </template>
-    </el-popover>
-  `,
+    <el-alert title="success alert" type="success" />`,
 })
 
-test('Stubs out a component', async () => {
+test('Renders component from third-party library', async () => {
   render(Component, {
     global: {
       plugins: [ElementPlus],
     },
   })
 
-  const button = screen.getByRole('button')
-  const getContent = () => screen.getByText('this is content')
-
-  expect(getContent()).toBeInTheDocument()
-  expect(getContent()).not.toBeVisible()
-
-  userEvent.click(button)
-
-  await waitFor(() => expect(getContent()).toBeVisible())
-
-  userEvent.click(button)
-
-  await waitFor(() => expect(getContent()).not.toBeVisible())
+  expect(screen.getByRole('alert')).toHaveTextContent('success alert')
 })

From 6f1ffbc47dc7b2e2ead4053261dafd06b1c74895 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Wed, 28 Jul 2021 13:02:02 +0200
Subject: [PATCH 32/39] chore: update deps

---
 compatibility-scripts/vue-apollo-patch.js | 34 -----------------------
 package.json                              | 15 +++++-----
 src/__tests__/validate-plugin.js          |  6 ++--
 3 files changed, 11 insertions(+), 44 deletions(-)
 delete mode 100644 compatibility-scripts/vue-apollo-patch.js

diff --git a/compatibility-scripts/vue-apollo-patch.js b/compatibility-scripts/vue-apollo-patch.js
deleted file mode 100644
index e1702929..00000000
--- a/compatibility-scripts/vue-apollo-patch.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// This patch is run from post-install script and it is a temporary hack until a pending PR is merged
-// More details here:
-// https://github.com/vuejs/vue-apollo/issues/1011
-const fs = require('fs')
-const path = require('path')
-
-const useQueryPath = path.resolve(
-  __dirname,
-  '../node_modules/@vue/apollo-composable/dist/useQuery.js',
-)
-
-const vueApolloComposablePath = path.resolve(
-  __dirname,
-  '../node_modules/@vue/apollo-composable/dist/vue-apollo-composable.js',
-)
-
-fs.writeFileSync(
-  useQueryPath,
-  fs.readFileSync(useQueryPath, 'utf8').replace(/^onServerPrefetch, /mu, ''),
-)
-
-fs.writeFileSync(
-  useQueryPath,
-  fs
-    .readFileSync(useQueryPath, 'utf8')
-    .replace(/onServerPrefetch === null.*?\}\);/msu, ''),
-)
-
-fs.writeFileSync(
-  vueApolloComposablePath,
-  fs
-    .readFileSync(vueApolloComposablePath, 'utf8')
-    .replace(/vue_demi_5.onServerPrefetch === null.*?\}\);/msu, ''),
-)
diff --git a/package.json b/package.json
index 953d0fcc..307d448b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
     "format": "kcd-scripts format",
     "build": "kcd-scripts build",
     "lint": "kcd-scripts lint",
-    "pretest": "node compatibility-scripts/vue-apollo-patch.js",
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
@@ -47,23 +46,23 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.14.6",
+    "@babel/runtime": "^7.14.8",
     "@testing-library/dom": "^7.31.2",
-    "@vue/test-utils": "^2.0.0-rc.0"
+    "@vue/test-utils": "^2.0.0-rc.12"
   },
   "devDependencies": {
-    "@apollo/client": "^3.3.20",
+    "@apollo/client": "^3.3.21",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/user-event": "^13.1.8",
     "@types/estree": "0.0.48",
-    "@vue/apollo-composable": "^4.0.0-alpha.12",
+    "@vue/apollo-composable": "^4.0.0-alpha.14",
     "@vue/compiler-sfc": "^3.1.1",
     "apollo-boost": "^0.4.9",
     "axios": "^0.20.0",
     "dtslint": "^4.1.0",
-    "element-plus": "^1.0.1-beta.27",
-    "eslint-plugin-vue": "^7.11.1",
+    "element-plus": "^1.0.2-beta.64",
+    "eslint-plugin-vue": "^7.14.0",
     "graphql": "^15.5.0",
     "graphql-tag": "^2.12.4",
     "isomorphic-unfetch": "^3.1.0",
@@ -71,7 +70,7 @@
     "kcd-scripts": "^10.0.0",
     "lodash.merge": "^4.6.2",
     "msw": "^0.21.3",
-    "typescript": "^4.1.5",
+    "typescript": "^4.3.5",
     "vee-validate": "^4.3.5",
     "vue": "^3.0.4",
     "vue-apollo": "^3.0.5",
diff --git a/src/__tests__/validate-plugin.js b/src/__tests__/validate-plugin.js
index 16ed7fa9..d6e60a95 100644
--- a/src/__tests__/validate-plugin.js
+++ b/src/__tests__/validate-plugin.js
@@ -13,10 +13,12 @@ test('can validate using plugin', async () => {
 
   await fireEvent.touch(emailInput)
 
-  await findByText('This field is required')
+  expect(await findByText('This field is required')).toBeInTheDocument()
 
   await fireEvent.update(emailInput, 'an invalid email')
   await fireEvent.blur(emailInput)
 
-  await findByText('This field must be a valid email')
+  expect(
+    await findByText('This field must be a valid email'),
+  ).toBeInTheDocument()
 })

From 93317d9aa95f5ed7810ed82f65f2b0a6db6332cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 30 Jul 2021 16:43:18 +0200
Subject: [PATCH 33/39] chore(ci): Enable typecheck (#189)

* Enable typecheck

* Switch to tsd

* Remove unnecessary patch
---
 package.json                       |  3 +-
 types/{test.ts => index.test-d.ts} | 44 +++++++++++++++---------------
 2 files changed, 24 insertions(+), 23 deletions(-)
 rename types/{test.ts => index.test-d.ts} (61%)

diff --git a/package.json b/package.json
index 307d448b..f11ce61a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
+    "typecheck": "tsd",
     "setup": "npm install && npm run validate -s"
   },
   "engines": {
@@ -60,7 +61,6 @@
     "@vue/compiler-sfc": "^3.1.1",
     "apollo-boost": "^0.4.9",
     "axios": "^0.20.0",
-    "dtslint": "^4.1.0",
     "element-plus": "^1.0.2-beta.64",
     "eslint-plugin-vue": "^7.14.0",
     "graphql": "^15.5.0",
@@ -70,6 +70,7 @@
     "kcd-scripts": "^10.0.0",
     "lodash.merge": "^4.6.2",
     "msw": "^0.21.3",
+    "tsd": "^0.17.0",
     "typescript": "^4.3.5",
     "vee-validate": "^4.3.5",
     "vue": "^3.0.4",
diff --git a/types/test.ts b/types/index.test-d.ts
similarity index 61%
rename from types/test.ts
rename to types/index.test-d.ts
index 5adf53a2..8ec7e117 100644
--- a/types/test.ts
+++ b/types/index.test-d.ts
@@ -1,6 +1,6 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
+import {expectType} from 'tsd'
 import {defineComponent} from 'vue'
-import {render, fireEvent, screen, waitFor} from '@testing-library/vue'
+import {render, fireEvent, screen, waitFor} from '.'
 
 declare const elem: Element
 
@@ -16,29 +16,28 @@ export async function testRender() {
   const utils = render({template: '<div />'})
 
   // single queries
-  utils.getByText('foo')
-  utils.queryByText('foo')
-  await utils.findByText('foo')
+  expectType<HTMLElement>(utils.getByText('foo'))
+  expectType<HTMLElement | null>(utils.queryByText('foo'))
+  expectType<HTMLElement>(await utils.findByText('foo'))
 
   // multiple queries
-  utils.getAllByText('bar')
-  utils.queryAllByText('bar')
-  await utils.findAllByText('bar')
+  expectType<HTMLElement[]>(utils.getAllByText('bar'))
+  expectType<HTMLElement[]>(utils.queryAllByText('bar'))
+  expectType<HTMLElement[]>(await utils.findAllByText('bar'))
 
   // helpers
   const {container, baseElement, unmount, debug, rerender} = utils
 
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-  rerender({a: 1}) // $ExpectType Promise<void>
+  expectType<void>(await rerender({a: 1}))
 
-  debug() // $ExpectType void
-  debug(container) // $ExpectType void
-  debug([elem, elem], 100, {highlight: false}) // $ExpectType void
+  expectType<void>(debug())
+  expectType<void>(debug(container))
+  expectType<void>(debug([elem, elem], 100, {highlight: false}))
 
-  unmount() // $ExpectType void
+  expectType<void>(unmount())
 
-  container // $ExpectType Element
-  baseElement // $ExpectType Element
+  expectType<Element>(container)
+  expectType<Element>(baseElement)
 }
 
 export function testRenderOptions() {
@@ -50,20 +49,20 @@ export function testRenderOptions() {
 
 export async function testFireEvent() {
   const {container} = render({template: 'button'})
-  await fireEvent.click(container) // $ExpectType Promise<void>
-  await fireEvent.touch(elem) // $ExpectType Promise<void>
+  expectType<void>(await fireEvent.click(container))
+  expectType<void>(await fireEvent.touch(elem))
 }
 
 export async function testScreen() {
   render({template: 'button'})
 
-  await screen.findByRole('button') // $ExpectType Promise<HTMLElement>
+  expectType<HTMLElement>(await screen.findByRole('button'))
 }
 
 export async function testWaitFor() {
   const {container} = render({template: 'button'})
-  await fireEvent.update(container) // $ExpectType Promise<void>
-  await waitFor(() => {})
+  expectType<void>(await fireEvent.update(container))
+  expectType<void>(await waitFor(() => {}))
 }
 
 export function testOptions() {
@@ -86,7 +85,7 @@ export function testOptions() {
 
 export function testEmitted() {
   const {emitted} = render(SomeComponent)
-  emitted().foo // $ExpectType unknown[]
+  expectType<unknown[]>(emitted().foo)
 }
 
 /*
@@ -96,4 +95,5 @@ eslint
   testing-library/no-debug: "off",
   testing-library/prefer-screen-queries: "off",
   @typescript-eslint/unbound-method: "off",
+  @typescript-eslint/no-invalid-void-type: "off"
 */

From d704516f1b7b25e4925843ca7dcf62f26da1d940 Mon Sep 17 00:00:00 2001
From: Nick McCurdy <nick@nickmccurdy.com>
Date: Sun, 1 Aug 2021 12:21:25 -0400
Subject: [PATCH 34/39] feat: drop Node 10 support (#243)

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

diff --git a/package.json b/package.json
index f11ce61a..e7dca2c0 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "setup": "npm install && npm run validate -s"
   },
   "engines": {
-    "node": ">10.18"
+    "node": ">=12"
   },
   "files": [
     "types",

From 42c54e23136c390b0c14e4748fb9993dda70d969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Fri, 17 Sep 2021 18:27:33 +0200
Subject: [PATCH 35/39] chore: update deps and fix comment

---
 package.json      | 26 +++++++++++++-------------
 src/fire-event.js |  2 +-
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index e7dca2c0..5ca97099 100644
--- a/package.json
+++ b/package.json
@@ -47,23 +47,23 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.14.8",
-    "@testing-library/dom": "^7.31.2",
+    "@babel/runtime": "^7.15.4",
+    "@testing-library/dom": "^8.5.0",
     "@vue/test-utils": "^2.0.0-rc.12"
   },
   "devDependencies": {
-    "@apollo/client": "^3.3.21",
-    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@apollo/client": "^3.4.11",
+    "@babel/plugin-transform-runtime": "^7.15.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/user-event": "^13.1.8",
+    "@testing-library/user-event": "^13.2.1",
     "@types/estree": "0.0.48",
     "@vue/apollo-composable": "^4.0.0-alpha.14",
-    "@vue/compiler-sfc": "^3.1.1",
+    "@vue/compiler-sfc": "^3.2.12",
     "apollo-boost": "^0.4.9",
     "axios": "^0.20.0",
     "element-plus": "^1.0.2-beta.64",
-    "eslint-plugin-vue": "^7.14.0",
-    "graphql": "^15.5.0",
+    "eslint-plugin-vue": "^7.18.0",
+    "graphql": "^15.5.3",
     "graphql-tag": "^2.12.4",
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
@@ -71,14 +71,14 @@
     "lodash.merge": "^4.6.2",
     "msw": "^0.21.3",
     "tsd": "^0.17.0",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4.3",
     "vee-validate": "^4.3.5",
-    "vue": "^3.0.4",
+    "vue": "^3.2.12",
     "vue-apollo": "^3.0.5",
-    "vue-i18n": "^9.1.6",
-    "vue-jest": "^5.0.0-alpha.8",
+    "vue-i18n": "^9.1.7",
+    "vue-jest": "^5.0.0-alpha.10",
     "vue-router": "^4.0.3",
-    "vuetify": "^2.5.3",
+    "vuetify": "^2.5.8",
     "vuex": "^4.0.0"
   },
   "peerDependencies": {
diff --git a/src/fire-event.js b/src/fire-event.js
index 0c70d211..eca4438c 100644
--- a/src/fire-event.js
+++ b/src/fire-event.js
@@ -28,7 +28,7 @@ fireEvent.touch = async elem => {
 // fireEvent.update is a small utility to provide a better experience when
 // working with v-model.
 // Related upstream issue: https://github.com/vuejs/vue-test-utils/issues/345#issuecomment-380588199
-// Examples: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/form.js fireEvent.update = (elem, value) => {
+// See some examples in __tests__/form.js
 fireEvent.update = (elem, value) => {
   const tagName = elem.tagName
   const type = elem.type

From 03c53e146b85d221f908e75b14cef192aea35490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <adria.fontcuberta@holaluz.com>
Date: Wed, 5 Jan 2022 19:10:39 +0100
Subject: [PATCH 36/39] chore: update comment

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

diff --git a/src/render.js b/src/render.js
index 0171441e..b07b97cf 100644
--- a/src/render.js
+++ b/src/render.js
@@ -30,8 +30,8 @@ Check out the test examples on GitHub for further details.`)
     attachTo: container,
   })
 
-  // 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
+  // this removes the additional wrapping div node from VTU:
+  // https://github.com/vuejs/vue-test-utils-next/blob/master/src/mount.ts#L309
   unwrapNode(wrapper.parentElement)
 
   mountedWrappers.add(wrapper)

From 7f6c1c90c71ce339150af63a957fd1f7877c8a7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <adria.fontcuberta@holaluz.com>
Date: Wed, 5 Jan 2022 19:10:54 +0100
Subject: [PATCH 37/39] chore: bump deps

---
 package.json | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 5ca97099..7c98a8e9 100644
--- a/package.json
+++ b/package.json
@@ -35,10 +35,6 @@
     "vue.js testing",
     "vue",
     "vue testing",
-    "vue.js 2",
-    "vue.js 2 testing",
-    "vue 2",
-    "vue 2 testing",
     "vue.js 3",
     "vue.js 3 testing",
     "vue 3",
@@ -49,20 +45,20 @@
   "dependencies": {
     "@babel/runtime": "^7.15.4",
     "@testing-library/dom": "^8.5.0",
-    "@vue/test-utils": "^2.0.0-rc.12"
+    "@vue/test-utils": "^2.0.0-rc.18"
   },
   "devDependencies": {
     "@apollo/client": "^3.4.11",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/user-event": "^13.2.1",
-    "@types/estree": "0.0.48",
+    "@types/estree": "^0.0.50",
     "@vue/apollo-composable": "^4.0.0-alpha.14",
     "@vue/compiler-sfc": "^3.2.12",
     "apollo-boost": "^0.4.9",
     "axios": "^0.20.0",
-    "element-plus": "^1.0.2-beta.64",
-    "eslint-plugin-vue": "^7.18.0",
+    "element-plus": "^1.3.0-beta.1",
+    "eslint-plugin-vue": "^8.2.0",
     "graphql": "^15.5.3",
     "graphql-tag": "^2.12.4",
     "isomorphic-unfetch": "^3.1.0",
@@ -70,15 +66,15 @@
     "kcd-scripts": "^10.0.0",
     "lodash.merge": "^4.6.2",
     "msw": "^0.21.3",
-    "tsd": "^0.17.0",
+    "tsd": "^0.19.1",
     "typescript": "^4.4.3",
     "vee-validate": "^4.3.5",
     "vue": "^3.2.12",
     "vue-apollo": "^3.0.5",
-    "vue-i18n": "^9.1.7",
+    "vue-i18n": "^9.2.0-beta.26",
     "vue-jest": "^5.0.0-alpha.10",
     "vue-router": "^4.0.3",
-    "vuetify": "^2.5.8",
+    "vuetify": "^v3.0.0-alpha.12",
     "vuex": "^4.0.0"
   },
   "peerDependencies": {

From fb1a2904b1ffb6fc4ab8a4bf40a18ca5b38a8791 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <adria.fontcuberta@holaluz.com>
Date: Fri, 7 Jan 2022 08:35:52 +0100
Subject: [PATCH 38/39] docs: Signal TS minimum version

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index dade3ebb..77df43c0 100644
--- a/README.md
+++ b/README.md
@@ -171,6 +171,8 @@ light-weight, simple, and understandable.
 
 ## Typings
 
+_Please note that TypeScript 4.X is required._
+
 The TypeScript type definitions are in the [types][types-directory] directory.
 
 ## ESLint support

From ba14df2db77cdfb1f29cc972391afc86d80eca9c Mon Sep 17 00:00:00 2001
From: Brian Koehler <briandkoehler@gmail.com>
Date: Sun, 6 Feb 2022 15:11:11 -0500
Subject: [PATCH 39/39] fix: Add missing cleanup type (#264)

---
 types/index.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/types/index.d.ts b/types/index.d.ts
index acefd282..02c93699 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -9,6 +9,8 @@ import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
 // NOTE: fireEvent is overridden below
 export * from '@testing-library/dom'
 
+export function cleanup(): void
+
 type Debug = (
   baseElement?: Array<DocumentFragment | Element> | DocumentFragment | Element,
   maxLength?: number,