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, ) }