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(``)
+
+ 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(
``,
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 = ''