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/.eslintrc.js b/.eslintrc.js
index dbdbf706..acb83293 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,7 +4,8 @@ module.exports = {
   },
   extends: [
     './node_modules/kcd-scripts/eslint.js',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:testing-library/vue',
     'prettier',
   ],
   plugins: ['vue'],
@@ -17,8 +18,8 @@ module.exports = {
     'testing-library/prefer-screen-queries': 'off',
     'testing-library/no-manual-cleanup': 'off',
     'testing-library/no-await-sync-events': 'off',
-    'testing-library/await-fire-event': 'error',
     'testing-library/prefer-user-event': 'off',
     'testing-library/no-node-access': 'off',
+    'testing-library/await-fire-event': 'off',
   },
 }
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index fb224957..afb9a077 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
diff --git a/README.md b/README.md
index d37f3b78..ebbd41b7 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 />
 
@@ -15,11 +15,6 @@
 <p>Simple and complete Vue.js testing utilities that encourage good testing practices.</p>
 
 <p>Vue Testing Library is a lightweight adapter built on top of <a href="https://github.com/testing-library/dom-testing-library/">DOM Testing Library</a> and <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a>.</p>
-  
-  
-<br />
-  
-  <p>If you're looking for the Vue 3 version of Vue Testing Library, check out the <a href="https://github.com/testing-library/vue-testing-library/tree/next">next</a> branch.</p>
 
 <br />
 
@@ -66,30 +61,29 @@
 This module is distributed via `npm` and should be installed as one of your
 project's `devDependencies`:
 
-If using Vue 2
-```
-npm install --save-dev @testing-library/vue@5
-```
-
-If using Vue 3
 ```
 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 `@testing-library/jest-dom` so you can
-use [the custom Jest matchers][jest-dom].
+You may also be interested in installing `jest-dom` so you can use [the custom
+Jest matchers][jest-dom].
+
+If you're using Vue 2, please install version 5 of the library:
+
+```
+npm install --save-dev @testing-library/vue@^5
+```
+
 
 ## A basic example
 
 ```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>
