Move querying logic to dom-testing-library

Author: dfcook

README.md

@@ -22,7 +22,8 @@ It's primary guiding principle is:
 
 The more your tests resemble the way your software is used, the more confidence they can give you.
 
-The intention is to closely track react-test-utils and its capabilities. As such significant parts of its code are repeated here verbatim. All credit for this must go to Kent C Dodds and the other contributors to that project.
+The intention is to closely track react-test-utils and its capabilities. To this end it uses the marvellous `dom-testing-utils` library for querying the DOM.
+
 
 ## Installation
 

package-lock.json

@@ -25,12 +25,12 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
+    "dom-testing-library": "^1.0.0",
     "@vue/test-utils": "^1.0.0-beta.12",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.16",
-    "vuex": "^3.0.1",
-    "wait-for-expect": "^0.4.0"
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "axios": "^0.18.0",

package.json

@@ -1,9 +1,8 @@
 import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
-import waitForExpect from 'wait-for-expect'
 import Simulate from './Simulate'
-import * as queries from './queries'
+import { wait, queries } from 'dom-testing-library'
 
 function render(TestComponent, { props = null, store = null, routes = null } = {}, configurationCb) {
   const localVue = createLocalVue()
@@ -34,7 +33,7 @@ function render(TestComponent, { props = null, store = null, routes = null } = {
 
   const wrapperHelpers = Object.entries(queries).reduce(
     (helpers, [key, fn]) => {
-      helpers[key] = fn.bind(null, wrapper)
+      helpers[key] = fn.bind(null, wrapper.element)
       return helpers
     },
     {},
@@ -50,8 +49,4 @@ function render(TestComponent, { props = null, store = null, routes = null } = {
   }
 }
 
-function wait(callback = () => {}, {timeout = 4500, interval = 50} = {}) {
-  return waitForExpect(callback, timeout, interval)
-}
-
 export { render, wait, Simulate }

src/extend-expect.js

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="loading">
-    Loading...
-  </div>
-  <div v-else data-testid="message">
-    Loaded this message: {{ data.returnedMessage }}
+  <div>
+    <div v-if="loading">Loading...</div>
+    <div v-else data-testid="message">
+      Loaded this message: {{ data.returnedMessage }}
+    </div>
   </div>
 </template>
 

src/index.js

@@ -2,7 +2,7 @@ import { render, wait } from '../../src'
 import EndToEnd from './components/EndToEnd'
 
 test('it waits for the data to be loaded', async () => {
-  const {queryByText, queryByTestId} = render(EndToEnd)
+  const { html, queryByText, queryByTestId } = render(EndToEnd)
 
   expect(queryByText('Loading...')).toBeTruthy()
 

src/jest-extensions.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import VeeValidate from 'vee-validate'
 
 import { render, Simulate, wait } from '../../src'
-import '../../src/extend-expect'
 import Validate from './components/Validate'
 
 test('can validate using plugin', async () => {
@@ -15,5 +14,5 @@ test('can validate using plugin', async () => {
 
   await wait()
 
-  expect(queryByTestId('username-errors')).toBeInTheDOM()
+  expect(queryByTestId('username-errors').textContent).toBe('The username field is required.')
 })