diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index 29eec2a2..b39edbb3 100644
--- a/src/__tests__/role.js
+++ b/src/__tests__/role.js
@@ -392,6 +392,20 @@ test('accessible regex name in error message for multiple found', () => {
.toThrowErrorMatchingInlineSnapshot(`
"Found multiple elements with the role "button" and name \`/value/i\`
+Here are the matching elements:
+
+
+
+
+
+
+
(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).
@@ -420,6 +434,20 @@ test('accessible string name in error message for multiple found', () => {
.toThrowErrorMatchingInlineSnapshot(`
"Found multiple elements with the role "button" and name "Submit"
+Here are the matching elements:
+
+
+
+
+
+
+
(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).
@@ -436,6 +464,48 @@ test('accessible string name in error message for multiple found', () => {
`)
})
+test('matching elements in error for multiple found', () => {
+ const {getByRole} = render(
+ `
Wrong role
`,
+ )
+
+ expect(() => getByRole('button', {name: /value/i}))
+ .toThrowErrorMatchingInlineSnapshot(`
+"Found multiple elements with the role "button" and name \`/value/i\`
+
+Here are the matching elements:
+
+
+
+
+
+(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).
+
+
+
+
+
+ Wrong role
+
+
+
"
+`)
+})
+
describe('configuration', () => {
let originalConfig
beforeEach(() => {
diff --git a/src/query-helpers.js b/src/query-helpers.js
index cd4c3481..b656d7ba 100644
--- a/src/query-helpers.js
+++ b/src/query-helpers.js
@@ -1,3 +1,4 @@
+import {prettyDOM} from './pretty-dom'
import {getSuggestedQuery} from './suggestions'
import {fuzzyMatches, matches, makeNormalizer} from './matches'
import {waitFor} from './wait-for'
@@ -45,8 +46,14 @@ 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')
+
throw getMultipleElementsFoundError(
- getMultipleError(container, ...args),
+ `${getMultipleError(container, ...args)}
+
+Here are the matching elements:
+
+${elementStrings}`,
container,
)
}