Merge branch 'next'

Author: afontcu

.babelrc

@@ -4,7 +4,8 @@ module.exports = {
   },
   extends: [
     './node_modules/kcd-scripts/eslint.js',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:testing-library/vue',
     'prettier',
   ],
   plugins: ['vue'],
@@ -17,8 +18,8 @@ module.exports = {
     'testing-library/prefer-screen-queries': 'off',
     'testing-library/no-manual-cleanup': 'off',
     'testing-library/no-await-sync-events': 'off',
-    'testing-library/await-fire-event': 'error',
     'testing-library/prefer-user-event': 'off',
     'testing-library/no-node-access': 'off',
+    'testing-library/await-fire-event': 'off',
   },
 }

.eslintrc.js

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

.github/workflows/validate.yml

@@ -1,5 +1,5 @@
 <div align="center">
-<h1>Vue Testing Library</h1>
+<h1>Vue Testing Library for Vue 3</h1>
 
 <br />
 
@@ -15,11 +15,6 @@
 <p>Simple and complete Vue.js testing utilities that encourage good testing practices.</p>
 
 <p>Vue Testing Library is a lightweight adapter built on top of <a href="https://github.com/testing-library/dom-testing-library/">DOM Testing Library</a> and <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a>.</p>
-  
-  
-<br />
-  
-  <p>If you're looking for the Vue 3 version of Vue Testing Library, check out the <a href="https://github.com/testing-library/vue-testing-library/tree/next">next</a> branch.</p>
 
 <br />
 
@@ -66,30 +61,29 @@
 This module is distributed via `npm` and should be installed as one of your
 project's `devDependencies`:
 
-If using Vue 2
-```
-npm install --save-dev @testing-library/vue@5
-```
-
-If using Vue 3
 ```
 npm install --save-dev @testing-library/vue
 ```
 
-This library has `peerDependencies` listings for `Vue` and
+This library has `peerDependencies` listings for `Vue 3` and
 `vue-template-compiler`.
 
-You may also be interested in installing `@testing-library/jest-dom` so you can
-use [the custom Jest matchers][jest-dom].
+You may also be interested in installing `jest-dom` so you can use [the custom
+Jest matchers][jest-dom].
+
+If you're using Vue 2, please install version 5 of the library:
+
+```
+npm install --save-dev @testing-library/vue@^5
+```
+
 
 ## A basic example
 
 ```html
 <template>
-  <div>
-    <p>Times clicked: {{ count }}</p>
-    <button @click="increment">increment</button>
-  </div>
+  <p>Times clicked: {{ count }}</p>
+  <button @click="increment">increment</button>
 </template>
 
 <script>
@@ -133,9 +127,9 @@ test('increments value on click', async () => {
 })
 ```
 
-> You might want to install [`@testing-library/jest-dom`][jest-dom] to add handy
-> assertions such as `.toBeInTheDocument()`. In the example above, you could
-> write `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
+> You might want to install [`jest-dom`][jest-dom] to add handy assertions such
+> as `.toBeInTheDocument()`. In the example above, you could write
+> `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
 
 > Using `byText` queries it's not the only nor the best way to query for
 > elements. Read [Which query should I use?][which-query] to discover
@@ -258,8 +252,8 @@ instead of filing an issue on GitHub.
 [npm-badge]: https://badge.fury.io/js/%40testing-library%2Fvue.svg
 [npm]: https://badge.fury.io/js/%40testing-library%2Fvue
 [license-badge]: https://img.shields.io/github/license/testing-library/vue-testing-library.svg
