fix: *ByRole queries to match their own text text content (#1139)

Author: AugustinLF

src/__tests__/host-text-nesting.test.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Text, Pressable, View } from 'react-native';
+import { render, within } from '../pure';
+
+/**
+ * Our queries interact differently with composite and host elements, and some specific cases require us
+ * to crawl up the tree to a Text composite element to be able to traverse it down again. Going up the tree
+ * is a dangerous behaviour because we could take the risk of then traversing a sibling node to the original one.
+ * This test suite is designed to be able to test as many different combinations, as a safety net.
+ * Specific cases should still be tested within the relevant file (for instance an edge case with `within` should have
+ * an explicit test in the within test suite)
+ */
+describe('nested text handling', () => {
+  test('within same node', () => {
+    const view = render(<Text testID="subject">Hello</Text>);
+    expect(within(view.getByTestId('subject')).getByText('Hello')).toBeTruthy();
+  });
+
+  test('role with direct text children', () => {
+    const view = render(<Text accessibilityRole="header">About</Text>);
+
+    expect(view.getByRole('header', { name: 'About' })).toBeTruthy();
+  });
+
+  test('nested text with child with role', () => {
+    const view = render(
+      <Text>
+        <Text testID="child" accessibilityRole="header">
+          About
+        </Text>
+      </Text>
+    );
+
+    expect(view.getByRole('header', { name: 'About' }).props.testID).toBe(
+      'child'
+    );
+  });
+
+  test('pressable within View, with text child', () => {
+    const view = render(
+      <View>
+        <Pressable testID="pressable" accessibilityRole="button">
+          <Text>Save</Text>
+        </Pressable>
+      </View>
+    );
+
+    expect(view.getByRole('button', { name: 'Save' }).props.testID).toBe(
+      'pressable'
+    );
+  });
+
+  test('pressable within View, with text child within view', () => {
+    const view = render(
+      <View>
+        <Pressable testID="pressable" accessibilityRole="button">
+          <View>
+            <Text>Save</Text>
+          </View>
+        </Pressable>
+      </View>
+    );
+
+    expect(view.getByRole('button', { name: 'Save' }).props.testID).toBe(
+      'pressable'
+    );
+  });
+
+  test('Text within pressable', () => {
+    const view = render(
+      <Pressable testID="pressable" accessibilityRole="button">
+        <Text testID="text">Save</Text>
+      </Pressable>
+    );
+
+    expect(view.getByText('Save').props.testID).toBe('text');
+  });
+
+  test('Text within view within pressable', () => {
+    const view = render(
+      <Pressable testID="pressable" accessibilityRole="button">
+        <View>
+          <Text testID="text">Save</Text>
+        </View>
+      </Pressable>
+    );
+
+    expect(view.getByText('Save').props.testID).toBe('text');
+  });
+});

src/__tests__/within.test.tsx

@@ -94,3 +94,11 @@ test('within() exposes a11y queries', async () => {
 test('getQueriesForElement is alias to within', () => {
   expect(getQueriesForElement).toBe(within);
 });
+
+test('within allows searching for text within a composite component', () => {
+  const view = render(<Text testID="subject">Hello</Text>);
+  // view.getByTestId('subject') returns a host component, contrary to text queries returning a composite component
+  // we want to be sure that this doesn't interfere with the way text is searched
+  const hostTextQueries = within(view.getByTestId('subject'));
+  expect(hostTextQueries.getByText('Hello')).toBeTruthy();
+});

src/fireEvent.ts

@@ -1,4 +1,5 @@
 import { ReactTestInstance } from 'react-test-renderer';
+import { TextInput } from 'react-native';
 import act from './act';
 import { isHostElement } from './helpers/component-tree';
 import { filterNodeByType } from './helpers/filterNodeByType';
@@ -10,7 +11,6 @@ const isTextInput = (element?: ReactTestInstance) => {
     return false;
   }
 
-  const { TextInput } = require('react-native');
   // We have to test if the element type is either the TextInput component
   // (which would if it is a composite component) or the string
   // TextInput (which would be true if it is a host component)

src/helpers/__tests__/component-tree.test.tsx

@@ -7,6 +7,8 @@ import {
   getHostSelf,
   getHostSelves,
   getHostSiblings,
+  getCompositeParentOfType,
+  isHostElementForType,
 } from '../component-tree';
 
 function ZeroHostChildren() {
@@ -289,3 +291,38 @@ describe('getHostSiblings()', () => {
     ]);
   });
 });
