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 cf2c75f3..4e9e131e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,11 @@
 module.exports = {
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+  },
   extends: [
     './node_modules/kcd-scripts/eslint.js',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:testing-library/vue',
     'prettier/vue',
   ],
   plugins: ['vue'],
@@ -12,5 +16,6 @@ module.exports = {
     'testing-library/no-dom-import': 'off',
     'testing-library/prefer-screen-queries': 'off',
     'testing-library/no-manual-cleanup': 'off',
+    'testing-library/no-await-sync-events': 'off',
   },
 }
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
new file mode 100644
index 00000000..36e4130e
--- /dev/null
+++ b/.github/workflows/validate.yml
@@ -0,0 +1,81 @@
+name: validate
+on:
+  push:
+    branches:
+      [
+        '+([0-9])?(.{+([0-9]),x}).x',
+        'master',
+        'next',
+        'next-major',
+        'beta',
+        'alpha',
+        '!all-contributors/**',
+      ]
+  pull_request:
+    branches-ignore: ['all-contributors/**']
+jobs:
+  main:
+    strategy:
+      matrix:
+        node: [10.13, 12, 14]
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: ▶️ Run validate script
+        run: npm run validate
+
+      - name: ⬆️ Upload coverage report
+        uses: codecov/codecov-action@v1
+
+  release:
+    needs: main
+    runs-on: ubuntu-latest
+    if:
+      ${{ github.repository == 'testing-library/vue-testing-library' &&
+      contains('refs/heads/master,refs/heads/beta,refs/heads/next,refs/heads/alpha',
+      github.ref) && github.event_name == 'push' }}
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🏗 Run build script
+        run: npm run build
+
+      - name: 🚀 Release
+        uses: cycjimmy/semantic-release-action@v2
+        with:
+          semantic_version: 17
+          branches: |
+            [
+              '+([0-9])?(.{+([0-9]),x}).x',
+              'master',
+              'next',
+              'next-major',
+              {name: 'beta', prerelease: true},
+              {name: 'alpha', prerelease: true}
+            ]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 5153af12..00000000
--- a/.travis.yml
+++ /dev/null
@@ -1,29 +0,0 @@
-sudo: false
-language: node_js
-cache:
-  directories:
-    - ~/.npm
-notifications:
-  email: false
-node_js:
-  - 10.18
-  - 12
-  - 14
-  - 15
-before_install:
-  - nvm install-latest-npm
-install: npm install
-script: npm run validate
-after_success: kcd-scripts travis-after-success
-branches:
-  only:
-    - master
-    - beta
-    - next
-
-jobs:
-  include:
-    - stage: release
-      node_js: 14
-      script: kcd-scripts travis-release
-      if: fork = false
diff --git a/README.md b/README.md
index 735f0594..dade3ebb 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-<h1>Vue Testing Library</h1>
+<h1>Vue Testing Library for Vue 3</h1>
 
 <br />
 
@@ -32,7 +32,6 @@
 [![GitHub version][github-badge]][github]
 [![npm version][npm-badge]][npm]
 [![Discord][discord-badge]][discord]
-
 [![MIT License][license-badge]][license]
 <!-- prettier-ignore-end -->
 
@@ -66,7 +65,7 @@ project's `devDependencies`:
 npm install --save-dev @testing-library/vue
 ```
 
-This library has `peerDependencies` listings for `Vue` and
+This library has `peerDependencies` listings for `Vue 3` and
 `vue-template-compiler`.
 
 You may also be interested in installing `jest-dom` so you can use [the custom
@@ -76,10 +75,8 @@ Jest matchers][jest-dom].
 
 ```html
 <template>
-  <div>
-    <p>Times clicked: {{ count }}</p>
-    <button @click="increment">increment</button>
-  </div>
+  <p>Times clicked: {{ count }}</p>
+  <button @click="increment">increment</button>
 </template>
 
 <script>
@@ -174,8 +171,7 @@ light-weight, simple, and understandable.
 
 ## Typings
 
-The TypeScript type definitions are in the [DefinitelyTyped repo][types] and
-bundled with Vue Testing Library.
+The TypeScript type definitions are in the [types][types-directory] directory.
 
 ## ESLint support
 
