fix: improve text matching (#1222)

Author: mdjastrzebski

src/__tests__/react-native-api.test.tsx

@@ -45,7 +45,7 @@ test('React Native API assumption: nested <Text> renders single host element', (
       </Text>
     </Text>
   );
-  expect(getHostSelf(view.getByText('Hello'))).toBe(view.getByTestId('test'));
+  expect(getHostSelf(view.getByText(/Hello/))).toBe(view.getByTestId('test'));
   expect(getHostSelf(view.getByText('Before'))).toBe(
     view.getByTestId('before')
   );

src/helpers/__tests__/getTextContent.test.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import render from '../../render';
+import { getTextContent } from '../getTextContent';
+
+test('getTextContent with simple content', () => {
+  const view = render(<Text>Hello world</Text>);
+  expect(getTextContent(view.container)).toBe('Hello world');
+});
+
+test('getTextContent with null element', () => {
+  expect(getTextContent(null)).toBe('');
+});
+
+test('getTextContent with single nested content', () => {
+  const view = render(
+    <Text>
+      <Text>Hello world</Text>
+    </Text>
+  );
+  expect(getTextContent(view.container)).toBe('Hello world');
+});
+
+test('getTextContent with multiple nested content', () => {
+  const view = render(
+    <Text>
+      <Text>Hello</Text> <Text>world</Text>
+    </Text>
+  );
+  expect(getTextContent(view.container)).toBe('Hello world');
+});
+
+test('getTextContent with multiple number content', () => {
+  const view = render(
+    <Text>
+      <Text>Hello</Text> <Text>world</Text> <Text>{100}</Text>
+    </Text>
+  );
+  expect(getTextContent(view.container)).toBe('Hello world 100');
+});
+
+test('getTextContent with multiple boolean content', () => {
+  const view = render(
+    <Text>
+      <Text>Hello{false}</Text> <Text>{true}world</Text>
+    </Text>
+  );
+  expect(getTextContent(view.container)).toBe('Hello world');
+});

src/helpers/findAll.ts

@@ -3,17 +3,22 @@ import { getConfig } from '../config';
 import { isHiddenFromAccessibility } from './accessiblity';
 
 interface FindAllOptions {
+  /** Match elements hidden from accessibility */
   includeHiddenElements?: boolean;
+
   /** RTL-compatible alias to `includeHiddenElements` */
   hidden?: boolean;
+
+  /* Exclude any ancestors of deepest matched elements even if they match the predicate */
+  matchDeepestOnly?: boolean;
 }
 
 export function findAll(
   root: ReactTestInstance,
-  predicate: (node: ReactTestInstance) => boolean,
+  predicate: (element: ReactTestInstance) => boolean,
   options?: FindAllOptions
 ) {
-  const results = root.findAll(predicate);
+  const results = findAllInternal(root, predicate, options);
 
   const includeHiddenElements =
     options?.includeHiddenElements ??
@@ -29,3 +34,35 @@ export function findAll(
     (element) => !isHiddenFromAccessibility(element, { cache })
   );
 }
+
+// Extracted from React Test Renderer
+// src: https://github.com/facebook/react/blob/8e2bde6f2751aa6335f3cef488c05c3ea08e074a/packages/react-test-renderer/src/ReactTestRenderer.js#L402
+function findAllInternal(
+  root: ReactTestInstance,
+  predicate: (element: ReactTestInstance) => boolean,
+  options?: FindAllOptions
+): Array<ReactTestInstance> {
+  const results: ReactTestInstance[] = [];
+
+  // Match descendants first but do not add them to results yet.
+  const matchingDescendants: ReactTestInstance[] = [];
+  root.children.forEach((child) => {
+    if (typeof child === 'string') {
+      return;
+    }
+    matchingDescendants.push(...findAllInternal(child, predicate, options));
+  });
+
+  if (
+    // When matchDeepestOnly = true: add current element only if no descendants match
+    (!options?.matchDeepestOnly || matchingDescendants.length === 0) &&
+    predicate(root)
+  ) {
+    results.push(root);
+  }
+
+  // Add matching descendants after element to preserve original tree walk order.
+  results.push(...matchingDescendants);
+
+  return results;
+}

src/helpers/getTextContent.ts

@@ -0,0 +1,20 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+
+export function getTextContent(
+  element: ReactTestInstance | string | null
+): string {
+  if (!element) {
+    return '';
+  }
+
+  if (typeof element === 'string') {
+    return element;
+  }
+
+  const result: string[] = [];
+  element.children?.forEach((child) => {
+    result.push(getTextContent(child));
+  });
+
+  return result.join('');
+}

src/helpers/matchers/matchTextContent.ts

@@ -0,0 +1,19 @@
+import { Text } from 'react-native';
+import type { ReactTestInstance } from 'react-test-renderer';
+import { matches, TextMatch, TextMatchOptions } from '../../matches';
+import { filterNodeByType } from '../filterNodeByType';
+import { getTextContent } from '../getTextContent';
+
+export function matchTextContent(
+  node: ReactTestInstance,
+  text: TextMatch,
+  options: TextMatchOptions = {}
+) {
+  if (!filterNodeByType(node, Text)) {
+    return false;
+  }
+
+  const textContent = getTextContent(node);
+  const { exact, normalizer } = options;
+  return matches(text, textContent, normalizer, exact);
+}

src/matches.ts

@@ -1,5 +1,10 @@
 export type NormalizerFn = (textToNormalize: string) => string;
+
 export type TextMatch = string | RegExp;
+export type TextMatchOptions = {
+  exact?: boolean;
+  normalizer?: NormalizerFn;
+};
 
 export function matches(
   matcher: TextMatch,

src/queries/__tests__/text.test.tsx

@@ -9,6 +9,29 @@ import {
 } from 'react-native';
 import { render, getDefaultNormalizer, within } from '../..';
 
+test('byText matches simple text', () => {
+  const { getByText } = render(<Text testID="text">Hello World</Text>);
+  expect(getByText('Hello World').props.testID).toBe('text');
+});
+
+test('byText matches inner nested text', () => {
+  const { getByText } = render(
+    <Text testID="outer">
+      <Text testID="inner">Hello World</Text>
+    </Text>
+  );
+  expect(getByText('Hello World').props.testID).toBe('inner');
+});
+
+test('byText matches accross multiple texts', () => {
+  const { getByText } = render(
+    <Text testID="outer">
+      <Text testID="inner-1">Hello</Text> <Text testID="inner-2">World</Text>
+    </Text>
+  );
+  expect(getByText('Hello World').props.testID).toBe('outer');
+});
+
 type MyButtonProps = {
   children: React.ReactNode;
   onPress: () => void;
@@ -192,8 +215,8 @@ test('queryByText not found', () => {
   ).toBeFalsy();
 });
 
-test('queryByText does not match nested text across multiple <Text> in <Text>', () => {
-  const { queryByText } = render(
+test('*ByText matches text across multiple nested Text', () => {
+  const { getByText } = render(
     <Text nativeID="1">
       Hello{' '}
       <Text nativeID="2">
@@ -203,7 +226,7 @@ test('queryByText does not match nested text across multiple <Text> in <Text>',
     </Text>
   );
 
-  expect(queryByText('Hello World!')).toBe(null);
+  expect(getByText('Hello World!')).toBeTruthy();
 });
 
 test('queryByText with nested Text components return the closest Text', () => {
@@ -214,7 +237,6 @@ test('queryByText with nested Text components return the closest Text', () => {
   );
 
   const { queryByText } = render(<NestedTexts />);
-
   expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
 });
 
@@ -241,8 +263,8 @@ test('queryByText nested deep <CustomText> in <Text>', () => {
       <Text>
         <CustomText>Hello</CustomText> <CustomText>World!</CustomText>
       </Text>
-    ).queryByText('Hello World!')
-  ).toBe(null);
+    ).getByText('Hello World!')
+  ).toBeTruthy();
 });
 
 test('queryByText with nested Text components: not-exact text match returns the most deeply nested common component', () => {
@@ -365,7 +387,6 @@ describe('Supports normalization', () => {
       <View>
         <Text>{`  Text     and
 
-
         whitespace`}</Text>
       </View>
     );
@@ -376,7 +397,6 @@ describe('Supports normalization', () => {
   test('trim and collapseWhitespace is customizable by getDefaultNormalizer param', () => {
     const testTextWithWhitespace = `  Text     and
 
-
         whitespace`;
     const { getByText } = render(
       <View>

src/queries/displayValue.ts

@@ -2,7 +2,7 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import { TextInput } from 'react-native';
 import { filterNodeByType } from '../helpers/filterNodeByType';
 import { findAll } from '../helpers/findAll';
-import { matches, TextMatch } from '../matches';
+import { matches, TextMatch, TextMatchOptions } from '../matches';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -12,7 +12,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import type { CommonQueryOptions, TextMatchOptions } from './options';
+import type { CommonQueryOptions } from './options';
 
 type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions;
 

src/queries/hintText.ts

@@ -1,6 +1,6 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { findAll } from '../helpers/findAll';
-import { matches, TextMatch } from '../matches';
+import { matches, TextMatch, TextMatchOptions } from '../matches';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -10,7 +10,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions, TextMatchOptions } from './options';
+import { CommonQueryOptions } from './options';
 
 type ByHintTextOptions = CommonQueryOptions & TextMatchOptions;
 

src/queries/labelText.ts

@@ -1,6 +1,6 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { findAll } from '../helpers/findAll';
-import { matches, TextMatch } from '../matches';
+import { matches, TextMatch, TextMatchOptions } from '../matches';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -10,7 +10,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions, TextMatchOptions } from './options';
+import { CommonQueryOptions } from './options';
 
 type ByLabelTextOptions = CommonQueryOptions & TextMatchOptions;