+
+test('getCompositeParentOfType', () => {
+  const root = render(
+    <View testID="view">
+      <Text testID="text" />
+    </View>
+  );
+  const hostView = root.getByTestId('view');
+  const hostText = root.getByTestId('text');
+
+  const compositeView = getCompositeParentOfType(hostView, View);
+  // We get the corresponding composite component (same testID), but not the host
+  expect(compositeView?.type).toBe(View);
+  expect(compositeView?.props.testID).toBe('view');
+  const compositeText = getCompositeParentOfType(hostText, Text);
+  expect(compositeText?.type).toBe(Text);
+  expect(compositeText?.props.testID).toBe('text');
+
+  // Checks parent type
+  expect(getCompositeParentOfType(hostText, View)).toBeNull();
+  expect(getCompositeParentOfType(hostView, Text)).toBeNull();
+
+  // Ignores itself, stops if ancestor is host
+  expect(getCompositeParentOfType(compositeText!, Text)).toBeNull();
+  expect(getCompositeParentOfType(compositeView!, View)).toBeNull();
+});
+
+test('isHostElementForType', () => {
+  const view = render(<View testID="test" />);
+  const hostComponent = view.getByTestId('test');
+  const compositeComponent = getCompositeParentOfType(hostComponent, View);
+  expect(isHostElementForType(hostComponent, View)).toBe(true);
+  expect(isHostElementForType(hostComponent, Text)).toBe(false);
+  expect(isHostElementForType(compositeComponent!, View)).toBe(false);
+});

src/helpers/component-tree.ts

@@ -113,3 +113,37 @@ export function getHostSiblings(
     (sibling) => !hostSelves.includes(sibling)
   );
 }
+
+export function getCompositeParentOfType(
+  element: ReactTestInstance,
+  type: React.ComponentType
+) {
+  let current = element.parent;
+
+  while (!isHostElement(current)) {
+    // We're at the root of the tree
+    if (!current) {
+      return null;
+    }
+
+    if (current.type === type) {
+      return current;
+    }
+    current = current.parent;
+  }
+
+  return null;
+}
+
+/**
+ * Note: this function should be generally used for core React Native types like `View`, `Text`, `TextInput`, etc.
+ */
+export function isHostElementForType(
+  element: ReactTestInstance,
+  type: React.ComponentType
+) {
+  // Not a host element
+  if (!isHostElement(element)) return false;
+
+  return getCompositeParentOfType(element, type) !== null;
+}

src/queries/__tests__/role.test.tsx

@@ -134,4 +134,50 @@ describe('supports name option', () => {
       'target-button'
     );
   });
+
+  test('returns an element when the direct child is text', () => {
+    const { getByRole, getByTestId } = render(
+      <Text accessibilityRole="header" testID="target-header">
+        About
+      </Text>
+    );
+
+    // assert on the testId to be sure that the returned element is the one with the accessibilityRole
+    expect(getByRole('header', { name: 'About' })).toBe(
+      getByTestId('target-header')
+    );
+    expect(getByRole('header', { name: 'About' }).props.testID).toBe(
+      'target-header'
+    );
+  });
+
+  test('returns an element with nested Text as children', () => {
+    const { getByRole, getByTestId } = render(
+      <Text accessibilityRole="header" testID="parent">
+        <Text testID="child">About</Text>
+      </Text>
+    );
+
+    // assert on the testId to be sure that the returned element is the one with the accessibilityRole
+    expect(getByRole('header', { name: 'About' })).toBe(getByTestId('parent'));
+    expect(getByRole('header', { name: 'About' }).props.testID).toBe('parent');
+  });
+
+  test('returns a header with an accessibilityLabel', () => {
+    const { getByRole, getByTestId } = render(
+      <Text
+        accessibilityRole="header"
+        testID="target-header"
+        accessibilityLabel="About"
+      />
+    );
+
+    // assert on the testId to be sure that the returned element is the one with the accessibilityRole
+    expect(getByRole('header', { name: 'About' })).toBe(
+      getByTestId('target-header')
+    );
+    expect(getByRole('header', { name: 'About' }).props.testID).toBe(
+      'target-header'
+    );
+  });
 });