@@ -133,9 +127,9 @@ test('increments value on click', async () => {
 })
 ```
 
-> You might want to install [`@testing-library/jest-dom`][jest-dom] to add handy
-> assertions such as `.toBeInTheDocument()`. In the example above, you could
-> write `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
+> You might want to install [`jest-dom`][jest-dom] to add handy assertions such
+> as `.toBeInTheDocument()`. In the example above, you could write
+> `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
 
 > Using `byText` queries it's not the only nor the best way to query for
 > elements. Read [Which query should I use?][which-query] to discover
@@ -258,8 +252,8 @@ instead of filing an issue on GitHub.
 [npm-badge]: https://badge.fury.io/js/%40testing-library%2Fvue.svg
 [npm]: https://badge.fury.io/js/%40testing-library%2Fvue
 [license-badge]: https://img.shields.io/github/license/testing-library/vue-testing-library.svg
-[license]: https://github.com/testing-library/vue-testing-library/blob/main/LICENSE
-[discord]: https://discord.gg/testing-library
+[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
 [jest-dom]: https://github.com/testing-library/jest-dom
 [which-query]: https://testing-library.com/docs/guide-which-query
@@ -274,11 +268,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/main/types
-[test-directory]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__
-[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuex.js
-[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vue-router.js
-[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/validate-plugin.js
-[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/translations-vue-i18n.js
-[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuetify.js
+[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__/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/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/jest.config.js b/jest.config.js
index 7e653009..9d901b60 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,19 +4,22 @@ const config = require('kcd-scripts/jest')
 module.exports = merge(config, {
   testEnvironment: 'jsdom',
   moduleFileExtensions: ['js', 'vue'],
-  moduleNameMapper: {
-    '@testing-library/vue': '<rootDir>/src/index.js',
-  },
   coverageDirectory: './coverage',
   collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-    '.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue2-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
   },
   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 d085611c..7c98a8e9 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,14 @@
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
-    "typecheck": "dtslint ./types/",
+    "typecheck": "tsd",
     "setup": "npm install && npm run validate -s"
   },
   "engines": {
-    "node": ">10.18"
+    "node": ">=12"
   },
   "files": [
-    "types/*.d.ts",
+    "types",
     "dist",
     "cleanup-after-each.js"
   ],
@@ -35,52 +35,51 @@
     "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",
+    "vue 3 testing"
   ],
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.12.5",
-    "@testing-library/dom": "^7.26.6",
-    "@vue/test-utils": "^1.1.0"
+    "@babel/runtime": "^7.15.4",
+    "@testing-library/dom": "^8.5.0",
+    "@vue/test-utils": "^2.0.0-rc.18"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/estree": "0.0.46",
-    "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "@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.50",
+    "@vue/apollo-composable": "^4.0.0-alpha.14",
+    "@vue/compiler-sfc": "^3.2.12",
     "apollo-boost": "^0.4.9",
-    "apollo-cache-inmemory": "^1.6.6",
-    "axios": "^0.21.1",
-    "dtslint": "^4.0.5",
-    "eslint": "^7.13.0",
-    "eslint-plugin-vue": "^7.6.0",
-    "graphql": "^15.3.0",
-    "graphql-tag": "^2.11.0",
-    "isomorphic-unfetch": "^3.0.0",
+    "axios": "^0.20.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",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^11.1.0",
+    "kcd-scripts": "^10.0.0",
     "lodash.merge": "^4.6.2",
-    "msw": "^0.35.0",
-    "portal-vue": "^2.1.7",
-    "semver": "^7.3.5",
-    "typescript": "^4.0.5",
-    "vee-validate": "^2.2.15",
-    "vue": "^2.6.12",
-    "vue-apollo": "^3.0.4",
-    "vue-i18n": "^8.21.1",
-    "vue-router": "^3.4.9",
-    "vue-template-compiler": "^2.6.12",
-    "vuetify": "^2.3.17",
-    "vuex": "^3.5.1"
+    "msw": "^0.21.3",
+    "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.2.0-beta.26",
+    "vue-jest": "^5.0.0-alpha.10",
+    "vue-router": "^4.0.3",
+    "vuetify": "^v3.0.0-alpha.12",
+    "vuex": "^4.0.0"
   },
   "peerDependencies": {
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "@vue/compiler-sfc": ">= 3",
+    "vue": ">= 3"
   },
   "husky": {
     "hooks": {
diff --git a/src/__tests__/about-vue-router-mocha.js b/src/__tests__/about-vue-router-mocha.js
deleted file mode 100644
index 1ed2673b..00000000
--- a/src/__tests__/about-vue-router-mocha.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
-import semver from 'semver'
-
-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', () => {
-    return undefined
-  })
-
-  expect(() => render(About, {routes})).toThrowError(
-    new TypeError(
-      semver.gte(process.version, '16.0.0')
-        ? "Cannot read properties of undefined (reading 'default')"
-        : "Cannot read property 'default' of undefined",
-    ),
-  )
-})
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 bd97f939..1f899a44 100644
--- a/src/__tests__/auto-cleanup.js
+++ b/src/__tests__/auto-cleanup.js
@@ -1,12 +1,11 @@
-import {render} from '@testing-library/vue'
+import {render} from '..'
 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__/button-simple.js b/src/__tests__/button-simple.js
index a63d91ea..29698a4a 100644
--- a/src/__tests__/button-simple.js
+++ b/src/__tests__/button-simple.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__/card-slots.js b/src/__tests__/card-slots.js
index 6641d270..6fc643d6 100644
--- a/src/__tests__/card-slots.js
+++ b/src/__tests__/card-slots.js
@@ -1,32 +1,17 @@
 import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
+import {render} from '..'
 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__/cleanup-throw.js b/src/__tests__/cleanup-throw.js
deleted file mode 100644
index b8ba9fd7..00000000
--- a/src/__tests__/cleanup-throw.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {render, cleanup} from '@testing-library/vue'
-import Vue 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 Vue.nextTick()
-  expect(cleanup).toThrow(err)
-
-  // unmute console
-  spy.mockReset()
-})
diff --git a/src/__tests__/collapsible-visibility.js b/src/__tests__/collapsible-visibility.js
index 0e9436a7..3cda56e4 100644
--- a/src/__tests__/collapsible-visibility.js
+++ b/src/__tests__/collapsible-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__/components/Button.vue b/src/__tests__/components/Button.vue
index 9adc0241..9c9aad3f 100644
--- a/src/__tests__/components/Button.vue
+++ b/src/__tests__/components/Button.vue
@@ -7,13 +7,14 @@ export default {
   props: {
     text: {
       type: String,
-      default: 'Button Text'
-    }
+      default: 'Button Text',
+    },
   },
+  emits: {click: null},
   methods: {
-    handleClick(e) {
+    handleClick(_e) {
       this.$emit('click')
-    }
-  }
+    },
+  },
 }
 </script>
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/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 db3593ff..c3ee7452 100644
--- a/src/__tests__/components/Form.vue
+++ b/src/__tests__/components/Form.vue
@@ -1,65 +1,51 @@
 <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" />
+  <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 for="director-input">Director of the movie</label>
-      <input id="director-input" v-model.lazy="director" name="director" />
+    <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 id="notes-textarea">Add some notes</label>
-      <textarea
-        v-model.lazy="notes"
-        name="notes-textarea"
-        placeholder="Add some notes"
-        aria-labelledby="notes-textarea"
-      />
+    <label id="recommend-label" for="recommend">
+      Would you recommend this movie?
+    </label>
+    <input
+      id="recommend"
+      v-model="recommend"
+      type="checkbox"
+      name="recommend"
+    />
 
-      <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" for="recommend">
-        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>
+    <button :disabled="submitDisabled" type="submit">Submit</button>
+  </form>
 </template>
 
 <script>
 export default {
+  emits: {submit: null},
   data() {
     return {
       title: '',
-      director: '',
       review: '',
-      notes: '',
       rating: '1',
       recommend: false,
     }
@@ -69,16 +55,12 @@ export default {
       return !this.title || !this.review
     },
   },
-
   methods: {
     submit() {
       if (this.submitDisabled) return
-
       this.$emit('submit', {
         title: this.title,
-        director: this.director,
         review: this.review,
-        notes: this.notes,
         rating: this.rating,
         recommend: this.recommend,
       })
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/NumberDisplay.vue b/src/__tests__/components/NumberDisplay.vue
index 397914e5..c36dbe1c 100644
--- a/src/__tests__/components/NumberDisplay.vue
+++ b/src/__tests__/components/NumberDisplay.vue
@@ -1,24 +1,22 @@
-<template>
-  <div>
-    <span data-testid="number-display">{{ number }}</span>
-    <span data-testid="instance-id">{{ id }}</span>
-  </div>
-</template>
-
-<script>
-let idCounter = 1
-
-export default {
-  props: {
-    number: {
-      type: Number,
-      required: true
-    }
-  },
-  data() {
-    return {
-      id: idCounter++
-    }
-  }
-}
-</script>
+<template>
+  <span data-testid="number-display">{{ number }}</span>
+  <span data-testid="instance-id">{{ id }}</span>
+</template>
+
+<script>
+let idCounter = 1
+
+export default {
+  props: {
+    number: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      id: idCounter++,
+    }
+  },
+}
+</script>
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__/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__/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/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__/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..46d92232 100644
--- a/src/__tests__/components/Stubs.vue
+++ b/src/__tests__/components/Stubs.vue
@@ -1,16 +1,14 @@
 <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/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/Translations.vue b/src/__tests__/components/Translations.vue
index 328ee70d..f431c86c 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: 'Translations',
-
-  methods: {
-    switchLocale(locale) {
-      this.$i18n.locale = locale
-    },
-  },
 }
 </script>
diff --git a/src/__tests__/components/Validate.vue b/src/__tests__/components/Validate.vue
index 6a4fe9df..2c5d76b9 100644
--- a/src/__tests__/components/Validate.vue
+++ b/src/__tests__/components/Validate.vue
@@ -1,36 +1,33 @@
 <template>
-  <form>
-    <label id="username-label" for="username">Username</label>
-
-    <input
-      v-model="username"
-      v-validate="'required|email'"
-      placeholder="Username..."
-      name="username"
-      aria-labelledby="username-label"
-    />
-
-    <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>
+  <Form>
+    <Field :rules="validateEmail" name="email" as="input" type="email" />
+    <ErrorMessage name="email" data-testid="error-message" />
+    <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__/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..91b0b590 100644
--- a/src/__tests__/components/VueApollo/queries.js
+++ b/src/__tests__/components/VueApollo/queries.js
@@ -1,17 +1,16 @@
-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
     }
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>
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__/directive.js b/src/__tests__/directive.js
index d4fe29c0..f003f0fc 100644
--- a/src/__tests__/directive.js
+++ b/src/__tests__/directive.js
@@ -1,16 +1,14 @@
-import {render} from '@testing-library/vue'
+import {render} from '..'
 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__/disappearance.js b/src/__tests__/disappearance.js
index 46bf2fd3..7129d565 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__/element-plus.js b/src/__tests__/element-plus.js
new file mode 100644
index 00000000..d5ce16b6
--- /dev/null
+++ b/src/__tests__/element-plus.js
@@ -0,0 +1,19 @@
+import ElementPlus from 'element-plus'
+import {defineComponent} from 'vue'
+import '@testing-library/jest-dom'
+import {render, screen} from '..'
+
+const Component = defineComponent({
+  template: `
+    <el-alert title="success alert" type="success" />`,
+})
+
+test('Renders component from third-party library', async () => {
+  render(Component, {
+    global: {
+      plugins: [ElementPlus],
+    },
+  })
+
+  expect(screen.getByRole('alert')).toHaveTextContent('success alert')
+})
diff --git a/src/__tests__/fetch-axios-mock.js b/src/__tests__/fetch-axios-mock.js
index 39e51bab..8daeb14a 100644
--- a/src/__tests__/fetch-axios-mock.js
+++ b/src/__tests__/fetch-axios-mock.js
@@ -1,14 +1,12 @@
 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 () => {
-  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__/button-fire-event.js b/src/__tests__/fire-event.js
similarity index 72%
rename from src/__tests__/button-fire-event.js
rename to src/__tests__/fire-event.js
index 2775227f..e51d8ab7 100644
--- a/src/__tests__/button-fire-event.js
+++ b/src/__tests__/fire-event.js
@@ -1,10 +1,11 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {h} from 'vue'
+import {render, fireEvent} from '..'
 import Button from './components/Button'
 
 const eventTypes = [
   {
     type: 'Clipboard',
-    events: ['copy', 'paste'],
+    events: ['copy', 'cut', 'paste'],
   },
   {
     type: 'Composition',
@@ -17,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: [
@@ -118,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(() => {
@@ -128,6 +141,8 @@ 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
 // when the associated fireEvent method is called.
 eventTypes.forEach(({type, events, elementType = 'input', init}) => {
@@ -136,21 +151,22 @@ eventTypes.forEach(({type, events, elementType = 'input', init}) => {
       it(`triggers ${eventName}`, async () => {
         const testId = `${type}-${eventName}`
         const spy = jest.fn()
+        const eventNameHandler = `on${capitalize(
+          eventName.toLocaleLowerCase(),
+        )}`
 
-        // 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)
 
@@ -165,13 +181,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')
 
@@ -189,49 +205,39 @@ test('calling `fireEvent` directly works too', async () => {
 
   expect(emitted()).toHaveProperty('click')
 })
-const typingEvents = ['input', 'change']
-typingEvents.forEach(event => {
-  test(`fireEvent.${event} prints a warning message to use fireEvent.update instead`, async () => {
-    const {getByTestId} = render({
-      template: `<input type="text" data-testid=test-${event}></input>`,
-    })
 
-    await fireEvent[event](getByTestId(`test-${event}`), 'hello')
+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(
-      expect.stringContaining(
-        `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('fireEvent.update does not trigger warning messages', async () => {
+  },
+)
+
+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></input>`,
+    template: `<input type="text" data-testid="test-update" />`,
   })
 
-  await fireEvent.update(getByTestId('test-update'), 'hello')
+  await fireEvent.input(getByTestId('test-update'), 'hello')
 
   expect(console.warn).not.toHaveBeenCalled()
 })
 
-test('fireEvent.update should not crash with input file', async () => {
+test('fireEvent.update does not trigger warning messages', async () => {
   const {getByTestId} = render({
-    template: `<input type="file" data-testid="test-update" />`,
+    template: `<input type="text" 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)
+  await fireEvent.update(getByTestId('test-update'), 'hello')
 
   expect(console.warn).not.toHaveBeenCalled()
 })
