fix: Return closest Text matching a query (#489)

* fix: Return closest Text matching a query

* Add test for another edge case

* Fix whitespaces

* adjust comment

* Update src/helpers/getByAPI.js

Co-authored-by: Maciej Jastrzebski <[email protected]>

* update test

* use queryBy

Co-authored-by: Michał Pierzchała <[email protected]>
Co-authored-by: Maciej Jastrzebski <[email protected]>

Author: 3 people

src/__tests__/queryByApi.test.js

@@ -48,29 +48,68 @@ test('queryByText not found', () => {
   ).toBeFalsy();
 });
 
-test('queryByText nested multiple <Text> in <Text>', () => {
+test('queryByText nested text across multiple <Text> in <Text>', () => {
+  const { queryByText } = render(
+    <Text nativeID="1">
+      Hello{' '}
+      <Text nativeID="2">
+        World
+        <Text>!{true}</Text>
+      </Text>
+    </Text>
+  );
+
+  expect(queryByText('Hello World!')?.props.nativeID).toBe('1');
+});
+
+test('queryByText with nested Text components return the closest Text', () => {
+  const NestedTexts = () => (
+    <Text nativeID="1">
+      <Text nativeID="2">My text</Text>
+    </Text>
+  );
+
+  const { queryByText } = render(<NestedTexts />);
+
+  expect(queryByText('My text')?.props.nativeID).toBe('2');
+});
+
+test('queryByText with nested Text components each with text return the lowest one', () => {
+  const NestedTexts = () => (
+    <Text nativeID="1">
+      bob
+      <Text nativeID="2">My text</Text>
+    </Text>
+  );
+
+  const { queryByText } = render(<NestedTexts />);
+
+  expect(queryByText('My text')?.props.nativeID).toBe('2');
+});
+
+test('queryByText nested <CustomText> in <Text>', () => {
+  const CustomText = ({ children }) => {
+    return <Text>{children}</Text>;
+  };
+
   expect(
     render(
       <Text>
-        Hello{' '}
-        <Text>
-          World
-          <Text>!{true}</Text>
-        </Text>
+        Hello <CustomText>World!</CustomText>
       </Text>
     ).queryByText('Hello World!')
   ).toBeTruthy();
 });
 
-test('queryByText nested <CustomText> in <Text>', () => {
+test('queryByText nested deep <CustomText> in <Text>', () => {
   const CustomText = ({ children }) => {
     return <Text>{children}</Text>;
   };
 
   expect(
     render(
       <Text>
-        Hello <CustomText>World!</CustomText>
+        <CustomText>Hello</CustomText> <CustomText>World!</CustomText>
       </Text>
     ).queryByText('Hello World!')
   ).toBeTruthy();

src/helpers/getByAPI.js

@@ -44,6 +44,14 @@ const getChildrenAsText = (children, TextComponent, textContent = []) => {
     }
 
     if (child?.props?.children) {
+      // Bail on traversing text children down the tree if current node (child)
+      // has no text. In such situations, react-test-renderer will traverse down
+      // this tree in a separate call and run this query again. As a result, the
+      // query will match the deepest text node that matches requested text.
+      if (filterNodeByType(child, TextComponent) && textContent.length === 0) {
+        return;
+      }
+
       getChildrenAsText(child.props.children, TextComponent, textContent);
     }
   });