src/queries/__tests__/text.test.tsx

@@ -7,7 +7,7 @@ import {
   Button,
   TextInput,
 } from 'react-native';
-import { render, getDefaultNormalizer } from '../..';
+import { render, getDefaultNormalizer, within } from '../..';
 
 type MyButtonProps = {
   children: React.ReactNode;
@@ -454,3 +454,15 @@ test('getByText and queryByText work with tabs', () => {
   expect(getByText(textWithTabs)).toBeTruthy();
   expect(queryByText(textWithTabs)).toBeTruthy();
 });
+
+test('getByText searches for text within itself', () => {
+  const { getByText } = render(<Text testID="subject">Hello</Text>);
+  const textNode = within(getByText('Hello'));
+  expect(textNode.getByText('Hello')).toBeTruthy();
+});
+
+test('getByText searches for text within self host element', () => {
+  const { getByTestId } = render(<Text testID="subject">Hello</Text>);
+  const textNode = within(getByTestId('subject'));
+  expect(textNode.getByText('Hello')).toBeTruthy();
+});

src/queries/a11yState.ts

@@ -1,5 +1,5 @@
 import type { ReactTestInstance } from 'react-test-renderer';
-import { AccessibilityState } from 'react-native';
+import type { AccessibilityState } from 'react-native';
 import { matchObjectProp } from '../helpers/matchers/matchObjectProp';
 import { makeQueries } from './makeQueries';
 import type {

src/queries/displayValue.ts

@@ -1,5 +1,5 @@
 import type { ReactTestInstance } from 'react-test-renderer';
-import { createLibraryNotSupportedError } from '../helpers/errors';
+import { TextInput } from 'react-native';
 import { filterNodeByType } from '../helpers/filterNodeByType';
 import { matches, TextMatch } from '../matches';
 import { makeQueries } from './makeQueries';
@@ -18,20 +18,13 @@ const getTextInputNodeByDisplayValue = (
   value: TextMatch,
   options: TextMatchOptions = {}
 ) => {
-  try {
-    const { TextInput } = require('react-native');
-    const { exact, normalizer } = options;
-    const nodeValue =
-      node.props.value !== undefined
-        ? node.props.value
-        : node.props.defaultValue;
-    return (
-      filterNodeByType(node, TextInput) &&
-      matches(value, nodeValue, normalizer, exact)
-    );
-  } catch (error) {
-    throw createLibraryNotSupportedError(error);
-  }
+  const { exact, normalizer } = options;
+  const nodeValue =
+    node.props.value !== undefined ? node.props.value : node.props.defaultValue;
+  return (
+    filterNodeByType(node, TextInput) &&
+    matches(value, nodeValue, normalizer, exact)
+  );
 };
 
 const queryAllByDisplayValue = (

src/queries/placeholderText.ts

@@ -1,5 +1,5 @@
 import type { ReactTestInstance } from 'react-test-renderer';
-import { createLibraryNotSupportedError } from '../helpers/errors';
+import { TextInput } from 'react-native';
 import { filterNodeByType } from '../helpers/filterNodeByType';
 import { matches, TextMatch } from '../matches';
 import { makeQueries } from './makeQueries';
@@ -18,16 +18,11 @@ const getTextInputNodeByPlaceholderText = (
   placeholder: TextMatch,
   options: TextMatchOptions = {}
 ) => {
-  try {
-    const { TextInput } = require('react-native');
-    const { exact, normalizer } = options;
-    return (
-      filterNodeByType(node, TextInput) &&
-      matches(placeholder, node.props.placeholder, normalizer, exact)
-    );
-  } catch (error) {
-    throw createLibraryNotSupportedError(error);
-  }
+  const { exact, normalizer } = options;
+  return (
+    filterNodeByType(node, TextInput) &&
+    matches(placeholder, node.props.placeholder, normalizer, exact)
+  );
 };
 
 const queryAllByPlaceholderText = (