Skip to content

Commit f324a0f

Browse files
committed
Improve further QueryByRole error
1 parent 567a87f commit f324a0f

File tree

2 files changed

+25
-14
lines changed

2 files changed

+25
-14
lines changed

src/queries/__tests__/role.test.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ const TEXT_LABEL = 'cool text';
1515
const NO_MATCHES_TEXT: any = 'not-existent-element';
1616

1717
const getMultipleInstancesFoundMessage = (value: string) => {
18-
return `Found multiple elements with accessibilityRole: ${value}`;
18+
return `Found multiple elements with role: "${value}"`;
1919
};
2020

2121
const getNoInstancesFoundMessage = (value: string) => {
22-
return `Unable to find an element with accessibilityRole: ${value}`;
22+
return `Unable to find an element with role: "${value}"`;
2323
};
2424

2525
const Typography = ({ children, ...rest }: any) => {
@@ -621,7 +621,7 @@ describe('error messages', () => {
621621
const { getByRole } = render(<View />);
622622

623623
expect(() => getByRole('button')).toThrowErrorMatchingInlineSnapshot(
624-
`"Unable to find an element with accessibilityRole: button"`
624+
`"Unable to find an element with role: "button""`
625625
);
626626
});
627627

@@ -631,7 +631,7 @@ describe('error messages', () => {
631631
expect(() =>
632632
getByRole('button', { name: 'Save' })
633633
).toThrowErrorMatchingInlineSnapshot(
634-
`"Unable to find an element with accessibilityRole: button, name: Save"`
634+
`"Unable to find an element with role: "button", name: "Save""`
635635
);
636636
});
637637

@@ -641,7 +641,17 @@ describe('error messages', () => {
641641
expect(() =>
642642
getByRole('button', { name: 'Save', disabled: true })
643643
).toThrowErrorMatchingInlineSnapshot(
644-
`"Unable to find an element with accessibilityRole: button, name: Save, accessibilityStates: disabled:true"`
644+
`"Unable to find an element with role: "button", name: "Save", disabled state: true"`
645+
);
646+
});
647+
648+
test('gives a descriptive error message when querying with a role, a name and several accessibility state', () => {
649+
const { getByRole } = render(<View />);
650+
651+
expect(() =>
652+
getByRole('button', { name: 'Save', disabled: true, selected: true })
653+
).toThrowErrorMatchingInlineSnapshot(
654+
`"Unable to find an element with role: "button", name: "Save", disabled state: true, selected state: true"`
645655
);
646656
});
647657

@@ -651,7 +661,7 @@ describe('error messages', () => {
651661
expect(() =>
652662
getByRole('button', { disabled: true })
653663
).toThrowErrorMatchingInlineSnapshot(
654-
`"Unable to find an element with accessibilityRole: button, accessibilityStates: disabled:true"`
664+
`"Unable to find an element with role: "button", disabled state: true"`
655665
);
656666
});
657667
});

src/queries/role.ts

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,32 +73,33 @@ const queryAllByRole = (
7373
});
7474
};
7575

76-
const computeErrorMessage = (role: TextMatch, options: ByRoleOptions = {}) => {
77-
let errorMessage = `accessibilityRole: ${String(role)}`;
76+
const buildErrorMessage = (role: TextMatch, options: ByRoleOptions = {}) => {
77+
const errors = [`role: "${String(role)}"`];
7878

7979
if (options.name) {
80-
errorMessage += `, name: ${String(options.name)}`;
80+
errors.push(`name: "${String(options.name)}"`);
8181
}
8282

8383
if (
8484
accessibilityStates.some(
8585
(accessibilityState) => typeof options[accessibilityState] !== 'undefined'
8686
)
8787
) {
88-
errorMessage += ', accessibilityStates:';
8988
accessibilityStates.forEach((accessibilityState) => {
9089
if (options[accessibilityState]) {
91-
errorMessage += ` ${accessibilityState}:${options[accessibilityState]}`;
90+
errors.push(
91+
`${accessibilityState} state: ${options[accessibilityState]}`
92+
);
9293
}
9394
});
9495
}
9596

96-
return errorMessage;
97+
return errors.join(', ');
9798
};
9899
const getMultipleError = (role: TextMatch, options?: ByRoleOptions) =>
99-
`Found multiple elements with ${computeErrorMessage(role, options)}`;
100+
`Found multiple elements with ${buildErrorMessage(role, options)}`;
100101
const getMissingError = (role: TextMatch, options?: ByRoleOptions) =>
101-
`Unable to find an element with ${computeErrorMessage(role, options)}`;
102+
`Unable to find an element with ${buildErrorMessage(role, options)}`;
102103

103104
const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries(
104105
queryAllByRole,

0 commit comments

Comments
 (0)