@@ -248,17 +254,23 @@ test('fireEvent.update does not crash if non-input element is passed in', async
       Hi
     </div>
   `)
+
   expect(console.warn).not.toHaveBeenCalled()
 })
 
-test('fireEvent change/input should not throw warning when env is set', async () => {
-  process.env.VTL_SKIP_WARN_EVENT_UPDATE = 'true'
+test('fireEvent.update handles input file', async () => {
   const {getByTestId} = render({
-    template: `<input type="text" data-testid=test-input></input>`,
+    template: `<input type="file" data-testid="test-update" />`,
   })
 
-  await fireEvent.input(getByTestId('test-input'), {target: {value: 'hello'}})
-  await fireEvent.change(getByTestId('test-input'), {target: {value: 'hello'}})
+  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 bea24490..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'
 
@@ -9,11 +9,10 @@ import Form from './components/Form'
 // https://testing-library.com/docs/guide-which-query
 test('Review form submits', async () => {
   jest.spyOn(console, 'warn').mockImplementation(() => {})
+
   const fakeReview = {
     title: 'An Awesome Movie',
-    director: 'Stephen Spielberg',
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    notes: 'Add something',
     rating: '3',
   }
 
@@ -33,15 +32,9 @@ test('Review form submits', async () => {
   const titleInput = getByLabelText(/title of the movie/i)
   await fireEvent.update(titleInput, fakeReview.title)
 
-  const directorInput = getByLabelText(/director of the movie/i)
-  await fireEvent.update(directorInput, fakeReview.director)
-
   const reviewTextarea = getByPlaceholderText('Write an awesome review')
   await fireEvent.update(reviewTextarea, fakeReview.review)
 
-  const notesTextarea = getByPlaceholderText('Add some notes')
-  await fireEvent.update(notesTextarea, fakeReview.notes)
-
   // Rating Radio buttons.
   const initiallySelectedInput = getByLabelText('Awful')
   const ratingSelect = getByLabelText('Wonderful')
diff --git a/src/__tests__/functional-sfc.js b/src/__tests__/functional-sfc.js
index b6850e55..323a6ff2 100644
--- a/src/__tests__/functional-sfc.js
+++ b/src/__tests__/functional-sfc.js
@@ -1,12 +1,13 @@
-import {render} from '@testing-library/vue'
+import {h} from 'vue'
+import {render} from '..'
 import '@testing-library/jest-dom'
-import FunctionalSFC from './components/FunctionalSFC'
 
-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__/hello-world-debug.js b/src/__tests__/hello-world-debug.js
index c17d4cd2..554feb04 100644
--- a/src/__tests__/hello-world-debug.js
+++ b/src/__tests__/hello-world-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__/number-display-update-props.js b/src/__tests__/number-display-update-props.js
deleted file mode 100644
index 737d1af8..00000000
--- a/src/__tests__/number-display-update-props.js
+++ /dev/null
@@ -1,25 +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')
-
-  await updateProps({number: 3})
-  expect(getByTestId('number-display')).toHaveTextContent('3')
-
-  // 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__/render.js b/src/__tests__/render.js
index ad0f0d88..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', () => {
@@ -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__/rerender.js b/src/__tests__/rerender.js
new file mode 100644
index 00000000..490635fc
--- /dev/null
+++ b/src/__tests__/rerender.js
@@ -0,0 +1,52 @@
+import '@testing-library/jest-dom'
+import {defineComponent, h, computed} from 'vue'
+import {render} from '..'
+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('rerender re-renders the element', async () => {
+  const {rerender, getByTestId} = render(NumberDisplay, {
+    props: {number: 1},
+  })
+
+  expect(getByTestId('number-display')).toHaveTextContent('1')
+
+  await rerender({number: 3})
+  expect(getByTestId('number-display')).toHaveTextContent('3')
+
+  await rerender({number: 5})
+  expect(getByTestId('number-display')).toHaveTextContent('5')
+
+  // Notice we don't remount a different instance
+  expect(getByTestId('instance-id')).toHaveTextContent('1')
+})
+
+test('rerender 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 {rerender, getByTestId} = render(Component)
+
+  const getContent = () => getByTestId('node')
+
+  expect(getContent()).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
+
+  await rerender({foo: 'qux'})
+
+  expect(getContent()).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
+})
diff --git a/src/__tests__/select-user-event.js b/src/__tests__/select-user-event.js
deleted file mode 100644
index 3bc9fe60..00000000
--- a/src/__tests__/select-user-event.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-enable testing-library/prefer-user-event */
-import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import Select from './components/Select'
-
-beforeEach(() => {
-  jest.spyOn(console, 'warn').mockImplementation(() => {})
-})
-
-afterEach(() => {
-  console.warn.mockRestore()
-})
-
-test('selecting option with user events', () => {
-  const {getByDisplayValue} = render(Select)
-  const select = getByDisplayValue('Tyrannosaurus')
-  expect(select.value).toBe('dino1')
-
-  userEvent.selectOptions(select, 'dino2')
-  expect(select.value).toBe('dino2')
-
-  userEvent.selectOptions(select, 'dino3')
-  expect(select.value).not.toBe('dino2')
-  expect(select.value).toBe('dino3')
-})
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__/stopwatch.js b/src/__tests__/stopwatch.js
index 26fa0fbf..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 =>
@@ -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..38d8ddbd 100644
--- a/src/__tests__/stubs.js
+++ b/src/__tests__/stubs.js
@@ -1,10 +1,20 @@
-import {render} from '@testing-library/vue'
+import {render} from '..'
 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__/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__/translations-vue-i18n.js b/src/__tests__/translations-vue-i18n.js
index 381a2736..4dd1d2bd 100644
--- a/src/__tests__/translations-vue-i18n.js
+++ b/src/__tests__/translations-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 {render, fireEvent} from '..'
 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__/form-user-event.js b/src/__tests__/user-event.js
similarity index 71%
rename from src/__tests__/form-user-event.js
rename to src/__tests__/user-event.js
index fd461604..4db8c3e6 100644
--- a/src/__tests__/form-user-event.js
+++ b/src/__tests__/user-event.js
@@ -1,8 +1,8 @@
-/* eslint-enable testing-library/prefer-user-event */
 import '@testing-library/jest-dom'
-import {render, waitFor} 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'
 
 beforeEach(() => {
   jest.spyOn(console, 'warn').mockImplementation(() => {})
@@ -25,16 +25,16 @@ test('User events in a form', async () => {
 
   const titleInput = getByLabelText(/title of the movie/i)
   userEvent.type(titleInput, fakeReview.title)
-  expect(titleInput.value).toEqual(fakeReview.title)
+  expect(titleInput).toHaveValue(fakeReview.title)
 
   const textArea = getByLabelText(/Your review/i)
   userEvent.type(textArea, 'The t-rex went insane!')
-  expect(textArea.value).toEqual('The t-rex went insane!')
+  expect(textArea).toHaveValue('The t-rex went insane!')
 
   userEvent.clear(textArea)
-  expect(textArea.value).toEqual('')
+  expect(textArea).toHaveValue('')
   userEvent.type(textArea, fakeReview.review)
-  expect(textArea.value).toEqual(fakeReview.review)
+  expect(textArea).toHaveValue(fakeReview.review)
 
   const initialSelectedRating = getByLabelText(/Awful/i)
   const wonderfulRadioInput = getByLabelText(/Wonderful/i)
@@ -57,3 +57,16 @@ test('User events in a form', async () => {
 
   expect(console.warn).not.toHaveBeenCalled()
 })
+
+test('selecting option with user events', () => {
+  const {getByDisplayValue} = render(Select)
+  const select = getByDisplayValue('Tyrannosaurus')
+  expect(select).toHaveValue('dino1')
+
+  userEvent.selectOptions(select, 'dino2')
+  expect(select).toHaveValue('dino2')
+
+  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 5ebdf409..d6e60a95 100644
--- a/src/__tests__/validate-plugin.js
+++ b/src/__tests__/validate-plugin.js
@@ -1,29 +1,24 @@
-// 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 {render, fireEvent} from '..'
+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, queryByTestId} = render(VeeValidate)
 
   // Assert error messages are not in the DOM when rendering the component.
-  expect(queryByTestId('username-errors')).not.toBeInTheDocument()
+  expect(queryByTestId('error-message')).not.toBeInTheDocument()
 
-  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)
+
+  expect(await findByText('This field is required')).toBeInTheDocument()
+
+  await fireEvent.update(emailInput, 'an invalid email')
+  await fireEvent.blur(emailInput)
+
+  expect(
+    await findByText('This field must be a valid email'),
+  ).toBeInTheDocument()
 })
diff --git a/src/__tests__/vue-apollo.js b/src/__tests__/vue-apollo.js
index b9f4bdd0..6d29c517 100644
--- a/src/__tests__/vue-apollo.js
+++ b/src/__tests__/vue-apollo.js
@@ -1,43 +1,57 @@
 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 {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 provides a MockProvider for Vue,
+// 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
+// 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
 
       return res(
         ctx.data({
-          updateUser: {id: variables.input.id, email: variables.input.email},
+          updateUser: {
+            id: variables.input.id,
+            email: variables.input.email,
+            __typename: 'User',
+          },
         }),
       )
     }),
-    graphql.query('User', (req, res, ctx) => {
-      return res(ctx.data({user: {id: '1', email: 'alice@example.com'}}))
-    }),
   ],
 )
 
@@ -46,12 +60,18 @@ afterEach(() => server.resetHandlers())
 afterAll(() => server.close())
 
 test('mocking queries and mutations', async () => {
-  render(Component, {props: {id: '1'}}, localVue => {
-    localVue.use(VueApollo)
+  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,
diff --git a/src/__tests__/vue-portal.js b/src/__tests__/vue-portal.js
deleted file mode 100644
index 2e3b3eea..00000000
--- a/src/__tests__/vue-portal.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import {render, waitFor} from '@testing-library/vue'
-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>`,
-}
-
-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.',
-  )
-})
diff --git a/src/__tests__/vue-router.js b/src/__tests__/vue-router.js
index abbd1b27..66db0540 100644
--- a/src/__tests__/vue-router.js
+++ b/src/__tests__/vue-router.js
@@ -1,47 +1,79 @@
-import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
-import VueRouter from 'vue-router'
+/* 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},
-  {path: '*', redirect: '/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 {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'))
 
-  expect(getByTestId('location-display')).toHaveTextContent('/about')
+  // 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()
 })
 
-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 {getByTestId} = render(App, {routes}, (vue, store, router) => {
-    router.push('/about')
+test('sets router initial state', async () => {
+  const Component = defineComponent({
+    props: ['to'],
+    template: `<router-link :to="to">Learn More</router-link>`,
   })
 
-  expect(getByTestId('location-display')).toHaveTextContent('/about')
-})
+  const route = {
+    name: 'routeName',
+    path: '/',
+    component: defineComponent({template: `<div></div>`}),
+  }
 
-test('can render with an instantiated Vuex store', async () => {
-  // Instantiate a router with only one route
-  const instantiatedRouter = new VueRouter({
-    routes: [{path: '/special-path', component: Home}],
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [route],
   })
 
-  render(App, {routes: instantiatedRouter}, (vue, store, router) => {
-    expect(router.getRoutes()).toHaveLength(1)
-    expect(router.getRoutes()[0].path).toEqual('/special-path')
+  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__/vuetify.js b/src/__tests__/vuetify.js
index 1f5c234f..a933e8ef 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 '..'
+// 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 c41008bf..d0faa53a 100644
--- a/src/__tests__/vuex.js
+++ b/src/__tests__/vuex.js
@@ -1,11 +1,30 @@
 import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
-import Vue from 'vue'
-import Vuex from 'vuex'
-
+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.
@@ -13,14 +32,20 @@ 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 () => {
   const {getByTestId, getByText} = renderVuexTestComponent()
+
   await fireEvent.click(getByText('+'))
 
   expect(getByTestId('count-value')).toHaveTextContent('1')
@@ -28,8 +53,9 @@ 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('-'))
 
   expect(getByTestId('count-value')).toHaveTextContent('2')
@@ -38,57 +64,25 @@ 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 method, because there's no
-  // need to do that.
-  const {getByTestId, getByText} = render(VuexTest, {store})
-
-  await fireEvent.click(getByText('+'))
-  expect(getByTestId('count-value')).toHaveTextContent('1000')
-
-  await fireEvent.click(getByText('-'))
-  expect(getByTestId('count-value')).toHaveTextContent('1000')
-})
-
-test('can render with an instantiated Vuex store', async () => {
-  // Before calling new Vuex.Store in your code, you'll need to `.use` it on the
-  // global (or local) Vue instance. In frameworks like Jest, the `setupFilesAfterEnv`
-  // property is a good place to do this.
-  // https://jestjs.io/docs/configuration#setupfilesafterenv-array
-  Vue.use(Vuex)
+  })
 
+  // 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: new Vuex.Store({
-      state: {count: 3},
-      mutations: {
-        increment(state) {
-          state.count++
-        },
-        decrement(state) {
-          state.count--
-        },
-      },
-      actions: {
-        increment(context) {
-          context.commit('increment')
-        },
-        decrement(context) {
-          context.commit('decrement')
-        },
-      },
-    }),
+    global: {
+      plugins: [store],
+    },
   })
 
   await fireEvent.click(getByText('+'))
-  expect(getByTestId('count-value')).toHaveTextContent('4')
+  expect(getByTestId('count-value')).toHaveTextContent('1000')
 
   await fireEvent.click(getByText('-'))
-  expect(getByTestId('count-value')).toHaveTextContent('3')
+  expect(getByTestId('count-value')).toHaveTextContent('1000')
 })
diff --git a/src/__tests__/within.js b/src/__tests__/within.js
index 23780f96..53f70bab 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/fire-event.js b/src/fire-event.js
index 62497c34..eca4438c 100644
--- a/src/fire-event.js
+++ b/src/fire-event.js
@@ -1,4 +1,4 @@
-/* eslint-disable testing-library/no-wait-for-empty-callback, testing-library/await-fire-event */
+/* 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
@@ -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/main/src/__tests__/form.js
+// See some examples in __tests__/form.js
 fireEvent.update = (elem, value) => {
   const tagName = elem.tagName
   const type = elem.type
@@ -53,18 +53,12 @@ fireEvent.update = (elem, value) => {
         return fireEvent.change(elem)
       } else {
         elem.value = value
-        if (elem._vModifiers?.lazy) {
-          return fireEvent.change(elem)
-        }
         return fireEvent.input(elem)
       }
     }
 
     case 'TEXTAREA': {
       elem.value = value
-      if (elem._vModifiers?.lazy) {
-        return fireEvent.change(elem)
-      }
       return fireEvent.input(elem)
     }
 
diff --git a/src/render.js b/src/render.js
index ec2b6db2..b07b97cf 100644
--- a/src/render.js
+++ b/src/render.js
@@ -1,4 +1,5 @@
-import {createLocalVue, mount} from '@vue/test-utils'
+/* eslint-disable testing-library/no-wait-for-empty-callback */
+import {mount} from '@vue/test-utils'
 
 import {getQueriesForElement, prettyDOM} from '@testing-library/dom'
 
