README.md

@@ -15,6 +15,11 @@
 <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 />
 
@@ -61,6 +66,12 @@
 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
 ```
@@ -173,6 +184,8 @@ light-weight, simple, and understandable.
 
 ## Typings
 
+_Please note that TypeScript 4.X is required._
+
 The TypeScript type definitions are in the [types][types-directory] directory.
 
 ## ESLint support
@@ -266,6 +279,6 @@ instead of filing an issue on GitHub.
 [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.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
 <!-- prettier-ignore-end -->

jest.config.js

@@ -11,7 +11,7 @@ module.exports = merge(config, {
   collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue2-jest',
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   testPathIgnorePatterns: [

package.json

@@ -52,6 +52,7 @@
     "@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-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "axios": "^0.21.1",
@@ -62,16 +63,16 @@
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.0.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^10.1.1",
+    "kcd-scripts": "^11.1.0",
     "lodash.merge": "^4.6.2",
-    "msw": "^0.26.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-jest": "^4.0.0-rc.0",
     "vue-router": "^3.4.9",
     "vue-template-compiler": "^2.6.12",
     "vuetify": "^2.3.17",

src/__tests__/about-vue-router-mocha.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import {render} from '@testing-library/vue'
+import semver from 'semver'
 
 import About from './components/Router/About.vue'
 
@@ -11,6 +12,10 @@ test('uses require("vue-router").default when require("vue-router") is undefined
   })
 
   expect(() => render(About, {routes})).toThrowError(
-    new TypeError("Cannot read property 'default' of undefined"),
+    new TypeError(
+      semver.gte(process.version, '16.0.0')
+        ? "Cannot read properties of undefined (reading 'default')"
+        : "Cannot read property 'default' of undefined",
+    ),
   )
 })

src/__tests__/disappearance.js

@@ -11,7 +11,7 @@ test('waits for the data to be loaded', async () => {
 
   // Following line reads as follows:
   // "Wait until element with text 'Loading...' is gone."
-  await waitForElementToBeRemoved(getByText('Loading...'))
+  await waitForElementToBeRemoved(queryByText('Loading...'))
   // It is equivalent to:
   //
   // await waitFor(() => {

src/__tests__/vuex.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import {render, fireEvent} from '@testing-library/vue'
+import Vue from 'vue'
 import Vuex from 'vuex'
 
 import VuexTest from './components/Store/VuexTest'
@@ -57,6 +58,12 @@ test('can render with vuex with custom store', async () => {
 })
 
 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)
+
   const {getByTestId, getByText} = render(VuexTest, {
     store: new Vuex.Store({
       state: {count: 3},

types/index.d.ts

@@ -41,11 +41,11 @@ type Routes = any
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Router = any
 
-export interface RenderOptions<V extends Vue>
+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?: Store
+  store?: S
   routes?: Routes
   container?: Element
   baseElement?: Element
@@ -61,9 +61,11 @@ export type ConfigurationCallback<V extends Vue> =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | ((localVue: typeof Vue, store: Store, router: Router) => void)
 
-export function render<V extends Vue>(
+export function render<V extends Vue, S = Store>(
   TestComponent: VueClass<V> | ComponentOptions<V>,
-  options?: RenderOptions<V>,
+  // eslint-disable-next-line @typescript-eslint/ban-tslint-comment
+  // tslint:disable-next-line no-unnecessary-generics
+  options?: RenderOptions<V, S>,
   configure?: ConfigurationCallback<V>,
 ): RenderResult