feat: add name hint to missing error in find by queries (#1143)

Co-authored-by: Sebastian Silbermann <[email protected]>

Author: dolevoper

src/__tests__/role.js

@@ -363,6 +363,14 @@ test('has no useful error message in findBy', async () => {
   )
 })
 
+test('findBy error message for missing elements contains a name hint', async () => {
+  const {findByRole} = render(`<button>Click me</button>`)
+
+  await expect(findByRole('button', {name: 'Submit'})).rejects.toThrow(
+    'Unable to find role="button" and name "Submit"',
+  )
+})
+
 test('explicit role is most specific', () => {
   const {getByRole} = renderIntoDocument(
     `<button role="tab" aria-label="my-tab" />`,

src/queries/role.js

@@ -220,7 +220,7 @@ function makeRoleSelector(role, exact, customNormalizer) {
     .join(',')
 }
 
-const getMultipleError = (c, role, {name} = {}) => {
+const getNameHint = name => {
   let nameHint = ''
   if (name === undefined) {
     nameHint = ''
@@ -230,7 +230,11 @@ const getMultipleError = (c, role, {name} = {}) => {
     nameHint = ` and name \`${name}\``
   }
 
-  return `Found multiple elements with the role "${role}"${nameHint}`
+  return nameHint
+}
+
+const getMultipleError = (c, role, {name} = {}) => {
+  return `Found multiple elements with the role "${role}"${getNameHint(name)}`
 }
 
 const getMissingError = (
@@ -239,7 +243,7 @@ const getMissingError = (
   {hidden = getConfig().defaultHidden, name, description} = {},
 ) => {
   if (getConfig()._disableExpensiveErrorDiagnostics) {
-    return `Unable to find role="${role}"`
+    return `Unable to find role="${role}"${getNameHint(name)}`
   }
 
   let roles = ''