findBy* retry-ability when multiple elements found

cypress/fixtures/test-app/index.html

@@ -85,6 +85,13 @@ <h2>*AllByText</h2>
     <button onclick="this.innerText = 'Jackie Kicked'">Jackie Chan 1</button>
     <button onclick="this.innerText = 'Jackie Kicked'">Jackie Chan 2</button>
   </section>
+  <section>
+    <h2>Remove element from DOM delayed</h2>
+    <ul>
+      <li>List Item</li>
+      <li>List Item <button onclick="li = this.parentElement; setTimeout(function() { li.remove(); }, 100)">Remove Parent</button></li>
+    </ul>
+  </section>
   <section>
     <h2>*ByText on another page</h2>
     <a onclick='setTimeout(function() { window.location = "/next-page.html"; }, 100);'>Next Page</a>

cypress/integration/find.spec.js

@@ -89,6 +89,11 @@ describe('find* dom-testing-library commands', () => {
     cy.findByText('Non-existing Button Text', {timeout: 100}).should('not.exist')
   })
 
+  it('findByText retry if multiple elements found', () => {
+    cy.findByText('Remove Parent').click()
+    cy.findByText('List Item', {timeout: 200}).should('exist')
+  })
+
   it('findByText within', () => {
     cy.get('#nested').within(() => {
       cy.findByText('Button Text 2').click()
@@ -118,12 +123,12 @@ describe('find* dom-testing-library commands', () => {
   })
 
   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\`)).`
+    const errorMessage = `Timed out retrying: Expected to find element: 'findByText(/^Button Text/i)', but never found it.`
     cy.on('fail', err => {
       expect(err.message).to.eq(errorMessage)
     })
 
-    cy.findByText(/^Button Text/i)
+    cy.findByText(/^Button Text/i, { timeout: 100 })
   })
 })
 

src/index.js

@@ -75,8 +75,21 @@ function createCommand(queryName, implementationName) {
         .window({log: false})
         .then((thenArgs) => {
           const getValue = () => {
-            const value = commandImpl(thenArgs.document);
-            const result = Cypress.$(value);
+            let result;
+            try {
+              const value = commandImpl(thenArgs.document);
+              result = Cypress.$(value);
+            }
+            catch (err) {
+              // Only catch exceptions for multiple elements found, which we will continue to retry
+              if (/Found multiple elements/.test(err.message)) {
+                // Cannot delete after, because consoleProps() is called on the log object before I get the chance
+                consoleProps.CaughtError = err;
+                result = Cypress.$();
+              } else {
+                throw err; // Throw everything else
+              }
+            }
 
             // Overriding the selector of the jquery object because it's displayed in the long message of .should('exist') failure message
             // Hopefully it makes it clearer, because I find the normal response of "Expected to find element '', but never found it" confusing
@@ -103,16 +116,7 @@ function createCommand(queryName, implementationName) {
             return getValue();
           }
 
-          return resolveValue()
-            .then(subject => {
-
-              // Remove the error that occurred because it is irrelevant now
-              if (consoleProps.error) {
-                delete consoleProps.error;
-              }
-
-              return subject;
-            })
+          return resolveValue();
         })
     },
   }