From 9b83f01c3fad10aa80e2f4bb74e54e5f503e1461 Mon Sep 17 00:00:00 2001
From: Omer Dolev <53278705+dolevoper@users.noreply.github.com>
Date: Sun, 10 Jul 2022 12:31:12 +0300
Subject: [PATCH] feat: add name hint to missing error in find by queries
 (#1143)

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
---
 src/__tests__/role.js |  8 ++++++++
 src/queries/role.js   | 10 +++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index 9c766d0a..fb573bcd 100644
--- a/src/__tests__/role.js
+++ b/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" />`,
diff --git a/src/queries/role.js b/src/queries/role.js
index 5edd1c3c..a46d8a2b 100644
--- a/src/queries/role.js
+++ b/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 = ''