@@ -13,72 +14,47 @@ function render(
     baseElement: customBaseElement,
     ...mountOptions
   } = {},
-  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)
-
-  const localVue = createLocalVue()
-  let vuexStore = null
-  let router = null
-  let callbackOptions = {}
-
-  if (store) {
-    const Vuex = require('vuex')
-    localVue.use(Vuex)
-
-    vuexStore = store instanceof Vuex.Store ? store : new Vuex.Store(store)
-  }
-
-  if (routes) {
-    const requiredRouter = require('vue-router')
-    const VueRouter = requiredRouter.default || requiredRouter
-    localVue.use(VueRouter)
-
-    router = routes instanceof VueRouter ? routes : new VueRouter({routes})
-  }
-
-  if (configurationCb && typeof configurationCb === 'function') {
-    callbackOptions = configurationCb(localVue, vuexStore, router)
-  }
-
-  if (!mountOptions.propsData && !!mountOptions.props) {
-    mountOptions.propsData = mountOptions.props
-    delete mountOptions.props
+  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, {
-    attachTo,
-    localVue,
-    router,
-    store: vuexStore,
     ...mountOptions,
-    ...callbackOptions,
+    attachTo: container,
   })
 
+  // 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)
-  container.appendChild(wrapper.element)
 
   return {
     container,
     baseElement,
-    debug: (el = baseElement, ...args) =>
+    debug: (el = baseElement, maxLength, options) =>
       Array.isArray(el)
-        ? el.forEach(e => console.log(prettyDOM(e, ...args)))
-        : console.log(prettyDOM(el, ...args)),
-    unmount: () => wrapper.destroy(),
-    isUnmounted: () => wrapper.vm._isDestroyed,
+        ? el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
+        : console.log(prettyDOM(el, maxLength, options)),
+    unmount: () => wrapper.unmount(),
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
-    updateProps: _ => wrapper.setProps(_),
+    rerender: props => wrapper.setProps(props),
     ...getQueriesForElement(baseElement),
   }
 }
 