-[license]: https://github.com/testing-library/vue-testing-library/blob/main/LICENSE
-[discord]: https://discord.gg/testing-library
+[license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
+[discord]: https://testing-library.com/discord
 [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=flat-square
 [jest-dom]: https://github.com/testing-library/jest-dom
 [which-query]: https://testing-library.com/docs/guide-which-query
@@ -274,11 +268,11 @@ instead of filing an issue on GitHub.
 [add-issue-bug]: https://github.com/testing-library/vue-testing-library/issues/new?assignees=&labels=bug&template=bug_report.md&title=
 [add-issue]: (https://github.com/testing-library/vue-testing-library/issues/new)
 
-[types-directory]: https://github.com/testing-library/vue-testing-library/blob/main/types
-[test-directory]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__
-[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuex.js
-[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vue-router.js
-[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/validate-plugin.js
-[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/translations-vue-i18n.js
-[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuetify.js
+[types-directory]: https://github.com/testing-library/vue-testing-library/blob/master/types
+[test-directory]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__
+[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js
+[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-router.js
+[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/validate-plugin.js
+[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-i18n.js
+[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuetify.js
 <!-- prettier-ignore-end -->

README.md

@@ -0,0 +1,14 @@
+module.exports = {
+  sourceType: 'module',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+          esmodules: true,
+        },
+      },
+    ],
+  ],
+}

babel.config.js

@@ -4,19 +4,22 @@ const config = require('kcd-scripts/jest')
 module.exports = merge(config, {
   testEnvironment: 'jsdom',
   moduleFileExtensions: ['js', 'vue'],
-  moduleNameMapper: {
-    '@testing-library/vue': '<rootDir>/src/index.js',
-  },
   coverageDirectory: './coverage',
   collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-    '.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue2-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   testPathIgnorePatterns: [
-    '<rootDir>/node_modules',
+    '<rootDir>/node_modules/',
     '<rootDir>/src/__tests__/components',
     '<rootDir>/src/__tests__/directives',
   ],
+  moduleNameMapper: {
+    '@vue/apollo-composable': [
+      '<rootDir>/node_modules/@vue/apollo-composable/dist/index.js',
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!(@vue/apollo-composable)/)'],
 })

jest.config.js

@@ -11,14 +11,14 @@
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
-    "typecheck": "dtslint ./types/",
+    "typecheck": "tsd",
     "setup": "npm install && npm run validate -s"
   },
   "engines": {
-    "node": ">10.18"
+    "node": ">=12"
   },
   "files": [
-    "types/*.d.ts",
+    "types",
     "dist",
     "cleanup-after-each.js"
   ],
@@ -35,52 +35,51 @@
     "vue.js testing",
     "vue",
     "vue testing",
-    "vue.js 2",
-    "vue.js 2 testing",
-    "vue 2",
-    "vue 2 testing"
+    "vue.js 3",
+    "vue.js 3 testing",
+    "vue 3",
+    "vue 3 testing"
   ],
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.12.5",
-    "@testing-library/dom": "^7.26.6",
-    "@vue/test-utils": "^1.1.0"
+    "@babel/runtime": "^7.15.4",
+    "@testing-library/dom": "^8.5.0",
+    "@vue/test-utils": "^2.0.0-rc.18"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/estree": "0.0.46",
-    "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "@apollo/client": "^3.4.11",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/estree": "^0.0.50",
+    "@vue/apollo-composable": "^4.0.0-alpha.14",
+    "@vue/compiler-sfc": "^3.2.12",
     "apollo-boost": "^0.4.9",
-    "apollo-cache-inmemory": "^1.6.6",
-    "axios": "^0.21.1",
-    "dtslint": "^4.0.5",
-    "eslint": "^7.13.0",
-    "eslint-plugin-vue": "^7.6.0",
-    "graphql": "^15.3.0",
-    "graphql-tag": "^2.11.0",
-    "isomorphic-unfetch": "^3.0.0",
+    "axios": "^0.20.0",
+    "element-plus": "^1.3.0-beta.1",
+    "eslint-plugin-vue": "^8.2.0",
+    "graphql": "^15.5.3",
+    "graphql-tag": "^2.12.4",
+    "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^11.1.0",
+    "kcd-scripts": "^10.0.0",
     "lodash.merge": "^4.6.2",
-    "msw": "^0.35.0",
-    "portal-vue": "^2.1.7",
-    "semver": "^7.3.5",
-    "typescript": "^4.0.5",
-    "vee-validate": "^2.2.15",
-    "vue": "^2.6.12",
-    "vue-apollo": "^3.0.4",
-    "vue-i18n": "^8.21.1",
-    "vue-router": "^3.4.9",
-    "vue-template-compiler": "^2.6.12",
-    "vuetify": "^2.3.17",
-    "vuex": "^3.5.1"
+    "msw": "^0.21.3",
+    "tsd": "^0.19.1",
+    "typescript": "^4.4.3",
+    "vee-validate": "^4.3.5",
+    "vue": "^3.2.12",
+    "vue-apollo": "^3.0.5",
+    "vue-i18n": "^9.2.0-beta.26",
+    "vue-jest": "^5.0.0-alpha.10",
+    "vue-router": "^4.0.3",
+    "vuetify": "^v3.0.0-alpha.12",
+    "vuex": "^4.0.0"
   },
   "peerDependencies": {
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "@vue/compiler-sfc": ">= 3",
+    "vue": ">= 3"
   },
   "husky": {
     "hooks": {

package.json

@@ -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
 })
 

src/__tests__/about-vue-router-mocha.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>

src/__tests__/auto-cleanup-skip.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'
 

src/__tests__/auto-cleanup.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()
 })