fix: add matcher name to multiple elements error (#677)

Author: jacobparis

src/__tests__/role.js

@@ -346,7 +346,9 @@ 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"')
+  await expect(findByRole('option', {timeout: 1})).rejects.toThrow(
+    'Unable to find role="option"',
+  )
 })
 
 test('explicit role is most specific', () => {
@@ -378,6 +380,62 @@ Here are the accessible roles:
 `)
 })
 
+test('accessible regex name in error message for multiple found', () => {
+  const {getByRole} = render(
+    `<button>Increment value</button
+      ><button>Decrement value</button
+      ><button>Reset value</button
+    >`,
+  )
+
+  expect(() => getByRole('button', {name: /value/i}))
+    .toThrowErrorMatchingInlineSnapshot(`
+"Found multiple elements with the role "button" and name \`/value/i\`
+
+(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).
+
+<div>
+  <button>
+    Increment value
+  </button>
+  <button>
+    Decrement value
+  </button>
+  <button>
+    Reset value
+  </button>
+</div>"
+`)
+})
+
+test('accessible string name in error message for multiple found', () => {
+  const {getByRole} = render(
+    `<button>Submit</button
+      ><button>Submit</button
+      ><button>Submit</button
+    >`,
+  )
+
+  expect(() => getByRole('button', {name: 'Submit'}))
+    .toThrowErrorMatchingInlineSnapshot(`
+"Found multiple elements with the role "button" and name "Submit"
+
+(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).
+
+<div>
+  <button>
+    Submit
+  </button>
+  <button>
+    Submit
+  </button>
+  <button>
+    Submit
+  </button>
+</div>"
+`)
+})
+
 describe('configuration', () => {
   let originalConfig
   beforeEach(() => {

src/queries/role.js

@@ -107,8 +107,18 @@ function queryAllByRole(
     })
 }
 
-const getMultipleError = (c, role) =>
-  `Found multiple elements with the role "${role}"`
+const getMultipleError = (c, role, {name} = {}) => {
+  let nameHint = ''
+  if (name === undefined) {
+    nameHint = ''
+  } else if (typeof name === 'string') {
+    nameHint = ` and name "${name}"`
+  } else {
+    nameHint = ` and name \`${name}\``
+  }
+
+  return `Found multiple elements with the role "${role}"${nameHint}`
+}
 
 const getMissingError = (
   container,