+
,
`)
@@ -255,6 +260,7 @@ test('getAll* matchers throw for 0 matches', () => {
expect(() => getAllByLabelText('no matches please')).toThrow()
expect(() => getAllByPlaceholderText('nope')).toThrow()
expect(() => getAllByText('nope')).toThrow()
+ expect(() => getAllByRole('nope')).toThrow()
})
test('queryAll* matchers return an array for 0 matches', () => {
@@ -264,6 +270,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
queryAllByLabelText,
queryAllByPlaceholderText,
queryAllByText,
+ queryAllByRole,
} = render(`
,
@@ -273,6 +280,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
expect(queryAllByLabelText('nope')).toHaveLength(0)
expect(queryAllByPlaceholderText('nope')).toHaveLength(0)
expect(queryAllByText('nope')).toHaveLength(0)
+ expect(queryAllByRole('nope')).toHaveLength(0)
})
test('using jest helpers to assert element states', () => {
@@ -375,6 +383,16 @@ test('using jest helpers to check element class names', () => {
).toThrowError()
})
+test('using jest helpers to check element role', () => {
+ const {getByRole} = render(`
+
+ Contents
+
+ `)
+
+ expect(getByRole('dialog')).toHaveTextContent('Contents')
+})
+
test('test the debug helper prints the dom state here', () => {
const originalDebugPrintLimit = process.env.DEBUG_PRINT_LIMIT
const Large = `
diff --git a/src/queries.js b/src/queries.js
index 56e71401..86e31848 100644
--- a/src/queries.js
+++ b/src/queries.js
@@ -106,6 +106,8 @@ const queryByTestId = queryByAttribute.bind(null, 'data-testid')
const queryAllByTestId = queryAllByAttribute.bind(null, 'data-testid')
const queryByValue = queryByAttribute.bind(null, 'value')
const queryAllByValue = queryAllByAttribute.bind(null, 'value')
+const queryByRole = queryByAttribute.bind(null, 'role')
+const queryAllByRole = queryAllByAttribute.bind(null, 'role')
function queryAllByAltText(
container,
@@ -241,6 +243,18 @@ function getByAltText(...args) {
return firstResultOrNull(getAllByAltText, ...args)
}
+function getAllByRole(container, id, ...rest) {
+ const els = queryAllByRole(container, id, ...rest)
+ if (!els.length) {
+ throw getElementError(`Unable to find an element by role=${id}`, container)
+ }
+ return els
+}
+
+function getByRole(...args) {
+ return firstResultOrNull(getAllByRole, ...args)
+}
+
export {
queryByPlaceholderText,
queryAllByPlaceholderText,
@@ -270,6 +284,10 @@ export {
queryAllByValue,
getByValue,
getAllByValue,
+ queryByRole,
+ queryAllByRole,
+ getAllByRole,
+ getByRole,
}
/* eslint complexity:["error", 14] */
diff --git a/typings/queries.d.ts b/typings/queries.d.ts
index 01bcab45..a7d6882d 100644
--- a/typings/queries.d.ts
+++ b/typings/queries.d.ts
@@ -57,3 +57,7 @@ export const queryByValue: QueryByAttribute
export const queryAllByValue: AllByAttribute
export const getByValue: GetByAttribute
export const getAllByValue: AllByAttribute
+export const queryByTRole: QueryByAttribute
+export const queryAllByTRole: AllByAttribute
+export const getByTRole: GetByAttribute
+export const getAllByTRole: AllByAttribute