fix: Return closest Text matching a query

Author: AugustinLF

src/__tests__/queryByApi.test.js

@@ -48,7 +48,7 @@ test('queryByText not found', () => {
   ).toBeFalsy();
 });
 
-test('queryByText nested multiple <Text> in <Text>', () => {
+test('queryByText nested text across multiple <Text> in <Text>', () => {
   expect(
     render(
       <Text>
@@ -62,6 +62,18 @@ test('queryByText nested multiple <Text> in <Text>', () => {
   ).toBeTruthy();
 });
 
+test('queryByText with nested Text components return the closest Text', () => {
+  const NestedTexts = () => (
+    <Text nativeID="1">
+      <Text nativeID="2">My text</Text>
+    </Text>
+  );
+
+  const { getByText } = render(<NestedTexts />);
+
+  expect(getByText('My text').props.nativeID).toBe('2');
+});
+
 test('queryByText nested <CustomText> in <Text>', () => {
   const CustomText = ({ children }) => {
     return <Text>{children}</Text>;
@@ -75,3 +87,17 @@ test('queryByText nested <CustomText> in <Text>', () => {
     ).queryByText('Hello World!')
   ).toBeTruthy();
 });
+
+test('queryByText nested deep <CustomText> in <Text>', () => {
+  const CustomText = ({ children }) => {
+    return <Text>{children}</Text>;
+  };
+
+  expect(
+    render(
+      <Text>
+        <CustomText>Hello</CustomText> <CustomText>World!</CustomText>
+      </Text>
+    ).queryByText('Hello World!')
+  ).toBeTruthy();
+});

src/helpers/getByAPI.js

@@ -44,6 +44,18 @@ const getChildrenAsText = (children, TextComponent, textContent = []) => {
     }
 
     if (child?.props?.children) {
+      // This means that down in the tree of a <TextComponent /> there's another TextComponent that
+      // contains a string, but the parent itself doesn't contain any other string
+      // We should then match against this child, since querying aims to always return the element
+      // the closest to the target text. For instance in this example we don't want
+      // getChildrenAsText to match on the Text of nativeID "1", but the one of nativeID "2"
+      // <Text nativeID="1">
+      //   <Text nativeID="2">My text</Text>
+      // </Text>
+      if (filterNodeByType(child, TextComponent) && textContent.length === 0) {
+        return;
+      }
+
       getChildrenAsText(child.props.children, TextComponent, textContent);
     }
   });