+function unwrapNode(node) {
+  node.replaceWith(...node.childNodes)
+}
+
 function cleanup() {
   mountedWrappers.forEach(cleanupAtWrapper)
 }
@@ -91,11 +67,8 @@ function cleanupAtWrapper(wrapper) {
     document.body.removeChild(wrapper.element.parentNode)
   }
 
-  try {
-    wrapper.destroy()
-  } finally {
-    mountedWrappers.delete(wrapper)
-  }
+  wrapper.unmount()
+  mountedWrappers.delete(wrapper)
 }
 
-export {cleanup, render}
+export {render, cleanup}
diff --git a/types/index.d.ts b/types/index.d.ts
index 28bc4382..b6037f31 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,72 +1,54 @@
-// TypeScript Version: 4.0
+// Minimum TypeScript Version: 4.0
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
-import Vue, {ComponentOptions} from 'vue'
-import {ThisTypedMountOptions, VueClass} from '@vue/test-utils'
+import {MountingOptions} from '@vue/test-utils'
+import {queries, EventType, BoundFunctions} from '@testing-library/dom'
 // eslint-disable-next-line import/no-extraneous-dependencies
-import {
-  queries,
-  EventType,
-  BoundFunctions,
-  prettyFormat,
-} from '@testing-library/dom'
+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,
+  options?: PrettyFormatOptions,
+) => void
+
 export interface RenderResult extends BoundFunctions<typeof queries> {
   container: Element
   baseElement: Element
-  debug: (
-    baseElement?:
-      | Element
-      | DocumentFragment
-      | Array<Element | DocumentFragment>,
-    maxLength?: number,
-    options?: prettyFormat.OptionsReceived,
-  ) => void
+  debug: Debug
   unmount(): void
-  isUnmounted(): boolean
   html(): string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  emitted(): {[name: string]: any[][]}
-  updateProps(props: object): Promise<void>
+  emitted<T = unknown>(): Record<string, T[]>
+  rerender(props: object): Promise<void>
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Store = any
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Routes = any
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Router = any
-
-export interface RenderOptions<V extends Vue, S = Store>
-  // The props and store options special-cased by Vue Testing Library and NOT passed to mount().
-  extends Omit<ThisTypedMountOptions<V>, 'store' | 'props'> {
-  props?: object
-  store?: S
-  routes?: Routes
+type VueTestUtilsRenderOptions = Omit<
+  MountingOptions<Record<string, any>>,
+  'attachTo' | 'propsData' | 'shallow'
+>
+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
 }
+export type RenderOptions = VueTestingLibraryRenderOptions &
+  VueTestUtilsRenderOptions
 
-export type ConfigurationCallback<V extends Vue> =
-  | ((
-      localVue: typeof Vue,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      store: Store,
-      router: Router,
-    ) => Partial<ThisTypedMountOptions<V>>)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  | ((localVue: typeof Vue, store: Store, router: Router) => void)
-
-export function render<V extends Vue, S = Store>(
-  TestComponent: VueClass<V> | ComponentOptions<V>,
-  // eslint-disable-next-line @typescript-eslint/ban-tslint-comment
-  // tslint:disable-next-line no-unnecessary-generics
-  options?: RenderOptions<V, S>,
-  configure?: ConfigurationCallback<V>,
+export function render(
+  TestComponent: any, // this makes me sad :sob:
+  options?: RenderOptions,
 ): RenderResult
 
 export type AsyncFireObject = {
diff --git a/types/index.test-d.ts b/types/index.test-d.ts
new file mode 100644
index 00000000..8ec7e117
--- /dev/null
+++ b/types/index.test-d.ts
@@ -0,0 +1,99 @@
+import {expectType} from 'tsd'
+import {defineComponent} from 'vue'
+import {render, fireEvent, screen, waitFor} from '.'
+
+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 utils = render({template: '<div />'})
+
+  // single queries
+  expectType<HTMLElement>(utils.getByText('foo'))
+  expectType<HTMLElement | null>(utils.queryByText('foo'))
+  expectType<HTMLElement>(await utils.findByText('foo'))
+
+  // multiple queries
+  expectType<HTMLElement[]>(utils.getAllByText('bar'))
+  expectType<HTMLElement[]>(utils.queryAllByText('bar'))
+  expectType<HTMLElement[]>(await utils.findAllByText('bar'))
+
+  // helpers
+  const {container, baseElement, unmount, debug, rerender} = utils
+
+  expectType<void>(await rerender({a: 1}))
+
+  expectType<void>(debug())
+  expectType<void>(debug(container))
+  expectType<void>(debug([elem, elem], 100, {highlight: false}))
+
+  expectType<void>(unmount())
+
+  expectType<Element>(container)
+  expectType<Element>(baseElement)
+}
+
+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'})
+  expectType<void>(await fireEvent.click(container))
+  expectType<void>(await fireEvent.touch(elem))
+}
+
+export async function testScreen() {
+  render({template: 'button'})
+
+  expectType<HTMLElement>(await screen.findByRole('button'))
+}
+
+export async function testWaitFor() {
+  const {container} = render({template: 'button'})
+  expectType<void>(await fireEvent.update(container))
+  expectType<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},
+      plugins: [],
+    },
+    baseElement: document.createElement('div'),
+    container: document.createElement('div'),
+  })
+}
+
+export function testEmitted() {
+  const {emitted} = render(SomeComponent)
+  expectType<unknown[]>(emitted().foo)
+}
+
+/*
+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",
+  @typescript-eslint/no-invalid-void-type: "off"
+*/
diff --git a/types/test.ts b/types/test.ts
deleted file mode 100644
index f749e4c7..00000000
--- a/types/test.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import VueRouter from 'vue-router'
-import {render, fireEvent, screen, waitFor} from '@testing-library/vue'
-
-declare const elem: Element
-
-const SomeComponent = Vue.extend({
-  name: 'SomeComponent',
-  props: {
-    foo: {type: Number, default: 0},
-    bar: {type: String, default: '0'},
-  },
-})
-
-export async function testRender() {
-  const {
-    getByText,
-    queryByText,
-    findByText,
-    getAllByText,
-    queryAllByText,
-    findAllByText,
-    container,
-    unmount,
-    debug,
-  } = render({template: '<div />'})
-
-  // single queries
-  getByText('foo')
-  queryByText('foo')
-  await findByText('foo')
-
-  // multiple queries
-  getAllByText('bar')
-  queryAllByText('bar')
-  await findAllByText('bar')
-
-  debug(container)
-
-  debug(elem) // $ExpectType void
-  debug([elem, elem], 100, {highlight: false}) // $ExpectType void
-
-  unmount()
-}
-
-export function testRenderOptions() {
-  const container = document.createElement('div')
-  const options = {container}
-  render({template: 'div'}, options)
-}
-
-export async function testFireEvent() {
-  const {container} = render({template: 'button'})
-  await fireEvent.click(container)
-}
-
-export function testDebug() {
-  const {debug, getAllByTestId} = render({
-    render(h) {
-      return h('div', [
-        h('h1', {attrs: {'data-testId': 'testid'}}, 'hello world'),
-        h('h2', {attrs: {'data-testId': 'testid'}}, 'hello world'),
-      ])
-    },
-  })
-
-  debug(getAllByTestId('testid'))
-}
-
-export async function testScreen() {
-  render({template: 'button'})
-
-  await screen.findByRole('button')
-}
-
-export async function testWaitFor() {
-  const {container} = render({template: 'button'})
-  await fireEvent.click(container)
-  await waitFor(() => {})
-}
-
-export function testOptions() {
-  render(SomeComponent, {
-    // options for new Vue()
-    name: 'SomeComponent',
-    methods: {
-      glorb() {
-        return 42
-      },
-    },
-    // options for vue-test-utils mount()
-    slots: {
-      quux: '<p>Baz</p>',
-    },
-    mocks: {
-      isThisFake() {
-        return true
-      },
-    },
-    // options for Vue Testing Library render()
-    container: elem,
-    baseElement: elem,
-    props: {
-      foo: 9,
-      bar: 'x',
-    },
-    store: {
-      state: {
-        foos: [4, 5],
-        bars: ['a', 'b'],
-      },
-    },
-    routes: [
-      {path: '/', name: 'home', component: SomeComponent},
-      {
-        path: '/about',
-        name: 'about',
-        component: () => Promise.resolve(SomeComponent),
-      },
-    ],
-  })
-}
-
-export function testConfigCallback() {
-  const ExamplePlugin: Vue.PluginFunction<never> = () => {}
-  render(SomeComponent, {}, localVue => {
-    localVue.use(ExamplePlugin)
-  })
-}
-
-export function testInstantiatedStore() {
-  render(SomeComponent, {
-    store: new Vuex.Store({
-      state: {count: 3},
-      mutations: {
-        increment(state) {
-          state.count++
-        },
-        decrement(state) {
-          state.count--
-        },
-      },
-      actions: {
-        increment(context) {
-          context.commit('increment')
-        },
-        decrement(context) {
-          context.commit('decrement')
-        },
-      },
-    }),
-  })
-}
-
-export function testInstantiatedRouter() {
-  render(SomeComponent, {
-    routes: new VueRouter({
-      routes: [{path: '/', name: 'home', component: SomeComponent}],
-    }),
-  })
-}
-
-/*
-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
index 4c48bf28..d822978b 100644
--- a/types/tsconfig.json
+++ b/types/tsconfig.json
@@ -3,7 +3,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "lib": ["es6", "dom"],
+    "lib": ["ES2020", "DOM"],
     "noImplicitAny": true,
     "noImplicitThis": true,
     "strictNullChecks": true,
diff --git a/types/tslint.json b/types/tslint.json
index c7b428f3..70c4494b 100644
--- a/types/tslint.json
+++ b/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["dtslint/dtslint.json"],
+  "extends": "dtslint/dtslint.json",
   "rules": {
     "semicolon": false,
     "whitespace": false