@@ -235,10 +231,11 @@ instead of filing an issue on GitHub.
 [![mediafreakch](https://avatars2.githubusercontent.com/u/777093?v=3&s=120)](https://github.com/mediafreakch)
 [![afenton90](https://avatars2.githubusercontent.com/u/8963736?v=3&s=120)](https://github.com/afenton90)
 [![cilice](https://avatars2.githubusercontent.com/u/835588?v=3&s=120)](https://github.com/cilice)
+[![ITenthusiasm](https://avatars2.githubusercontent.com/u/47364027?v3&s=120)](https://github.com/ITenthusiasm)
 
 <!-- prettier-ignore-start -->
-[build-badge]: https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master
-[build]: https://travis-ci.org/testing-library/vue-testing-library
+[build-badge]: https://img.shields.io/github/workflow/status/testing-library/vue-testing-library/validate?logo=github
+[build]: https://github.com/testing-library/vue-testing-library/actions?query=workflow%3Avalidate
 [coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/vue-testing-library.svg
 [coverage]: https://codecov.io/github/testing-library/vue-testing-library
 [github-badge]: https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg
@@ -249,7 +246,6 @@ instead of filing an issue on GitHub.
 [license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
 [discord]: https://testing-library.com/discord
 [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=flat-square
-[types]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__vue
 [jest-dom]: https://github.com/testing-library/jest-dom
 [which-query]: https://testing-library.com/docs/guide-which-query
 [guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
@@ -263,10 +259,11 @@ instead of filing an issue on GitHub.
 [add-issue-bug]: https://github.com/testing-library/vue-testing-library/issues/new?assignees=&labels=bug&template=bug_report.md&title=
 [add-issue]: (https://github.com/testing-library/vue-testing-library/issues/new)
 
+[types-directory]: https://github.com/testing-library/vue-testing-library/blob/master/types
 [test-directory]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__
 [vuex-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js
 [vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-router.js
 [vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/validate-plugin.js
-[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vueI18n.js
+[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-i18n.js
 [vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuetify.js
 <!-- prettier-ignore-end -->
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..424f157b
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  sourceType: 'module',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+          esmodules: true,
+        },
+      },
+    ],
+  ],
+}
diff --git a/compatibility-scripts/vue-apollo-patch.js b/compatibility-scripts/vue-apollo-patch.js
new file mode 100644
index 00000000..e1702929
--- /dev/null
+++ b/compatibility-scripts/vue-apollo-patch.js
@@ -0,0 +1,34 @@
+// This patch is run from post-install script and it is a temporary hack until a pending PR is merged
+// More details here:
+// https://github.com/vuejs/vue-apollo/issues/1011
+const fs = require('fs')
+const path = require('path')
+
+const useQueryPath = path.resolve(
+  __dirname,
+  '../node_modules/@vue/apollo-composable/dist/useQuery.js',
+)
+
+const vueApolloComposablePath = path.resolve(
+  __dirname,
+  '../node_modules/@vue/apollo-composable/dist/vue-apollo-composable.js',
+)
+
+fs.writeFileSync(
+  useQueryPath,
+  fs.readFileSync(useQueryPath, 'utf8').replace(/^onServerPrefetch, /mu, ''),
+)
+
+fs.writeFileSync(
+  useQueryPath,
+  fs
+    .readFileSync(useQueryPath, 'utf8')
+    .replace(/onServerPrefetch === null.*?\}\);/msu, ''),
+)
+
+fs.writeFileSync(
+  vueApolloComposablePath,
+  fs
+    .readFileSync(vueApolloComposablePath, 'utf8')
+    .replace(/vue_demi_5.onServerPrefetch === null.*?\}\);/msu, ''),
+)
diff --git a/jest.config.js b/jest.config.js
index c68ee838..9d901b60 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,9 +4,6 @@ const config = require('kcd-scripts/jest')
 module.exports = merge(config, {
   testEnvironment: 'jsdom',
   moduleFileExtensions: ['js', 'vue'],
-  moduleNameMapper: {
-    '@testing-library/vue': '<rootDir>/src/vue-testing-library.js',
-  },
   coverageDirectory: './coverage',
   collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
   transform: {
@@ -15,8 +12,14 @@ module.exports = merge(config, {
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   testPathIgnorePatterns: [
-    '<rootDir>/node_modules',
+    '<rootDir>/node_modules/',
     '<rootDir>/src/__tests__/components',
     '<rootDir>/src/__tests__/directives',
   ],
+  moduleNameMapper: {
+    '@vue/apollo-composable': [
+      '<rootDir>/node_modules/@vue/apollo-composable/dist/index.js',
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!(@vue/apollo-composable)/)'],
 })
diff --git a/package.json b/package.json
index d579d2f3..60187c08 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,8 @@
   "name": "@testing-library/vue",
   "version": "0.0.0-semantically-released",
   "description": "Simple and complete Vue DOM testing utilities that encourage good testing practices.",
-  "main": "dist/vue-testing-library.js",
+  "main": "dist/index.js",
+  "types": "types/index.d.ts",
   "scripts": {
     "format": "kcd-scripts format",
     "build": "kcd-scripts build",
@@ -10,12 +11,14 @@
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
-    "setup": "npm install && npm run validate -s"
+    "setup": "npm install && npm run validate -s",
+    "postinstall": "node compatibility-scripts/vue-apollo-patch.js"
   },
   "engines": {
     "node": ">10.18"
   },
   "files": [
+    "types",
     "dist",
     "cleanup-after-each.js"
   ],
@@ -35,44 +38,53 @@
     "vue.js 2",
     "vue.js 2 testing",
     "vue 2",
-    "vue 2 testing"
+    "vue 2 testing",
+    "vue.js 3",
+    "vue.js 3 testing",
+    "vue 3",
+    "vue 3 testing"
   ],
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.11.2",
-    "@testing-library/dom": "^7.24.3",
-    "@types/testing-library__vue": "^5.0.0",
-    "@vue/test-utils": "^1.1.0"
+    "@babel/runtime": "^7.12.1",
+    "@testing-library/dom": "^7.28.1",
+    "@vue/test-utils": "^2.0.0-beta.12",
+    "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@testing-library/jest-dom": "^5.11.4",
+    "@apollo/client": "3.0.0",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/user-event": "^12.4.0",
+    "@types/estree": "0.0.45",
+    "@vue/apollo-composable": "^4.0.0-alpha.12",
+    "@vue/compiler-sfc": "^3.0.4",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "axios": "^0.20.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "graphql": "^15.3.0",
+    "dtslint": "^4.0.6",
+    "element-plus": "^1.0.1-beta.7",
+    "eslint-plugin-vue": "^7.1.0",
+    "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
-    "isomorphic-unfetch": "^3.0.0",
+    "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^6.5.1",
-    "lodash.merge": "^4.6.2",
-    "msw": "^0.21.2",
-    "portal-vue": "^2.1.7",
-    "vee-validate": "^2.2.15",
-    "vue": "^2.6.12",
-    "vue-apollo": "^3.0.4",
-    "vue-i18n": "^8.21.1",
-    "vue-jest": "^4.0.0-rc.0",
-    "vue-router": "^3.4.5",
-    "vue-template-compiler": "^2.6.12",
-    "vuetify": "^2.3.10",
-    "vuex": "^3.5.1"
+    "kcd-scripts": "^7.5.1",
+    "msw": "^0.21.3",
+    "typescript": "^4.1.2",
+    "vee-validate": "^4.0.2",
+    "vue": "^3.0.4",
+    "vue-apollo": "^3.0.5",
+    "vue-i18n": "^9.0.0-beta.10",
+    "vue-jest": "^5.0.0-alpha.7",
+    "vue-router": "^4.0.1",
+    "vuetify": "^2.3.19",
+    "vuex": "^4.0.0-rc.2"
   },
   "peerDependencies": {
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "@vue/compiler-sfc": ">= 3",
+    "vue": ">= 3"
   },
   "husky": {
     "hooks": {
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 8d5412ae..805d4303 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__/axios-mock.js b/src/__tests__/axios-mock.js
index 39e51bab..8daeb14a 100644
--- a/src/__tests__/axios-mock.js
+++ b/src/__tests__/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__/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__/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 78b83ca9..73897cb2 100644
--- a/src/__tests__/components/Form.vue
+++ b/src/__tests__/components/Form.vue
@@ -1,73 +1,71 @@
-<template>
-  <div>
-    <h1>Movie Review</h1>
-    <form @submit.prevent="submit">
-      <label for="movie-input">Title of the movie</label>
-      <input id="movie-input" v-model="title" name="title" />
-
-      <label id="review-textarea">Your review</label>
-      <textarea
-        v-model="review"
-        name="review-textarea"
-        placeholder="Write an awesome review"
-        aria-labelledby="review-textarea"
-      />
-
-      <label>
-        <input v-model="rating" type="radio" value="3" />
-        Wonderful
-      </label>
-      <label>
-        <input v-model="rating" type="radio" value="2" />
-        Average
-      </label>
-      <label>
-        <input v-model="rating" type="radio" value="1" />
-        Awful
-      </label>
-
-      <label id="recommend-label">Would you recommend this movie?</label>
-      <input
-        id="recommend"
-        v-model="recommend"
-        type="checkbox"
-        name="recommend"
-      />
-
-      <button :disabled="submitDisabled" type="submit">
-        Submit
-      </button>
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: '',
-      review: '',
-      rating: '1',
-      recommend: false,
-    }
-  },
-  computed: {
-    submitDisabled() {
-      return !this.title || !this.review
-    },
-  },
-
-  methods: {
-    submit() {
-      if (this.submitDisabled) return
-
-      this.$emit('submit', {
-        title: this.title,
-        review: this.review,
-        rating: this.rating,
-        recommend: this.recommend,
-      })
-    },
-  },
-}
-</script>
+<template>
+  <h1>Movie Review</h1>
+  <form @submit.prevent="submit">
+    <label for="movie-input">Title of the movie</label>
+    <input id="movie-input" v-model="title" name="title" />
+
+    <label id="review-textarea">Your review</label>
+    <textarea
+      v-model="review"
+      name="review-textarea"
+      placeholder="Write an awesome review"
+      aria-labelledby="review-textarea"
+    />
+
+    <label>
+      <input v-model="rating" type="radio" value="3" />
+      Wonderful
+    </label>
+    <label>
+      <input v-model="rating" type="radio" value="2" />
+      Average
+    </label>
+    <label>
+      <input v-model="rating" type="radio" value="1" />
+      Awful
+    </label>
+
+    <label id="recommend-label" 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>
+</template>
+
+<script>
+export default {
+  emits: {submit: null},
+  data() {
+    return {
+      title: '',
+      review: '',
+      rating: '1',
+      recommend: false,
+    }
+  },
+  computed: {
+    submitDisabled() {
+      return !this.title || !this.review
+    },
+  },
+  methods: {
+    submit() {
+      if (this.submitDisabled) return
+
+      this.$emit('submit', {
+        title: this.title,
+        review: this.review,
+        rating: this.rating,
+        recommend: this.recommend,
+      })
+    },
+  },
+}
+</script>
diff --git a/src/__tests__/components/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..940363f0 100644
--- a/src/__tests__/components/NumberDisplay.vue
+++ b/src/__tests__/components/NumberDisplay.vue
@@ -1,8 +1,6 @@
 <template>
-  <div>
-    <span data-testid="number-display">{{ number }}</span>
-    <span data-testid="instance-id">{{ id }}</span>
-  </div>
+  <span data-testid="number-display">{{ number }}</span>
+  <span data-testid="instance-id">{{ id }}</span>
 </template>
 
 <script>
@@ -12,13 +10,13 @@ export default {
   props: {
     number: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      id: idCounter++
+      id: idCounter++,
     }
-  }
+  },
 }
 </script>
diff --git a/src/__tests__/components/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/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 0510b5d8..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: 'VueI18n',
-
-  methods: {
-    switchLocale(locale) {
-      this.$i18n.locale = locale
-    },
-  },
+  name: 'Translations',
 }
 </script>
diff --git a/src/__tests__/components/Validate.vue b/src/__tests__/components/Validate.vue
index 6a4fe9df..d976ae27 100644
--- a/src/__tests__/components/Validate.vue
+++ b/src/__tests__/components/Validate.vue
@@ -1,36 +1,35 @@
 <template>
-  <form>
-    <label id="username-label" for="username">Username</label>
+  <Form>
+    <Field :rules="validateEmail" name="email" as="input" type="email" />
 
-    <input
-      v-model="username"
-      v-validate="'required|email'"
-      placeholder="Username..."
-      name="username"
-      aria-labelledby="username-label"
-    />
+    <error-message name="email" data-testid="error-message" />
 
-    <span v-if="errors.has('username')" data-testid="username-errors">{{
-      errors.first('username')
-    }}</span>
-
-    <label id="password-label" for="password">Password</label>
-    <input
-      v-model="password"
-      placeholder="Password..."
-      type="password"
-      name="password"
-      aria-labelledby="password-label"
-    />
-    <button type="submit">Submit</button>
-  </form>
+    <button>Sign up</button>
+  </Form>
 </template>
 
 <script>
+import {Form, Field, ErrorMessage} from 'vee-validate'
+
 export default {
-  data: () => ({
-    username: '',
-    password: ''
-  })
+  name: 'VeeValidate',
+  components: {
+    Form,
+    Field,
+    ErrorMessage,
+  },
+  methods: {
+    validateEmail(value) {
+      if (!value) {
+        return 'This field is required'
+      }
+
+      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
+        return 'This field must be a valid email'
+      }
+
+      return true
+    },
+  },
 }
 </script>
diff --git a/src/__tests__/components/VueApollo.vue b/src/__tests__/components/VueApollo.vue
index a491c0e4..372978d3 100644
--- a/src/__tests__/components/VueApollo.vue
+++ b/src/__tests__/components/VueApollo.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
-    <div v-if="$apollo.queries.user.loading">Loading</div>
+    <div v-if="loading">Loading</div>
+
     <div v-if="user">
       <div>Email: {{ user.email }}</div>
       <form @submit.prevent="updateUser">
@@ -15,47 +16,39 @@
 </template>
 
 <script>
-import {userQuery, updateUserMutation} from './VueApollo/queries'
+import {reactive, ref} from 'vue'
+import {useQuery, useMutation, useResult} from '@vue/apollo-composable'
+import {updateUserMutation, getUserQuery} from './VueApollo/queries'
 
 export default {
-  apollo: {
-    user: {
-      query: userQuery,
-      variables() {
-        return {id: this.id}
-      },
-    },
-  },
   props: {
     id: {
       type: String,
       required: true,
     },
   },
-  data() {
-    return {
-      user: null,
-      email: '',
-    }
-  },
-  methods: {
-    async updateUser() {
-      const {
-        data: {
-          updateUser: {email},
-        },
-      } = await this.$apollo.mutate({
-        mutation: updateUserMutation,
-        variables: {
-          input: {
-            email: this.email,
-            id: this.id,
-          },
+  setup(props) {
+    const email = ref('')
+
+    const {result, loading, error} = useQuery(getUserQuery, {id: props.id})
+    const user = useResult(result, null, data => data.user)
+
+    const {mutate: updateUser} = useMutation(updateUserMutation, () => ({
+      variables: {
+        input: {
+          email: email.value,
+          id: props.id,
         },
-      })
+      },
+    }))
 
-      this.user.email = email
-    },
+    return {
+      email,
+      user,
+      loading,
+      error,
+      updateUser,
+    }
   },
 }
 </script>
diff --git a/src/__tests__/components/VueApollo/queries.js b/src/__tests__/components/VueApollo/queries.js
index 05cd43c2..cd85fa2f 100644
--- a/src/__tests__/components/VueApollo/queries.js
+++ b/src/__tests__/components/VueApollo/queries.js
@@ -1,19 +1,18 @@
-import gql from 'graphql-tag'
+import {gql} from 'apollo-boost'
 
-export const updateUserMutation = gql`
-  mutation updateUser($data: UpdateUserInput) {
-    updateUser(input: $data) {
+export const getUserQuery = gql`
+  query getUser($id: String!) {
+    user(id: $id) {
       id
       email
     }
   }
 `
-
-export const userQuery = gql`
-  query User($id: String!) {
-    user(id: $id) {
+export const updateUserMutation = gql`
+  mutation updateUser($data: UpdateUserInput) {
+    updateUser(input: $data) {
       id
       email
     }
   }
-`
+`
\ No newline at end of file
diff --git a/src/__tests__/components/VueI18n.vue b/src/__tests__/components/VueI18n.vue
deleted file mode 100644
index d23a693d..00000000
--- a/src/__tests__/components/VueI18n.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <h2>{{ $t('Hello') }}</h2>
-    <button @click="switchLocale('en')">English</button>
-    <button @click="switchLocale('ja')">
-      Japanese
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'VueI18n',
-
-  methods: {
-    switchLocale(locale) {
-      this.$i18n.locale = locale
-    }
-  }
-}
-</script>
diff --git a/src/__tests__/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__/debug.js b/src/__tests__/debug.js
index d870244f..554feb04 100644
--- a/src/__tests__/debug.js
+++ b/src/__tests__/debug.js
@@ -1,5 +1,5 @@
 /* eslint-disable testing-library/no-debug */
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import HelloWorld from './components/HelloWorld'
 
 beforeEach(() => {
@@ -57,3 +57,19 @@ test('debug pretty prints multiple nodes with the given parameter', () => {
     expect.stringContaining('Lorem ipsum dolor sit amet'),
   )
 })
+
+test('allows same arguments as prettyDOM', () => {
+  const {debug, container} = render(HelloWorld)
+
+  // debug accepts a maxLength and an options parameters:
+  // https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom
+  debug(container, 6, {highlight: false})
+
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      <div>
+      ...,
+    ]
+  `)
+})
diff --git a/src/__tests__/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 040848fc..8746f9ed 100644
--- a/src/__tests__/disappearance.js
+++ b/src/__tests__/disappearance.js
@@ -1,4 +1,4 @@
-import {render, waitForElementToBeRemoved} from '@testing-library/vue'
+import {render, waitForElementToBeRemoved} from '..'
 import Disappearance from './components/Disappearance'
 import '@testing-library/jest-dom'
 
diff --git a/src/__tests__/element-plus.js b/src/__tests__/element-plus.js
new file mode 100644
index 00000000..0d1eb633
--- /dev/null
+++ b/src/__tests__/element-plus.js
@@ -0,0 +1,37 @@
+import ElementPlus from 'element-plus'
+import {defineComponent} from 'vue'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import {render, screen, waitFor} from '..'
+
+const Component = defineComponent({
+  template: `
+    <el-popover trigger="hover" content="this is content">
+      <template #reference>
+        <el-button>Hover to activate</el-button>
+      </template>
+    </el-popover>
+  `,
+})
+
+test('Stubs out a component', async () => {
+  render(Component, {
+    global: {
+      plugins: [ElementPlus],
+    },
+  })
+
+  const button = screen.getByText('Hover to activate')
+  const getContent = () => screen.getByText('this is content')
+
+  expect(getContent()).toBeInTheDocument()
+  expect(getContent()).not.toBeVisible()
+
+  userEvent.hover(button)
+
+  await waitFor(() => expect(getContent()).toBeVisible())
+
+  userEvent.unhover(button)
+
+  await waitFor(() => expect(getContent()).not.toBeVisible())
+})
diff --git a/src/__tests__/fire-event.js b/src/__tests__/fire-event.js
index bced573f..19cef6b2 100644
--- a/src/__tests__/fire-event.js
+++ b/src/__tests__/fire-event.js
@@ -1,4 +1,5 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {h} from 'vue'
+import {render, fireEvent} from '..'
 import Button from './components/Button'
 
 const eventTypes = [
@@ -120,6 +121,16 @@ const eventTypes = [
   },
 ]
 
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
+
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+
 // For each event type, we assert that the right events are being triggered
 // when the associated fireEvent method is called.
 eventTypes.forEach(({type, events, elementType = 'input', init}) => {
@@ -128,21 +139,20 @@ eventTypes.forEach(({type, events, elementType = 'input', init}) => {
       it(`triggers ${eventName}`, async () => {
         const testId = `${type}-${eventName}`
         const spy = jest.fn()
+        const eventNameHandler = `on${capitalize(eventName)}`
 
-        // Render an element with a listener of the event under testing and a
-        // test-id attribute, so that we can get the DOM node afterwards.
-        const {getByTestId} = render({
-          render(h) {
+        const componentWithEvent = {
+          render() {
             return h(elementType, {
-              on: {
-                [eventName.toLowerCase()]: spy,
-              },
-              attrs: {
-                'data-testid': testId,
-              },
+              [eventNameHandler]: spy,
+              'data-testid': testId,
             })
           },
-        })
+        }
+
+        // Render an element with a listener of the event under testing and a
+        // test-id attribute, so that we can get the DOM node afterwards.
+        const {getByTestId} = render(componentWithEvent)
 
         const elem = getByTestId(testId)
 
@@ -157,13 +167,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')
 
@@ -182,6 +192,30 @@ test('calling `fireEvent` directly works too', async () => {
   expect(emitted()).toHaveProperty('click')
 })
 
+test.each(['input', 'change'])(
+  `fireEvent.%s prints a warning message to use fireEvent.update instead`,
+  async event => {
+    const {getByRole} = render({template: `<input type="text" />`})
+
+    await fireEvent[event](getByRole('textbox'), 'hello')
+
+    expect(console.warn).toHaveBeenCalledTimes(1)
+    expect(console.warn).toHaveBeenCalledWith(
+      `Using fireEvent.${event}() may lead to unexpected results. Please use fireEvent.update() instead.`,
+    )
+  },
+)
+
+test('fireEvent.update does not trigger warning messages', async () => {
+  const {getByTestId} = render({
+    template: `<input type="text" data-testid="test-update" />`,
+  })
+
+  await fireEvent.update(getByTestId('test-update'), 'hello')
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
+
 test('fireEvent.update does not crash if non-input element is passed in', async () => {
   const {getByText} = render({
     template: `<div>Hi</div>`,
@@ -194,4 +228,23 @@ test('fireEvent.update does not crash if non-input element is passed in', async
       Hi
     </div>
   `)
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
+
+test('fireEvent.update handles input file', async () => {
+  const {getByTestId} = render({
+    template: `<input type="file" data-testid="test-update" />`,
+  })
+
+  const file = new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})
+
+  const inputEl = getByTestId('test-update')
+
+  // You could replace the lines below with
+  // userEvent.upload(inputEl, file)
+  Object.defineProperty(inputEl, 'files', {value: [file]})
+  await fireEvent.update(inputEl)
+
+  expect(console.warn).not.toHaveBeenCalled()
 })
diff --git a/src/__tests__/form.js b/src/__tests__/form.js
index 130c2a16..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'
 
@@ -8,6 +8,8 @@ import Form from './components/Form'
 // Read 'What queries should I use?' for additional context:
 // https://testing-library.com/docs/guide-which-query
 test('Review form submits', async () => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+
   const fakeReview = {
     title: 'An Awesome Movie',
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
@@ -61,4 +63,5 @@ test('Review form submits', async () => {
   // Assert the right event has been emitted.
   expect(emitted()).toHaveProperty('submit')
   expect(emitted().submit[0][0]).toMatchObject(fakeReview)
+  expect(console.warn).not.toHaveBeenCalled()
 })
diff --git a/src/__tests__/functional.js b/src/__tests__/functional.js
index b6850e55..323a6ff2 100644
--- a/src/__tests__/functional.js
+++ b/src/__tests__/functional.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__/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..d72dc1b6
--- /dev/null
+++ b/src/__tests__/rerender.js
@@ -0,0 +1,53 @@
+import '@testing-library/jest-dom'
+import {defineComponent, h, computed} from 'vue'
+import {render} from '..'
+import NumberDisplay from './components/NumberDisplay'
+
+// It'd probably be better if you test the component that's doing the rerendering
+// to ensure that the rerendered component is being updated correctly.
+// That said, if you'd prefer to, for example, update the props of a rendered
+// component, this function can be used to do so.
+test('calling rerender remounts the component and updates the props', () => {
+  const {rerender, getByTestId} = render(NumberDisplay, {
+    props: {number: 1},
+  })
+
+  expect(getByTestId('number-display')).toHaveTextContent('1')
+
+  rerender({props: {number: 3}})
+  expect(getByTestId('number-display')).toHaveTextContent('3')
+
+  rerender({props: {number: 5}})
+  expect(getByTestId('number-display')).toHaveTextContent('5')
+
+  // Assert that, after rerendering and updating props, the component has been remounted,
+  // meaning we are testing a different component instance than we rendered initially.
+  expect(getByTestId('instance-id')).toHaveTextContent('3')
+})
+
+test('rerender works with composition API', () => {
+  const Component = defineComponent({
+    props: {
+      foo: {type: String, default: 'foo'},
+    },
+    setup(props) {
+      const foobar = computed(() => `${props.foo}-bar`)
+      return () =>
+        h(
+          'div',
+          {'data-testid': 'node'},
+          `Foo is: ${props.foo}. Foobar is: ${foobar.value}`,
+        )
+    },
+  })
+
+  const {rerender, getByTestId} = render(Component)
+
+  const originalNode = getByTestId('node')
+  expect(originalNode).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
+
+  rerender({props: {foo: 'qux'}})
+
+  const newNode = getByTestId('node')
+  expect(newNode).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
+})
diff --git a/src/__tests__/select.js b/src/__tests__/select.js
index 304d7bd0..c8e79750 100644
--- a/src/__tests__/select.js
+++ b/src/__tests__/select.js
@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import '@testing-library/jest-dom'
 import Select from './components/Select'
 
@@ -9,19 +9,19 @@ test('Select component', async () => {
 
   // Get the Select element by using the initially displayed value.
   const select = getByDisplayValue('Tyrannosaurus')
-  expect(select.value).toBe('dino1')
+  expect(select).toHaveValue('dino1')
 
   // Update it by manually sending a valid option value.
   await fireEvent.update(select, 'dino2')
-  expect(select.value).toBe('dino2')
+  expect(select).toHaveValue('dino2')
 
   // We can trigger an update event by directly getting the <option> element.
   optionElement = getByText('Deinonychus')
   await fireEvent.update(optionElement)
-  expect(select.value).toBe('dino3')
+  expect(select).toHaveValue('dino3')
 
   // ...even if option is within an <optgroup>.
   optionElement = getByText('Diplodocus')
   await fireEvent.update(optionElement)
-  expect(select.value).toBe('dino4')
+  expect(select).toHaveValue('dino4')
 })
diff --git a/src/__tests__/simple-button.js b/src/__tests__/simple-button.js
index a63d91ea..29698a4a 100644
--- a/src/__tests__/simple-button.js
+++ b/src/__tests__/simple-button.js
@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import Button from './components/Button'
 import '@testing-library/jest-dom'
 
diff --git a/src/__tests__/slots.js b/src/__tests__/slots.js
index 6641d270..6fc643d6 100644
--- a/src/__tests__/slots.js
+++ b/src/__tests__/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__/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__/update-props.js b/src/__tests__/update-props.js
deleted file mode 100644
index edaf1593..00000000
--- a/src/__tests__/update-props.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
-import NumberDisplay from './components/NumberDisplay.vue'
-
-// It'd probably be better if you test the component that's doing the prop
-// updating to ensure that the props are being updated correctly.
-// That said, if you'd prefer to update the props of a rendered component, this
-// function can be used to update props of the rendered component.
-test('calling render with the same component but different props does not remount', async () => {
-  const {getByTestId, updateProps} = render(NumberDisplay, {
-    props: {number: 1},
-  })
-
-  expect(getByTestId('number-display')).toHaveTextContent('1')
-
-  await updateProps({number: 2})
-
-  expect(getByTestId('number-display')).toHaveTextContent('2')
-
-  // Assert that, even after updating props, the component hasn't remounted,
-  // meaning we are testing the same component instance we rendered initially.
-  expect(getByTestId('instance-id')).toHaveTextContent('1')
-})
diff --git a/src/__tests__/user-event.js b/src/__tests__/user-event.js
new file mode 100644
index 00000000..4db8c3e6
--- /dev/null
+++ b/src/__tests__/user-event.js
@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom'
+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(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
+
+test('User events in a form', async () => {
+  const fakeReview = {
+    title: 'An Awesome Movie',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    rating: '3',
+  }
+  const {getByText, getByLabelText, emitted} = render(Form)
+
+  const submitButton = getByText('Submit')
+  expect(submitButton).toBeDisabled()
+
+  const titleInput = getByLabelText(/title of the movie/i)
+  userEvent.type(titleInput, fakeReview.title)
+  expect(titleInput).toHaveValue(fakeReview.title)
+
+  const textArea = getByLabelText(/Your review/i)
+  userEvent.type(textArea, 'The t-rex went insane!')
+  expect(textArea).toHaveValue('The t-rex went insane!')
+
+  userEvent.clear(textArea)
+  expect(textArea).toHaveValue('')
+  userEvent.type(textArea, fakeReview.review)
+  expect(textArea).toHaveValue(fakeReview.review)
+
+  const initialSelectedRating = getByLabelText(/Awful/i)
+  const wonderfulRadioInput = getByLabelText(/Wonderful/i)
+  expect(initialSelectedRating).toBeChecked()
+  expect(wonderfulRadioInput).not.toBeChecked()
+
+  userEvent.click(wonderfulRadioInput)
+  expect(wonderfulRadioInput).toBeChecked()
+  await waitFor(() => expect(initialSelectedRating).not.toBeChecked())
+
+  const recommendInput = getByLabelText(/Would you recommend this movie?/i)
+  userEvent.click(recommendInput)
+  expect(recommendInput).toBeChecked()
+
+  userEvent.tab()
+  expect(submitButton).toHaveFocus()
+  expect(submitButton).toBeEnabled()
+  userEvent.type(submitButton, '{enter}')
+  expect(emitted().submit[0][0]).toMatchObject(fakeReview)
+
+  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 725ece8b..12d58981 100644
--- a/src/__tests__/validate-plugin.js
+++ b/src/__tests__/validate-plugin.js
@@ -1,29 +1,22 @@
-// Notice this example is using vee-validate v2.X
-import VeeValidate from 'vee-validate'
 import '@testing-library/jest-dom'
 
-import {render, fireEvent} from '@testing-library/vue'
-import Validate from './components/Validate'
+import {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, getByTestId} = render(VeeValidate)
 
   // Assert error messages are not in the DOM when rendering the component.
-  expect(queryByTestId('username-errors')).toBeNull()
+  expect(getByTestId('error-message')).toBeEmptyDOMElement()
 
-  const usernameInput = getByPlaceholderText('Username...')
-  await fireEvent.touch(usernameInput)
+  const emailInput = getByRole('textbox')
 
-  // After "touching" the input (focusing and blurring), validation error
-  // should appear.
-  expect(getByTestId('username-errors')).toHaveTextContent(
-    /the username field is required/i,
-  )
+  await fireEvent.touch(emailInput)
+
+  await findByText('This field is required')
+
+  await fireEvent.update(emailInput, 'an invalid email')
+  await fireEvent.blur(emailInput)
+
+  await findByText('This field must be a valid email')
 })
diff --git a/src/__tests__/visibility.js b/src/__tests__/visibility.js
index 0e9436a7..3cda56e4 100644
--- a/src/__tests__/visibility.js
+++ b/src/__tests__/visibility.js
@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import '@testing-library/jest-dom'
 import Collapsible from './components/Collapsible'
 
diff --git a/src/__tests__/vue-apollo.js b/src/__tests__/vue-apollo.js
index b9f4bdd0..a7d04e01 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 {render, fireEvent, screen} from '..'
+import {DefaultApolloClient} from '@vue/apollo-composable'
 import ApolloClient from 'apollo-boost'
+import {setupServer} from 'msw/node'
+import {graphql} from 'msw'
+import Component from './components/VueApollo.vue'
 
-// Since vue-apollo doesn't provides a MockProvider for Vue,
+// 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-i18n.js b/src/__tests__/vue-i18n.js
index 45f2ba7e..4dd1d2bd 100644
--- a/src/__tests__/vue-i18n.js
+++ b/src/__tests__/vue-i18n.js
@@ -1,40 +1,33 @@
 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()
 
-  expect(queryByText('Hello')).toBeNull()
+  expect(queryByText('Hello')).not.toBeInTheDocument()
 })
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-mocha.js b/src/__tests__/vue-router-mocha.js
index 6cb0fa4f..c7263c78 100644
--- a/src/__tests__/vue-router-mocha.js
+++ b/src/__tests__/vue-router-mocha.js
@@ -1,14 +1,12 @@
 import '@testing-library/jest-dom'
-import {render} from '@testing-library/vue'
+import {render} from '..'
 
 import About from './components/Router/About.vue'
 
 const routes = []
 test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => {
   // Test for fix https://github.com/testing-library/vue-testing-library/issues/119
-  jest.mock('vue-router', () => {
-    return undefined
-  })
+  jest.mock('vue-router', () => undefined)
 
   expect(() => render(About, {routes})).toThrowError(
     new TypeError("Cannot read property 'default' of undefined"),
diff --git a/src/__tests__/vue-router.js b/src/__tests__/vue-router.js
index 1718b2be..221175ab 100644
--- a/src/__tests__/vue-router.js
+++ b/src/__tests__/vue-router.js
@@ -1,6 +1,10 @@
-import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
+// Please notice that this example is a draft example on how to test
+// the router.
+// Related issue on Vue Test Utils: https://github.com/vuejs/vue-test-utils-next/issues/152
 
+import '@testing-library/jest-dom'
+import {waitFor} from '@testing-library/dom'
+import {render, fireEvent} from '..'
 import App from './components/Router/App.vue'
 import Home from './components/Router/Home.vue'
 import About from './components/Router/About.vue'
@@ -8,27 +12,23 @@ import About from './components/Router/About.vue'
 const routes = [
   {path: '/', component: Home},
   {path: '/about', component: About},
-  {path: '*', redirect: '/about'},
 ]
 
 test('full app rendering/navigating', async () => {
   // Notice how we pass a `routes` object to our render function.
-  const {queryByTestId} = render(App, {routes})
+  const {findByText, getByText, getByTestId} = render(App, {routes})
 
-  expect(queryByTestId('location-display')).toHaveTextContent('/')
+  // Vue Router navigation is async, so we need to wait until the
+  // initial render happens
+  expect(await findByText('You are home')).toBeInTheDocument()
 
-  await fireEvent.click(queryByTestId('about-link'))
-
-  expect(queryByTestId('location-display')).toHaveTextContent('/about')
-})
+  await fireEvent.click(getByTestId('about-link'))
 
-test('setting initial route', () => {
-  // The callback function receives three parameters: the Vue instance where
-  // the component is mounted, the store instance (if any) and the router
-  // object.
-  const {queryByTestId} = render(App, {routes}, (vue, store, router) => {
-    router.push('/about')
-  })
+  // 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(queryByTestId('location-display')).toHaveTextContent('/about')
+  expect(getByText('You are on the about page')).toBeInTheDocument()
 })
diff --git a/src/__tests__/vueI18n.js b/src/__tests__/vueI18n.js
deleted file mode 100644
index d61545ac..00000000
--- a/src/__tests__/vueI18n.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
-import Vuei18n from 'vue-i18n'
-import VueI18n from './components/VueI18n'
-
-const messages = {
-  en: {
-    Hello: 'Hello',
-  },
-  ja: {
-    Hello: 'こんにちは',
-  },
-}
-
-test('renders translations', async () => {
-  const {queryByText, getByText} = render(VueI18n, {}, vue => {
-    // Let's register Vuei18n normally
-    vue.use(Vuei18n)
-
-    const i18n = new Vuei18n({
-      locale: 'en',
-      fallbackLocale: 'en',
-      messages,
-    })
-
-    // Notice how we return an object from the callback function. It will be
-    // available as an additional option on the created Vue instance.
-    return {i18n}
-  })
-
-  expect(getByText('Hello')).toBeInTheDocument()
-
-  await fireEvent.click(getByText('Japanese'))
-
-  expect(getByText('こんにちは')).toBeInTheDocument()
-
-  expect(queryByText('Hello')).toBeNull()
-})
diff --git a/src/__tests__/vuetify.js b/src/__tests__/vuetify.js
index b0ec36af..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 f77206e6..7873f5bf 100644
--- a/src/__tests__/vuex.js
+++ b/src/__tests__/vuex.js
@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom'
-import {render, fireEvent} from '@testing-library/vue'
-
+import {render, fireEvent} from '..'
 import VuexTest from './components/Store/VuexTest'
 import {store} from './components/Store/store'
 
@@ -19,6 +18,7 @@ function renderVuexTestComponent(customStore) {
 
 test('can render with vuex with defaults', async () => {
   const {getByTestId, getByText} = renderVuexTestComponent()
+
   await fireEvent.click(getByText('+'))
 
   expect(getByTestId('count-value')).toHaveTextContent('1')
@@ -28,6 +28,7 @@ test('can render with vuex with custom initial state', async () => {
   const {getByTestId, getByText} = renderVuexTestComponent({
     state: {count: 3},
   })
+
   await fireEvent.click(getByText('-'))
 
   expect(getByTestId('count-value')).toHaveTextContent('2')
@@ -44,8 +45,8 @@ test('can render with vuex with custom store', async () => {
     },
   }
 
-  // Notice how here we are not using the helper method, because there's no
-  // need to do that.
+  // Notice how here we are not using the helper rendering method, because
+  // there's no need to do that here. We're passing a whole store.
   const {getByTestId, getByText} = render(VuexTest, {store})
 
   await fireEvent.click(getByText('+'))
diff --git a/src/__tests__/within.js b/src/__tests__/within.js
index 245e4ed7..3a85664f 100644
--- a/src/__tests__/within.js
+++ b/src/__tests__/within.js
@@ -1,4 +1,4 @@
-import {render, within} from '@testing-library/vue'
+import {render, within} from '..'
 
 test('within() returns an object with all queries bound to the DOM node', () => {
   const {getByTestId, getByText} = render({
diff --git a/src/vue-testing-library.js b/src/index.js
similarity index 63%
rename from src/vue-testing-library.js
rename to src/index.js
index a7cd4472..e9b0ff9c 100644
--- a/src/vue-testing-library.js
+++ b/src/index.js
@@ -1,9 +1,10 @@
 /* eslint-disable testing-library/no-wait-for-empty-callback */
-import {createLocalVue, mount} from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
+import merge from 'lodash.merge'
 
 import {
   getQueriesForElement,
-  logDOM,
+  prettyDOM,
   waitFor,
   fireEvent as dtlFireEvent,
 } from '@testing-library/dom'
@@ -19,73 +20,72 @@ 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 additionalOptions = {}
+  const plugins = []
 
   if (store) {
-    const Vuex = require('vuex')
-    localVue.use(Vuex)
-    vuexStore = new Vuex.Store(store)
+    const {createStore} = require('vuex')
+    plugins.push(createStore(store))
   }
 
   if (routes) {
     const requiredRouter = require('vue-router')
-    const VueRouter = requiredRouter.default || requiredRouter
-    localVue.use(VueRouter)
-    router = new VueRouter({
-      routes,
-    })
-  }
+    const {createRouter, createWebHistory} =
+      requiredRouter.default || requiredRouter
 
-  if (configurationCb && typeof configurationCb === 'function') {
-    additionalOptions = configurationCb(localVue, vuexStore, router)
+    const routerPlugin = createRouter({history: createWebHistory(), routes})
+    plugins.push(routerPlugin)
   }
 
-  if (!mountOptions.propsData && !!mountOptions.props) {
-    mountOptions.propsData = mountOptions.props
-    delete mountOptions.props
+  const mountComponent = (Component, newProps) => {
+    const wrapper = mount(
+      Component,
+      merge({
+        attachTo: container,
+        global: {plugins},
+        ...mountOptions,
+        props: newProps || mountOptions.props,
+      }),
+    )
+
+    // this removes the additional "data-v-app" div node from VTU:
+    // https://github.com/vuejs/vue-test-utils-next/blob/master/src/mount.ts#L196-L213
+    unwrapNode(wrapper.parentElement)
+
+    mountedWrappers.add(wrapper)
+    return wrapper
   }
 
-  const wrapper = mount(TestComponent, {
-    localVue,
-    router,
-    attachTo,
-    store: vuexStore,
-    ...mountOptions,
-    ...additionalOptions,
-  })
-
-  mountedWrappers.add(wrapper)
-  container.appendChild(wrapper.element)
+  let wrapper = mountComponent(TestComponent)
 
   return {
     container,
     baseElement,
-    debug: (el = baseElement) =>
-      Array.isArray(el) ? el.forEach(e => logDOM(e)) : logDOM(el),
-    unmount: () => wrapper.destroy(),
-    isUnmounted: () => wrapper.vm._isDestroyed,
+    debug: (el = baseElement, maxLength, options) =>
+      Array.isArray(el)
+        ? el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
+        : console.log(prettyDOM(el, maxLength, options)),
+    unmount: () => wrapper.unmount(),
     html: () => wrapper.html(),
     emitted: () => wrapper.emitted(),
-    updateProps: _ => {
-      wrapper.setProps(_)
-      return waitFor(() => {})
+    rerender: ({props}) => {
+      wrapper.unmount()
+      mountedWrappers.delete(wrapper)
+
+      wrapper = mountComponent(TestComponent, props)
     },
     ...getQueriesForElement(baseElement),
   }
 }
 
+function unwrapNode(node) {
+  node.replaceWith(...node.childNodes)
+}
+
 function cleanup() {
   mountedWrappers.forEach(cleanupAtWrapper)
 }
@@ -98,11 +98,8 @@ function cleanupAtWrapper(wrapper) {
     document.body.removeChild(wrapper.element.parentNode)
   }
 
-  try {
-    wrapper.destroy()
-  } finally {
-    mountedWrappers.delete(wrapper)
-  }
+  wrapper.unmount()
+  mountedWrappers.delete(wrapper)
 }
 
 // Vue Testing Library's version of fireEvent will call DOM Testing Library's
@@ -114,8 +111,20 @@ async function fireEvent(...args) {
   await waitFor(() => {})
 }
 
+function suggestUpdateIfNecessary(eventValue, eventKey) {
+  const changeOrInputEventCalledDirectly =
+    eventValue && (eventKey === 'change' || eventKey === 'input')
+
+  if (changeOrInputEventCalledDirectly) {
+    console.warn(
+      `Using fireEvent.${eventKey}() may lead to unexpected results. Please use fireEvent.update() instead.`,
+    )
+  }
+}
+
 Object.keys(dtlFireEvent).forEach(key => {
   fireEvent[key] = async (...args) => {
+    suggestUpdateIfNecessary(args[1], key)
     dtlFireEvent[key](...args)
     await waitFor(() => {})
   }
@@ -149,6 +158,8 @@ fireEvent.update = (elem, value) => {
       if (['checkbox', 'radio'].includes(type)) {
         elem.checked = true
         return fireEvent.change(elem)
+      } else if (type === 'file') {
+        return fireEvent.change(elem)
       } else {
         elem.value = value
         return fireEvent.input(elem)
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 00000000..c886447a
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,66 @@
+// Minimum TypeScript Version: 4.0
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {EmitsOptions} from 'vue'
+import {MountingOptions} from '@vue/test-utils'
+import {StoreOptions} from 'vuex'
+import {RouteRecordRaw} from 'vue-router'
+import {queries, EventType, BoundFunctions} from '@testing-library/dom'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
+
+// NOTE: fireEvent is overridden below
+export * from '@testing-library/dom'
+
+type Debug = (
+  baseElement?: Element | DocumentFragment | Array<Element | DocumentFragment>,
+  maxLength?: number,
+  options?: PrettyFormatOptions,
+) => void
+
+export interface RenderResult extends BoundFunctions<typeof queries> {
+  container: Element
+  baseElement: Element
+  debug: Debug
+  unmount(): void
+  html(): string
+  emitted(): EmitsOptions
+  rerender(props: object): Promise<void>
+}
+
+type VueTestUtilsRenderOptions = Omit<
+  MountingOptions<Record<string, any>>,
+  'attachTo' | 'shallow' | 'propsData'
+>
+type VueTestingLibraryRenderOptions = {
+  store?: StoreOptions<{}>
+  routes?: RouteRecordRaw[]
+  container?: Element
+  baseElement?: Element
+}
+type RenderOptions = VueTestUtilsRenderOptions & VueTestingLibraryRenderOptions
+
+export function render(
+  TestComponent: any, // this makes me sad :sob:
+  options?: RenderOptions,
+): RenderResult
+
+export type AsyncFireObject = {
+  [K in EventType]: (
+    element: Document | Element | Window,
+    options?: {},
+  ) => Promise<void>
+}
+
+export interface VueFireEventObject extends AsyncFireObject {
+  (element: Document | Element | Window, event: Event): Promise<void>
+  touch(element: Document | Element | Window): Promise<void>
+  update(element: HTMLOptionElement): Promise<void>
+  update(
+    element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+    value: string,
+  ): Promise<void>
+  update(element: Element, value?: string): Promise<void>
+}
+
+export const fireEvent: VueFireEventObject
diff --git a/types/test.ts b/types/test.ts
new file mode 100644
index 00000000..aeb5df89
--- /dev/null
+++ b/types/test.ts
@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import {defineComponent} from 'vue'
+import {render, fireEvent, screen, waitFor} from '@testing-library/vue'
+
+declare const elem: Element
+
+const SomeComponent = defineComponent({
+  name: 'SomeComponent',
+  props: {
+    foo: {type: Number, default: 0},
+    bar: {type: String, default: '0'},
+  },
+})
+
+export async function testRender() {
+  const page = render({template: '<div />'})
+
+  // single queries
+  page.getByText('foo')
+  page.queryByText('foo')
+  await page.findByText('foo')
+
+  // multiple queries
+  page.getAllByText('bar')
+  page.queryAllByText('bar')
+  await page.findAllByText('bar')
+
+  // helpers
+  const {container, baseElement, unmount, debug, rerender} = page
+
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  rerender({a: 1}) // $ExpectType Promise<void>
+
+  debug() // $ExpectType void
+  debug(container) // $ExpectType void
+  debug([elem, elem], 100, {highlight: false}) // $ExpectType void
+
+  unmount() // $ExpectType void
+
+  container // $ExpectType Element
+  baseElement // $ExpectType Element
+}
+
+export function testRenderOptions() {
+  const container = document.createElement('div')
+  const baseElement = document.createElement('div')
+  const options = {container, baseElement}
+  render({template: 'div'}, options)
+}
+
+export async function testFireEvent() {
+  const {container} = render({template: 'button'})
+  await fireEvent.click(container) // $ExpectType Promise<void>
+  await fireEvent.touch(elem) // $ExpectType Promise<void>
+}
+
+export async function testScreen() {
+  render({template: 'button'})
+
+  await screen.findByRole('button') // $ExpectType Promise<HTMLElement>
+}
+
+export async function testWaitFor() {
+  const {container} = render({template: 'button'})
+  await fireEvent.update(container) // $ExpectType Promise<void>
+  await waitFor(() => {})
+}
+
+export function testOptions() {
+  render(SomeComponent, {
+    attrs: {a: 1},
+    props: {c: 1}, // ideally it would fail because `c` is not an existing prop…
+    data: () => ({b: 2}),
+    slots: {
+      default: '<div />',
+      footer: '<div />',
+    },
+    global: {
+      config: {isCustomElement: _ => true},
+    },
+    store: {
+      state: {count: 3},
+      strict: true,
+    },
+    routes: [{path: '/', component: () => SomeComponent, name: 'route name'}],
+    baseElement: document.createElement('div'),
+    container: document.createElement('div'),
+  })
+}
+
+/*
+eslint
+  testing-library/prefer-explicit-assert: "off",
+  testing-library/no-wait-for-empty-callback: "off",
+  testing-library/no-debug: "off",
+  testing-library/prefer-screen-queries: "off",
+  @typescript-eslint/unbound-method: "off",
+*/
diff --git a/types/tsconfig.json b/types/tsconfig.json
new file mode 100644
index 00000000..d822978b
--- /dev/null
+++ b/types/tsconfig.json
@@ -0,0 +1,17 @@
+// this additional tsconfig is required by dtslint
+// see: https://github.com/Microsoft/dtslint#typestsconfigjson
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["ES2020", "DOM"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@testing-library/vue": ["."]
+    }
+  }
+}
diff --git a/types/tslint.json b/types/tslint.json
new file mode 100644
index 00000000..70c4494b
--- /dev/null
+++ b/types/tslint.json
@@ -0,0 +1,7 @@
+{
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "semicolon": false,
+    "whitespace": false
+  }
+}