feat(screen): add screen export from DTL + Update deps (#121)

* Bump versions

* Add warning on veevalidate 2.X usage

* Use newest jest-dom import syntax

* Fix formatting

.github/ISSUE_TEMPLATE/bug_report.md

@@ -20,11 +20,9 @@ assignees: ''
   repository instead. Thanks :)
 --->
 
-**Describe the bug**
-A clear and concise description of what the bug is.
+**Describe the bug** A clear and concise description of what the bug is.
 
-**To Reproduce**
-Steps to reproduce the behavior:
+**To Reproduce** Steps to reproduce the behavior:
 
 <!-- Please try to provide a working demo using Codesandbox, a GitHub repo or similar! -->
 

.prettierrc.js

@@ -1,5 +1,11 @@
 module.exports = {
-  proseWrap: 'always',
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
   semi: false,
   singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: false,
+  jsxBracketSameLine: false,
+  proseWrap: 'always',
 }

README.md

@@ -46,7 +46,7 @@
   - [More examples](#more-examples)
 - [Docs](#docs)
 - [Typings](#typings)
-- [ESLint](#eslint-support)
+- [ESLint support](#eslint-support)
 - [License](#license)
 - [Contributors](#contributors)
 
@@ -137,13 +137,14 @@ Feel free to contribute with more examples!
 
 ## Typings
 
-The TypeScript type definitions are in the
-[DefinitelyTyped repo][types]
-and bundled with Vue Testing Library.
+The TypeScript type definitions are in the [DefinitelyTyped repo][types] and
+bundled with Vue Testing Library.
 
 ## ESLint support
 
-If you want to lint test files that use Vue Testing Library, you can use the official plugin: [eslint-plugin-testing-library](https://github.com/Belco90/eslint-plugin-testing-library).
+If you want to lint test files that use Vue Testing Library, you can use the
+official plugin:
+[eslint-plugin-testing-library](https://github.com/Belco90/eslint-plugin-testing-library).
 
 ## License
 

package.json

@@ -37,27 +37,27 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "@testing-library/dom": "^6.0.0",
+    "@babel/runtime": "^7.8.4",
+    "@testing-library/dom": "^6.13.0",
     "@types/testing-library__vue": "*",
-    "@vue/test-utils": "^1.0.0-beta.29"
+    "@vue/test-utils": "^1.0.0-beta.31"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@testing-library/jest-dom": "^4.0.0",
-    "axios": "^0.19.0",
-    "eslint-plugin-vue": "^5.2.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@testing-library/jest-dom": "^5.1.1",
+    "axios": "^0.19.2",
+    "eslint-plugin-vue": "^6.2.1",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^1.7.0",
+    "kcd-scripts": "^5.3.0",
     "lodash.merge": "^4.6.2",
-    "vee-validate": "^2.2.13",
-    "vue": "^2.6.10",
-    "vue-i18n": "^8.13.0",
-    "vue-jest": "^3.0.4",
-    "vue-router": "^3.1.2",
-    "vue-template-compiler": "^2.6.10",
-    "vuetify": "^2.0.19",
-    "vuex": "^3.1.1"
+    "vee-validate": "^2.2.15",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.15.4",
+    "vue-jest": "^4.0.0-beta.2",
+    "vue-router": "^3.1.6",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify": "^2.2.15",
+    "vuex": "^3.1.2"
   },
   "peerDependencies": {
     "vue": "^2.6.10",

src/__tests__/auto-cleanup.js

@@ -1,5 +1,5 @@
 import {render} from '@testing-library/vue'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 // This just verifies that by importing VTL in an environment which supports
 // afterEach (like jest) we'll get automatic cleanup between tests.

src/__tests__/axios-mock.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import axiosMock from 'axios'
 import {render, fireEvent} from '@testing-library/vue'
 import Component from './components/Fetch.vue'

src/__tests__/directive.js

@@ -1,5 +1,5 @@
 import {render} from '@testing-library/vue'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {uppercaseDirective} from './directives/uppercase-directive'
 import Directive from './components/Directive'
 

src/__tests__/disappearance.js

@@ -1,6 +1,6 @@
 import {render, waitForElementToBeRemoved} from '@testing-library/vue'
 import Disappearance from './components/Disappearance'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 test('waits for the data to be loaded', async () => {
   const {getByText, queryByText, queryByTestId} = render(Disappearance)

src/__tests__/form.js

@@ -1,5 +1,5 @@
 import {render, fireEvent} from '@testing-library/vue'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import Form from './components/Form'
 
 // In this test we showcase several ways of targetting DOM elements.

src/__tests__/render.js

@@ -1,5 +1,5 @@
 import {render} from '@testing-library/vue'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 test('baseElement defaults to document.body', () => {
   const {baseElement} = render({template: '<div />'})

src/__tests__/select.js

@@ -1,5 +1,5 @@
 import {render, fireEvent} from '@testing-library/vue'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import Select from './components/Select'
 
 // In this test file we showcase several ways to interact with a Select element.

src/__tests__/simple-button.js

@@ -1,6 +1,6 @@
 import {render, fireEvent} from '@testing-library/vue'
 import Button from './components/Button'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 test('renders button with text', () => {
   const text = "Click me; I'm sick"

src/__tests__/slots.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {render} from '@testing-library/vue'
 import Card from './components/Card'
 

src/__tests__/stopwatch.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {render, wait, fireEvent} from '@testing-library/vue'
 import StopWatch from './components/StopWatch.vue'
 

src/__tests__/update-props.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {render} from '@testing-library/vue'
 import NumberDisplay from './components/NumberDisplay.vue'
 

src/__tests__/validate-plugin.js

@@ -1,5 +1,6 @@
+// Notice this example is using vee-validate v2.X
 import VeeValidate from 'vee-validate'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import {render, fireEvent} from '@testing-library/vue'
 import Validate from './components/Validate'

src/__tests__/visibility.js

@@ -1,5 +1,5 @@
 import {render, fireEvent} from '@testing-library/vue'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import Collapsible from './components/Collapsible'
 
 // Using the query `getByText` here is completely right because

src/__tests__/vue-i18n.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {render, fireEvent} from '@testing-library/vue'
 import Vuei18n from 'vue-i18n'
 import Translations from './components/Translations'

src/__tests__/vue-router.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {render, fireEvent} from '@testing-library/vue'
 
 import App from './components/Router/App.vue'

src/__tests__/vueI18n.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {render, fireEvent} from '@testing-library/vue'
 import Vuei18n from 'vue-i18n'
 import VueI18n from './components/VueI18n'

src/__tests__/vuetify.js

@@ -13,7 +13,7 @@ Vue.use(Vuetify)
 // Custom render wrapper 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.
-export const renderWithVuetify = (component, options, callback) => {
+const renderWithVuetify = (component, options, callback) => {
   return render(
     // anonymous component
     {

src/__tests__/vuex.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {render, fireEvent} from '@testing-library/vue'
 
 import VuexTest from './components/Store/VuexTest'