feat: add more helpful debugging information to queries

README.md

@@ -109,24 +109,49 @@ To show some simple examples (from
 [cypress/integration/query.spec.js](cypress/integration/query.spec.js) or [cypress/integration/find.spec.js](cypress/integration/find.spec.js)):
 
 ```javascript
-cy.queryByText('Button Text').should('exist')
-cy.queryByText('Non-existing Button Text').should('not.exist')
-cy.queryByLabelText('Label text', {timeout: 7000}).should('exist')
+cy.queryAllByText('Button Text').should('exist')
+cy.queryAllByText('Non-existing Button Text').should('not.exist')
+cy.queryAllByLabelText('Label text', {timeout: 7000}).should('exist')
 cy.findAllByText('Jackie Chan').click({multiple: true})
+
+// findAllByText _inside_ a form element
 cy.get('form').within(() => {
-  cy.findByText('Button Text').should('exist')
+  cy.findAllByText('Button Text').should('exist')
 })
 cy.get('form').then(subject => {
-  cy.findByText('Button Text', {container: subject}).should('exist')
+  cy.findAllByText('Button Text', {container: subject}).should('exist')
 })
+cy.get('form').findAllByText('Button Text').should('exist')
 ```
 
+### Differences DOM Testing Library
+
 `Cypress Testing Library` supports both jQuery elements and DOM nodes. This is
 necessary because Cypress uses jQuery elements, while `DOM Testing Library`
 expects DOM nodes. When you pass a jQuery element as `container`, it will get
 the first DOM node from the collection and use that as the `container` parameter
 for the `DOM Testing Library` functions.
 
+`get*` queries are disabled. `find*` queries do not use the Promise API of
+`DOM Testing Library`, but instead forward to the `get*` queries and use Cypress'
+built-in retryability using error messages from `get*` APIs to forward as error
+messages if a query fails. `query*` also uses `get*` APIs, but disables retryability.
+
+`findBy*` is less useful in Cypress compared to `findAllBy*`. If you intend to limit
+to only 1 element, the following will work:
+
+```javascript
+cy.findAllByText('Some Text').should('have.length', 1)
+```
+
+Cypress handles actions when there is only one element found. For example, the following
+will work without having to limit to only 1 returned element. The `cy.click` will
+automatically fail if more than 1 element is returned by the `findAllByText`:
+
+```javascript
+cy.findAllByText('Some Text').click()
+```
+
 ## Other Solutions
 
 I'm not aware of any, if you are please [make a pull request][prs] and add it

cypress/fixtures/test-app/index.html

@@ -29,6 +29,9 @@ <h2>*ByLabel and *ByPlaceholder</h2>
 
     <label for="by-text-input-2">Label 2</label>
     <input type="text" placeholder="Input 2" id="by-text-input-2" />
+
+    <p>Intentionally inaccessible label for error checking</p>
+    <label>Label 3</label>
   </section>
   <section>
     <h2>*ByText</h2>
@@ -89,6 +92,24 @@ <h2>*AllByText</h2>
     <h2>*ByText on another page</h2>
     <a onclick='setTimeout(function() { window.location = "/cypress/fixtures/test-app/next-page.html"; }, 100);'>Next Page</a>
   </section>
+  <section>
+    <h2>Eventual existence</h2>
+    <button id="eventually-will-exist"></button>
+    <script>
+      setTimeout(() => {
+        document.querySelector('#eventually-will-exist').innerHTML = 'Eventually Exists'
+      }, 500)
+    </script>
+  </section>
+  <section>
+    <h2>Eventual non-existence</h2>
+    <button id="eventually-will-not-exist">Eventually not exists</button>
+    <script>
+      setTimeout(() => {
+        document.querySelector('#eventually-will-not-exist').remove()
+      }, 500)
+    </script>
+  </section>
 <!-- Prettier unindents the script tag below -->
 <script>
 document

