feat: Add types for Vue 3 (#180)

* Add basic types

* Rename main file to properly get types

* Fix import statement

* Fix compiler options lib

* Extract temporary-defined types to its own file

* Remove duplicate test

* Fix link

* Improve tests

* Remove unnecessary chars

* Add support for file inputs

* Update deps

* Fix rerender typing test

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

* Update deps

Author: afontcu

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+  },
   extends: [
     './node_modules/kcd-scripts/eslint.js',
     'plugin:vue/vue3-recommended',

README.md

@@ -171,8 +171,7 @@ light-weight, simple, and understandable.
 
 ## Typings
 
-The TypeScript type definitions are in the [DefinitelyTyped repo][types] and
-bundled with Vue Testing Library.
+The TypeScript type definitions are in the [types][types-directory] directory.
 
 ## ESLint support
 
@@ -247,7 +246,6 @@ instead of filing an issue on GitHub.
 [license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
 [discord]: https://testing-library.com/discord
 [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=flat-square
-[types]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__vue
 [jest-dom]: https://github.com/testing-library/jest-dom
 [which-query]: https://testing-library.com/docs/guide-which-query
 [guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
@@ -261,10 +259,11 @@ instead of filing an issue on GitHub.
 [add-issue-bug]: https://github.com/testing-library/vue-testing-library/issues/new?assignees=&labels=bug&template=bug_report.md&title=
 [add-issue]: (https://github.com/testing-library/vue-testing-library/issues/new)
 
+[types-directory]: https://github.com/testing-library/vue-testing-library/blob/master/types
 [test-directory]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__
 [vuex-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js
 [vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-router.js
 [vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/validate-plugin.js
-[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vueI18n.js
+[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-i18n.js
 [vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuetify.js
 <!-- prettier-ignore-end -->

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: {

package.json

@@ -2,7 +2,8 @@
   "name": "@testing-library/vue",
   "version": "0.0.0-semantically-released",
   "description": "Simple and complete Vue DOM testing utilities that encourage good testing practices.",
-  "main": "dist/vue-testing-library.js",
+  "main": "dist/index.js",
+  "types": "types/index.d.ts",
   "scripts": {
     "format": "kcd-scripts format",
     "build": "kcd-scripts build",
@@ -16,6 +17,7 @@
     "node": ">10.18"
   },
   "files": [
+    "types",
     "dist",
     "cleanup-after-each.js"
   ],
@@ -45,36 +47,38 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.12.1",
-    "@testing-library/dom": "^7.26.3",
-    "@vue/test-utils": "^2.0.0-beta.10",
+    "@testing-library/dom": "^7.28.1",
+    "@vue/test-utils": "^2.0.0-beta.12",
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/user-event": "^12.2.2",
-    "@vue/compiler-sfc": "^3.0.2",
+    "@testing-library/user-event": "^12.4.0",
+    "@types/estree": "0.0.45",
+    "@vue/compiler-sfc": "^3.0.4",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "axios": "^0.20.0",
+    "dtslint": "^4.0.6",
     "eslint-plugin-vue": "^7.1.0",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^7.0.3",
+    "kcd-scripts": "^7.5.1",
     "msw": "^0.21.3",
     "portal-vue": "^2.1.7",
     "typescript": "^4.1.2",
-    "vee-validate": "^4.0.0-beta.16",
-    "vue": "^3.0.2",
+    "vee-validate": "^4.0.2",
+    "vue": "^3.0.4",
     "vue-apollo": "^3.0.5",
     "vue-i18n": "^9.0.0-beta.6",
-    "vue-jest": "^5.0.0-alpha.5",
-    "vue-router": "^4.0.0-rc.1",
-    "vuetify": "^2.3.16",
-    "vuex": "^4.0.0-rc.1"
+    "vue-jest": "^5.0.0-alpha.7",
+    "vue-router": "^4.0.0-rc.6",
+    "vuetify": "^2.3.19",
+    "vuex": "^4.0.0-rc.2"
   },
   "peerDependencies": {
     "vue": ">= 3",

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

src/__tests__/auto-cleanup.js

@@ -1,4 +1,4 @@
-import {render} from '@testing-library/vue'
+import {render} from '..'
 import '@testing-library/jest-dom'
 
 // This verifies that by importing VTL in an environment which supports

src/__tests__/axios-mock.js

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 import axiosMock from 'axios'
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent} from '..'
 import Component from './components/Fetch.vue'
 
 test('mocks an API call when load-greeting is clicked', async () => {

src/__tests__/cleanup-throw.js

@@ -1,6 +1,6 @@
 test.todo('check if this test still makes sense')
 
-// import {render, cleanup} from '@testing-library/vue'
+// import {render, cleanup} from '..'
 // import {nextTick} from 'vue'
 
 // test('cleanup re-throws errors from async lifecycle hooks', async () => {

src/__tests__/components/Translations.vue

@@ -1,9 +1,9 @@
 <template>
-    <h2>{{ $t('hello') }}</h2>
-    <select v-model="$i18n.locale">
-      <option value="en">English</option>
-      <option value="ja">Japanese</option>
-    </select>
+  <h2>{{ $t('hello') }}</h2>
+  <select v-model="$i18n.locale">
+    <option value="en">English</option>
+    <option value="ja">Japanese</option>
+  </select>
 </template>
 
 <script>