fix: getByRole error message, when there are no available roles

src/__tests__/element-queries.js

@@ -88,7 +88,7 @@ test('get throws a useful error message', () => {
   expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the role "LucyRicardo"
 
-Here are the available roles:
+There are no available roles.
 
 <div>
   <div />

src/__tests__/role.js

@@ -20,3 +20,16 @@ Here are the available roles:
 </div>"
 `)
 })
+
+test('logs error when there are no available roles', () => {
+  const {getByRole} = render('<div />')
+  expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(`
+"Unable to find an element with the role "article"
+
+There are no available roles.
+
+<div>
+  <div />
+</div>"
+`)
+})

src/queries/role.js

@@ -26,16 +26,26 @@ function queryAllByRole(
 
 const getMultipleError = (c, role) =>
   `Found multiple elements with the role "${role}"`
-const getMissingError = (container, role) =>
-  `
-Unable to find an element with the role "${role}"
 
+const getMissingError = (container, role) => {
+  const roles = prettyRoles(container)
+  let roleMessage
+
+  if (roles.length === 0) {
+    roleMessage = 'There are no available roles.'
+  } else {
+    roleMessage = `
 Here are the available roles:
 
-  ${prettyRoles(container)
-    .replace(/\n/g, '\n  ')
-    .replace(/\n\s\s\n/g, '\n\n')}
+  ${roles.replace(/\n/g, '\n  ').replace(/\n\s\s\n/g, '\n\n')}
 `.trim()
+  }
+
+  return `
+Unable to find an element with the role "${role}"
+
+${roleMessage}`.trim()
+}
 
 const [
   queryByRole,