feat: toHaveAccessibleName matcher

Author: anishamalde

src/helpers/accessiblity.ts

@@ -4,7 +4,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
-import { getHostSiblings, getHostParent } from './component-tree';
+import { getHostSiblings } from './component-tree';
 import { getHostComponentNames } from './host-component-names';
 
 type IsInaccessibleOptions = {
@@ -233,34 +233,3 @@ export function isElementSelected(
   const { accessibilityState, 'aria-selected': ariaSelected } = element.props;
   return ariaSelected ?? accessibilityState?.selected ?? false;
 }
-
-export function getAccessibleName(
-  element: ReactTestInstance
-): string | undefined {
-  const labelTextFromLabel = getAccessibilityLabel(element);
-  const labelTextFromLabelledBy = getAccessibilityLabelledBy(element);
-
-  if (labelTextFromLabelledBy) {
-    const parentElement = getHostParent(element);
-
-    if (parentElement) {
-      const labelElement = parentElement.findByProps({
-        nativeID: labelTextFromLabelledBy,
-      });
-
-      if (labelElement) {
-        // Extract and return the text content of the label element
-        const label = labelElement.props.children;
-        return label;
-      }
-    }
-  }
-
-  if (labelTextFromLabel) {
-    return labelTextFromLabel;
-  }
-
-  const ownText = element?.children?.join(' ');
-
-  return ownText || undefined;
-}

src/helpers/matchers/accessibilityName.ts

@@ -1,5 +1,5 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import { getAccessibleName } from '../accessiblity';
+import { getAccessibleName } from '../../matchers/to-have-accessible-name';
 import { TextMatchOptions, matches, TextMatch } from '../../matches';
 
 export function matchAccessibleName(

src/matchers/__tests__/to-have-accessible-name.test.tsx

@@ -9,12 +9,24 @@ test('toHaveAccessibleName() on view with accessibilityLabel prop', () => {
   expect(element).toHaveAccessibleName('Test Label');
 });
 
+test('not.toHaveAccessibleName() on view with accessibilityLabel prop', () => {
+  render(<View testID="accessibility-label" accessibilityLabel="Test Label" />);
+  const element = screen.getByTestId('accessibility-label');
+  expect(element).not.toHaveAccessibleName('Not Test Label');
+});
+
 test('toHaveAccessibleName() on view with aria-label prop', () => {
   render(<View testID="aria-label" aria-label="Aria Test Label" />);
   const element = screen.getByTestId('aria-label');
   expect(element).toHaveAccessibleName('Aria Test Label');
 });
 
+test('not.toHaveAccessibleName() on view with aria-label prop', () => {
+  render(<View testID="aria-label" aria-label="Aria Test Label" />);
+  const element = screen.getByTestId('aria-label');
+  expect(element).not.toHaveAccessibleName('Not Aria Test Label');
+});
+
 test('toHaveAccessibleName() on view with accessibilityLabel prop with no expectedName', () => {
   render(<View testID="no-expectName-label" accessibilityLabel="Test Label" />);
   const element = screen.getByTestId('no-expectName-label');
@@ -27,6 +39,12 @@ test('toHaveAccessibleName() on view with no accessibility props', () => {
   expect(element).toHaveAccessibleName('Text');
 });
 
+test('not.toHaveAccessibleName() on view with no accessibility props', () => {
+  render(<Text testID="accessibility-label">Text</Text>);
+  const element = screen.getByTestId('accessibility-label');
+  expect(element).not.toHaveAccessibleName('Not the expected Text');
+});
+
 test('toHaveAccessibleName() on view with that does not have the expected accessible name', () => {
   render(<View testID="wrong-label" accessibilityLabel="The actual label" />);
   const element = screen.getByTestId('wrong-label');
@@ -56,6 +74,13 @@ test('toHaveAccessibleName() on view that doesnt have accessible name defined',
   `);
 });
 
+test('not.toHaveAccessibleName() on view that doesnt have accessible name defined', () => {
+  render(<View testID="no-accessibile-name" />);
+  const element = screen.getByTestId('no-accessibile-name');
+
+  expect(element).not.toHaveAccessibleName();
+});
+
 it('toHaveAccessibleName() on a non-host element', () => {
   const nonElement = 'This is not a ReactTestInstance';
   expect(() => expect(nonElement).toHaveAccessibleName())
@@ -68,6 +93,18 @@ it('toHaveAccessibleName() on a non-host element', () => {
   `);
 });
 
+it('not.toHaveAccessibleName() on a non-host element', () => {
+  const nonElement = 'This is not a ReactTestInstance';
+  expect(() => expect(nonElement).not.toHaveAccessibleName())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(received).not.toHaveAccessibleName()
+
+    received value must be a host element.
+    Received has type:  string
+    Received has value: "This is not a ReactTestInstance""
+  `);
+});
+
 test('toHaveAccessibleName() on view with accessibilityLabelledBy prop', async () => {
   render(
     <View>
@@ -83,6 +120,63 @@ test('toHaveAccessibleName() on view with accessibilityLabelledBy prop', async (
   expect(element).toHaveAccessibleName('Accessibility LabelledBy');
 });
 
+test('not.toHaveAccessibleName() on view with accessibilityLabelledBy prop', async () => {
+  render(
+    <View>
+      <Text nativeID="formLabel">Accessibility LabelledBy</Text>
+      <TextInput
+        testID="accessibility-labelledby"
+        accessibilityLabelledBy="formLabel"
+      />
+    </View>
+  );
+
+  const element = screen.getByTestId('accessibility-labelledby');
+  expect(element).not.toHaveAccessibleName('Not Accessibility LabelledBy');
+});
+
+test('getByLabelText supports nested accessibilityLabelledBy', async () => {
+  render(
+    <>
+      <View nativeID="label">
+        <Text>Nested Accessibility LabelledBy</Text>
+      </View>
+      <TextInput testID="text-input" accessibilityLabelledBy="label" />
+    </>
+  );
+
+  const element = screen.getByTestId('text-input');
+  expect(element).toHaveAccessibleName('Nested Accessibility LabelledBy');
+});
+
+test('not.toHaveAccessibleName() on view with nested accessibilityLabelledBy', async () => {
+  render(
+    <>
+      <View nativeID="label">
+        <Text>Nested Aria LabelledBy</Text>
+      </View>
+      <TextInput testID="text-input" accessibilityLabelledBy="label" />
+    </>
+  );
+
+  const element = screen.getByTestId('text-input');
+  expect(element).not.toHaveAccessibleName('Not Nested Aria LabelledBy');
+});
+
+test('not.toHaveAccessibleName() on view with nested accessibilityLabelledBy with no text', async () => {
+  render(
+    <>
+      <View nativeID="label">
+        <View />
+      </View>
+      <TextInput testID="text-input" accessibilityLabelledBy="label" />
+    </>
+  );
+
+  const element = screen.getByTestId('text-input');
+  expect(element).not.toHaveAccessibleName();
+});
+
 test('toHaveAccessibleName() on view with ariaLabelledBy prop', async () => {
   render(
     <View>
@@ -95,9 +189,20 @@ test('toHaveAccessibleName() on view with ariaLabelledBy prop', async () => {
   expect(element).toHaveAccessibleName('Aria LabelledBy');
 });
 
-//TODO: This fails as expected as I am unsure on how to extract the Text from the nested Element
+test('not.toHaveAccessibleName() on view with ariaLabelledBy prop', async () => {
+  render(
+    <View>
+      <Text nativeID="formLabel">Aria LabelledBy</Text>
+      <TextInput testID="aria-labelledby" aria-labelledby="formLabel" />
+    </View>
+  );
+
+  const element = screen.getByTestId('aria-labelledby');
+  expect(element).not.toHaveAccessibleName('Not Aria LabelledBy');
+});
+
 test('getByLabelText supports nested aria-labelledby', async () => {
-  const screen = render(
+  render(
     <>
       <View nativeID="label">
         <Text>Nested Aria LabelledBy</Text>
@@ -109,3 +214,31 @@ test('getByLabelText supports nested aria-labelledby', async () => {
   const element = screen.getByTestId('text-input');
   expect(element).toHaveAccessibleName('Nested Aria LabelledBy');
 });
+
+test('not.toHaveAccessibleName() on view with nested aria-labelledby', async () => {
+  render(
+    <>
+      <View nativeID="label">
+        <Text>Nested Aria LabelledBy</Text>
+      </View>
+      <TextInput testID="text-input" aria-labelledby="label" />
+    </>
+  );
+
+  const element = screen.getByTestId('text-input');
+  expect(element).not.toHaveAccessibleName('Not Nested Aria LabelledBy');
+});
+
+test('not.toHaveAccessibleName() on view with nested aria-labelledby with no text', async () => {
+  render(
+    <>
+      <View nativeID="label">
+        <View />
+      </View>
+      <TextInput testID="text-input" aria-labelledby="label" />
+    </>
+  );
+
+  const element = screen.getByTestId('text-input');
+  expect(element).not.toHaveAccessibleName();
+});

src/matchers/extend-expect.d.ts

@@ -18,11 +18,11 @@ export interface JestNativeMatchers<R> {
   toBeVisible(): R;
   toContainElement(element: ReactTestInstance | null): R;
   toHaveAccessibilityValue(expectedValue: AccessibilityValueMatcher): R;
+  toHaveAccessibleName(expectedName?: TextMatch, options?: TextMatchOptions): R;
   toHaveDisplayValue(expectedValue: TextMatch, options?: TextMatchOptions): R;
   toHaveProp(name: string, expectedValue?: unknown): R;
   toHaveStyle(style: StyleProp<Style>): R;
   toHaveTextContent(expectedText: TextMatch, options?: TextMatchOptions): R;
-  toHaveAccessibleName(expectedName?: TextMatch, options?: TextMatchOptions): R;
 }
 
 // Implicit Jest global `expect`.

src/matchers/extend-expect.ts

@@ -12,11 +12,11 @@ import { toBeSelected } from './to-be-selected';
 import { toBeVisible } from './to-be-visible';
 import { toContainElement } from './to-contain-element';
 import { toHaveAccessibilityValue } from './to-have-accessibility-value';
+import { toHaveAccessibleName } from './to-have-accessible-name';
 import { toHaveDisplayValue } from './to-have-display-value';
 import { toHaveProp } from './to-have-prop';
 import { toHaveStyle } from './to-have-style';
 import { toHaveTextContent } from './to-have-text-content';
-import { toHaveAccessibleName } from './to-have-accessible-name';
 
 expect.extend({
   toBeOnTheScreen,
@@ -32,9 +32,9 @@ expect.extend({
   toBeVisible,
   toContainElement,
   toHaveAccessibilityValue,
+  toHaveAccessibleName,
   toHaveDisplayValue,
   toHaveProp,
   toHaveStyle,
   toHaveTextContent,
-  toHaveAccessibleName,
 });

src/matchers/index.ts

@@ -10,8 +10,8 @@ export { toBeSelected } from './to-be-selected';
 export { toBeVisible } from './to-be-visible';
 export { toContainElement } from './to-contain-element';
 export { toHaveAccessibilityValue } from './to-have-accessibility-value';
+export { toHaveAccessibleName } from './to-have-accessible-name';
 export { toHaveDisplayValue } from './to-have-display-value';
 export { toHaveProp } from './to-have-prop';
 export { toHaveStyle } from './to-have-style';
 export { toHaveTextContent } from './to-have-text-content';
-export { toHaveAccessibleName } from './to-have-accessible-name';

src/matchers/to-have-accessible-name.tsx

@@ -1,10 +1,35 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
 import { matchAccessibleName } from '../helpers/matchers/accessibilityName';
-import { getAccessibleName } from '../helpers/accessiblity';
+import {
+  getAccessibilityLabel,
+  getAccessibilityLabelledBy,
+} from '../helpers/accessiblity';
 import { TextMatch, TextMatchOptions } from '../matches';
+import { getTextContent } from '../helpers/text-content';
+import { getUnsafeRootElement } from '../helpers/component-tree';
 import { checkHostElement, formatMessage } from './utils';
 
+export function getAccessibleName(
+  element: ReactTestInstance
+): string | undefined {
+  const labelTextFromLabel = getAccessibilityLabel(element);
+  const labelTextFromLabelledBy = getAccessibilityLabelledBy(element);
+  const rootElement = getUnsafeRootElement(element);
+
+  const labelledByElement = labelTextFromLabelledBy
+    ? rootElement?.findByProps({
+        nativeID: labelTextFromLabelledBy,
+      })
+    : undefined;
+
+  const nameFromLabel = labelTextFromLabelledBy
+    ? labelledByElement && getTextContent(labelledByElement)
+    : labelTextFromLabel;
+
+  return nameFromLabel || getTextContent(element) || undefined;
+}
+
 export function toHaveAccessibleName(
   this: jest.MatcherContext,
   element: ReactTestInstance,