cypress/integration/find.spec.js

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines-per-function */
+
 describe('find* dom-testing-library commands', () => {
   beforeEach(() => {
     cy.visit('cypress/fixtures/test-app/')
@@ -86,22 +88,50 @@ describe('find* dom-testing-library commands', () => {
 
   /* Test the behaviour around these queries */
 
+  it('findByText should handle non-existence', () => {
+    cy.findByText('Does Not Exist')
+      .should('not.exist')
+  })
+
+  it('findByText should handle eventual existence', () => {
+    cy.findByText('Eventually Exists')
+      .should('exist')
+  })
+
+  it('findByText should handle eventual non-existence', () => {
+    cy.findByText('Eventually Not exists')
+      .should('not.exist')
+  })
+
   it("findByText with should('not.exist')", () => {
     cy.findAllByText(/^Button Text \d$/).should('exist')
     cy.findByText('Non-existing Button Text', {timeout: 100}).should(
       'not.exist',
     )
   })
 
+  it('findByText with a previous subject', () => {
+    cy.get('#nested')
+      .findByText('Button Text 1', { fallbackToPreviousFunctionality: false })
+      .should('not.exist')
+    cy.get('#nested')
+      .findByText('Button Text 2')
+      .should('exist')
+  })
+
   it('findByText within', () => {
     cy.get('#nested').within(() => {
-      cy.findByText('Button Text 2').click()
+      cy.findByText('Button Text 1').should('not.exist')
+      cy.findByText('Button Text 2').should('exist')
     })
   })
 
   it('findByText in container', () => {
-    return cy.get('#nested').then(subject => {
-      cy.findByText(/^Button Text/, {container: subject}).click()
+    // NOTE: Cypress' `then` doesn't actually return a promise
+    // eslint-disable-next-line jest/valid-expect-in-promise
+    cy.get('#nested').then(subject => {
+      cy.findByText('Button Text 1', {container: subject}).should('not.exist')
+      cy.findByText('Button Text 2', {container: subject}).should('exist')
     })
   })
 
@@ -110,23 +140,87 @@ describe('find* dom-testing-library commands', () => {
     cy.findByText('New Page Loaded').should('exist')
   })
 
+  it('findByText should set the Cypress element to the found element', () => {
+    // This test is a little strange since snapshots show what element
+    // is selected, but snapshots themselves don't give access to those
+    // elements. I had to make the implementation specific so that the `$el`
+    // is the `subject` when the log is added and the `$el` is the `value`
+    // when the log is changed. It would be better to extract the `$el` from
+    // each snapshot
+
+    cy.on('log:changed', (attrs, log) => {
+      if (log.get('name') === 'findByText') {
+        expect(log.get('$el')).to.have.text('Button Text 1')
+      }
+    })
+
+    cy.findByText('Button Text 1')
+  })
+
   it('findByText should error if no elements are found', () => {
     const regex = /Supercalifragilistic/
-    const errorMessage = `Timed out retrying: Expected to find element: 'findByText(${regex})', but never found it.`
+    const errorMessage = `Unable to find an element with the text: /Supercalifragilistic/`
+    cy.on('fail', err => {
+      expect(err.message).to.contain(errorMessage)
+    })
+
+    cy.findByText(regex, {timeout: 100}) // Every find query is implicitly a `.should('exist')
+  })
+
+  it('findByText should default to Cypress non-existence error message', () => {
+    const errorMessage = `Expected <button> not to exist in the DOM, but it was continuously found.`
+    cy.on('fail', err => {
+      expect(err.message).to.contain(errorMessage)
+    })
+
+    cy.findByText('Button Text 1', {timeout: 100})
+      .should('not.exist')
+  })
+
+  it('findByLabelText should forward useful error messages from @testing-library/dom', () => {
+    const errorMessage = `Found a label with the text of: Label 3, however no form control was found associated to that label.`
     cy.on('fail', err => {
-      expect(err.message).to.eq(errorMessage)
+      expect(err.message).to.contain(errorMessage)
     })
 
-    cy.findByText(regex, {timeout: 100}) // Doesn't explicitly need .should('exist') if it's the last element?
+    cy.findByLabelText('Label 3', {timeout: 100}).should('exist')
   })
 
   it('findByText finding multiple items should error', () => {
     const errorMessage = `Found multiple elements with the text: /^Button Text/i\n\n(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).`
     cy.on('fail', err => {
-      expect(err.message).to.eq(errorMessage)
+      expect(err.message).to.contain(errorMessage)
     })
 
-    cy.findByText(/^Button Text/i)
+    cy.findByText(/^Button Text/i, {timeout: 100})
+  })
+
+  it('findByText should not break existing code', () => {
+    cy.window()
+      .findByText('Button Text 1')
+      .should('exist')
+  })
+
+  it('findByText should show as a parent command if it starts a chain', () => {
+    const assertLog = (attrs, log) => {
+      if(log.get('name') === 'findByText') {
+        expect(log.get('type')).to.equal('parent')
+        cy.off('log:added', assertLog)
+      }
+    }
+    cy.on('log:added', assertLog)
+    cy.findByText('Button Text 1')
+  })
+
+  it('findByText should show as a child command if it continues a chain', () => {
+    const assertLog = (attrs, log) => {
+      if(log.get('name') === 'findByText') {
+        expect(log.get('type')).to.equal('child')
+        cy.off('log:added', assertLog)
+      }
+    }
+    cy.on('log:added', assertLog)
+    cy.get('body').findByText('Button Text 1')
   })
 })
 

cypress/integration/query.spec.js

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines-per-function */
+
 describe('query* dom-testing-library commands', () => {
   beforeEach(() => {
     cy.visit('cypress/fixtures/test-app/')
@@ -95,12 +97,30 @@ describe('query* dom-testing-library commands', () => {
     })
   })
 
+  it('queryByText should set the Cypress element to the found element', (done) => {
+    // This test is a little strange since snapshots show what element
+    // is selected, but snapshots themselves don't give access to those
+    // elements. I had to make the implementation specific so that the `$el`
+    // is the `subject` when the log is added and the `$el` is the `value`
+    // when the log is changed. It would be better to extract the `$el` from
+    // each snapshot
+
+    cy.on('log:changed', (attrs, log) => {
+      if (log.get('name') === 'queryByText') {
+        expect(log.get('$el')).to.have.text('Button Text 1')
+        done()
+      }
+    })
+
+    cy.queryByText('Button Text 1')
+  })
+
   it('query* will return immediately, and never retry', () => {
     cy.queryByText('Next Page').click()
 
-    const errorMessage = `expected 'queryByText(\`New Page Loaded\`)' to exist in the DOM`
+    const errorMessage = `Unable to find an element with the text: New Page Loaded.`
     cy.on('fail', err => {
-      expect(err.message).to.eq(errorMessage)
+      expect(err.message).to.contain(errorMessage)
     })
 
     cy.queryByText('New Page Loaded', { timeout: 300 }).should('exist')
@@ -129,23 +149,42 @@ describe('query* dom-testing-library commands', () => {
       .and('not.exist')
   })
 
-  it('queryAllByText with a should(\'exist\') must provide selector error message', () => {
+  it('queryAllByText should forward existence error message from @testing-library/dom', () => {
     const text = 'Supercalifragilistic'
-    const errorMessage = `expected 'queryAllByText(\`${text}\`)' to exist in the DOM`
+    const errorMessage = `Unable to find an element with the text: Supercalifragilistic.`
+    cy.on('fail', err => {
+      expect(err.message).to.contain(errorMessage)
+    })
+
+    cy.queryAllByText(text, {timeout: 100}).should('exist')
+  })
+
+  it('queryByLabelText should forward useful error messages from @testing-library/dom', () => {
+    const errorMessage = `Found a label with the text of: Label 3, however no form control was found associated to that label.`
+    cy.on('fail', err => {
+      expect(err.message).to.contain(errorMessage)
+    })
+
+    cy.queryByLabelText('Label 3', {timeout: 100}).should('exist')
+  })
+
+  it('queryAllByText should default to Cypress non-existence error message', () => {
+    const errorMessage = `Expected <button> not to exist in the DOM, but it was continuously found.`
     cy.on('fail', err => {
-      expect(err.message).to.eq(errorMessage)
+      expect(err.message).to.contain(errorMessage)
     })
 
-    cy.queryAllByText(text, {timeout: 100}).should('exist') // NOT POSSIBLE WITH QUERYALL?
+    cy.queryAllByText('Button Text 1', {timeout: 100})
+      .should('not.exist')
   })
 
   it('queryByText finding multiple items should error', () => {
-    const errorMessage = `Found multiple elements with the text: /^queryByText/i\n\n(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).`
+    const errorMessage = `Found multiple elements with the text: /^Button Text/i\n\n(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).`
     cy.on('fail', err => {
-      expect(err.message).to.eq(errorMessage)
+      expect(err.message).to.contain(errorMessage)
     })
 
-    cy.queryByText(/^queryByText/i)
+    cy.queryByText(/^Button Text/i)
   })
 })
 

package.json

@@ -15,7 +15,7 @@
     "test:cypress:run": "cypress run",
     "test:cypress:open": "cypress open",
     "test:cypress": "npm run test:cypress:run",
-    "test:cypress:dev": "test:cypress:open",
+    "test:cypress:dev": "npm run test:cypress:open",
     "validate": "kcd-scripts validate build,lint,test",
     "setup": "npm install && npm run validate -s"
   },

src/__tests__/add-commands.js

@@ -11,6 +11,7 @@ test('adds commands to Cypress', () => {
   commands.forEach(({name}, index) => {
     expect(addMock.mock.calls[index]).toMatchObject([
       name,
+      {},
       // We get a new function that is `command.bind(null, cy)` i.e. global `cy` passed into the first argument.
       // The commands themselves will be tested separately in the Cypress end-to-end tests.
       expect.any(Function),

src/add-commands.js

@@ -1,7 +1,7 @@
 import {commands} from './'
 
-commands.forEach(({name, command}) => {
-  Cypress.Commands.add(name, command)
+commands.forEach(({name, command, options = {}}) => {
+  Cypress.Commands.add(name, options, command)
 })
 
 /* global Cypress */