fix: element error delegation (#777)

Author: Tismas

src/__tests__/wait-for.js

@@ -1,4 +1,5 @@
 import {waitFor} from '../'
+import {configure, getConfig} from '../config'
 import {renderIntoDocument} from './helpers/test-utils'
 
 test('waits callback to not throw an error', async () => {
@@ -125,3 +126,22 @@ test('timeout logs a pretty DOM', async () => {
     </html>"
   `)
 })
+
+test('should delegate to config.getElementError', async () => {
+  const originalConfig = getConfig()
+  const elementError = new Error('Custom element error')
+  const getElementError = jest.fn().mockImplementation(() => elementError)
+  configure({getElementError})
+
+  renderIntoDocument(`<div id="pretty">how pretty</div>`)
+  const error = await waitFor(
+    () => {
+      throw new Error('always throws')
+    },
+    {timeout: 1},
+  ).catch(e => e)
+
+  expect(getElementError).toBeCalledTimes(1)
+  expect(error.message).toMatchInlineSnapshot(`"Custom element error"`)
+  configure(originalConfig)
+})

src/query-helpers.js

@@ -1,4 +1,3 @@
-import {prettyDOM} from './pretty-dom'
 import {getSuggestedQuery} from './suggestions'
 import {fuzzyMatches, matches, makeNormalizer} from './matches'
 import {waitFor} from './wait-for'
@@ -46,7 +45,9 @@ function makeSingleQuery(allQuery, getMultipleError) {
   return (container, ...args) => {
     const els = allQuery(container, ...args)
     if (els.length > 1) {
-      const elementStrings = els.map(element => prettyDOM(element)).join('\n\n')
+      const elementStrings = els
+        .map(element => getElementError(null, element).message)
+        .join('\n\n')
 
       throw getMultipleElementsFoundError(
         `${getMultipleError(container, ...args)}

src/wait-for.js

@@ -10,7 +10,6 @@ import {
   clearTimeout,
 } from './helpers'
 import {getConfig, runWithExpensiveErrorDiagnosticsDisabled} from './config'
-import {prettyDOM} from './pretty-dom'
 
 // This is so the stack trace the developer sees is one that's
 // closer to their code (because async stack traces are hard to follow).
@@ -27,7 +26,10 @@ function waitFor(
     stackTraceError,
     interval = 50,
     onTimeout = error => {
-      error.message = `${error.message}\n\n${prettyDOM(container)}`
+      error.message = getConfig().getElementError(
+        error.message,
+        container,
+      ).message
       return error
     },
     mutationObserverOptions = {