Merge branch 'feature/suggestions' of https://github.com/benmonro/dom-testing-library into feature/suggestions

Author: benmonro

.all-contributorsrc

@@ -954,6 +954,16 @@
         "code",
         "test"
       ]
+    },
+    {
+      "login": "pelotom",
+      "name": "Tom Crockett",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/128019?v=4",
+      "profile": "https://twitter.com/pelotom",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ],
   "repoHost": "https://github.com"

README.md

@@ -255,6 +255,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/Lagily"><img src="https://avatars2.githubusercontent.com/u/42535205?v=4" width="100px;" alt=""/><br /><sub><b>Ali Nasserzadeh</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Lagily" title="Code">💻</a></td>
     <td align="center"><a href="https://darekkay.com"><img src="https://avatars0.githubusercontent.com/u/3101914?v=4" width="100px;" alt=""/><br /><sub><b>Darek Kay</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=darekkay" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Lukas-Kullmann"><img src="https://avatars0.githubusercontent.com/u/387547?v=4" width="100px;" alt=""/><br /><sub><b>Lukas</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Lukas-Kullmann" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=Lukas-Kullmann" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://twitter.com/pelotom"><img src="https://avatars2.githubusercontent.com/u/128019?v=4" width="100px;" alt=""/><br /><sub><b>Tom Crockett</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=pelotom" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=pelotom" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

src/__tests__/role.js

@@ -343,6 +343,12 @@ Here are the accessible roles:
 `)
 })
 
+test('has no useful error message in findBy', async () => {
+  const {findByRole} = render(`<li />`)
+
+  await expect(findByRole('option', {timeout: 1})).rejects.toThrow('Unable to find role="option"')
+})
+
 test('explicit role is most specific', () => {
   const {getByRole} = renderIntoDocument(
     `<button role="tab" aria-label="my-tab" />`,

src/__tests__/wait-for-element.js

@@ -22,7 +22,7 @@ test('waits for element to appear in the document', async () => {
   expect(console.warn.mock.calls).toMatchInlineSnapshot(`
     Array [
       Array [
-        "\`waitForElement\` has been deprecated. Use a \`find*\` query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use \`waitFor\` instead (it's the same API, so you can find/replace): https://testing-library.com/docs/dom-testing-library/api-async#waitfor",
+        "\`waitForElement\` has been deprecated. Use a \`find*\` query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use \`waitFor\` instead: https://testing-library.com/docs/dom-testing-library/api-async#waitfor",
       ],
     ]
   `)

src/config.js

@@ -30,6 +30,16 @@ let config = {
     error.name = 'TestingLibraryElementError'
     return error
   },
+  _disableExpensiveErrorDiagnostics: false,
+}
+
+export function runWithExpensiveErrorDiagnosticsDisabled(callback) {
+  try {
+    config._disableExpensiveErrorDiagnostics = true
+    return callback()
+  } finally {
+    config._disableExpensiveErrorDiagnostics = false
+  }
 }
 
 export function configure(newConfig) {

src/queries/role.js

@@ -113,6 +113,10 @@ const getMissingError = (
   role,
   {hidden = getConfig().defaultHidden, name} = {},
 ) => {
+  if (getConfig()._disableExpensiveErrorDiagnostics) {
+    return `Unable to find role="${role}"`
+  }
+
   let roles = ''
   Array.from(container.children).forEach(childElement => {
     roles += prettyRoles(childElement, {

src/wait-for-element.js

@@ -9,7 +9,7 @@ async function waitForElement(callback, options) {
   if (!hasWarned) {
     hasWarned = true
     console.warn(
-      `\`waitForElement\` has been deprecated. Use a \`find*\` query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use \`waitFor\` instead (it's the same API, so you can find/replace): https://testing-library.com/docs/dom-testing-library/api-async#waitfor`,
+      `\`waitForElement\` has been deprecated. Use a \`find*\` query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use \`waitFor\` instead: https://testing-library.com/docs/dom-testing-library/api-async#waitfor`,
     )
   }
   if (!callback) {

src/wait-for.js

@@ -6,7 +6,7 @@ import {
   clearTimeout,
   runWithRealTimers,
 } from './helpers'
-import {getConfig} from './config'
+import {getConfig, runWithExpensiveErrorDiagnosticsDisabled} from './config'
 
 // 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).
@@ -61,7 +61,7 @@ function waitFor(
 
     function checkCallback() {
       try {
-        onDone(null, callback())
+        onDone(null, runWithExpensiveErrorDiagnosticsDisabled(callback))
         // If `callback` throws, wait for the next mutation or timeout.
       } catch (error) {
         // Save the callback error to reject the promise with it.