Fix getByTestId nested custom text edge case

src/__tests__/getByApi.test.js

@@ -35,3 +35,54 @@ test('getByTestId returns only native elements', () => {
     'No instances found with testID: myComponent'
   );
 });
+
+test('getByText with nested native Text component get closest Text', () => {
+  const NestedText = () => {
+    return (
+      <Text testID="outer">
+        <Text testID="inner">Test</Text>
+      </Text>
+    );
+  };
+
+  const { getByText } = render(<NestedText />);
+
+  expect(getByText('Test').props.testID).toBe('inner');
+});
+
+test('getByText with nested multiple custom Text component get closest Text', () => {
+  const CustomText = ({ children, ...rest }) => (
+    <Text {...rest}>{children}</Text>
+  );
+
+  const NestedText = () => {
+    return (
+      <CustomText testID="outer">
+        <CustomText testID="inner1">Test1</CustomText>
+        <CustomText testID="inner2">Test2</CustomText>
+      </CustomText>
+    );
+  };
+
+  const { getByText } = render(<NestedText />);
+
+  expect(getByText('Test1').props.testID).toBe('inner1');
+});
+
+test('getByText with nested custom Text component get closest Text', () => {
+  const CustomText = ({ children, ...rest }) => (
+    <Text {...rest}>{children}</Text>
+  );
+
+  const NestedText = () => {
+    return (
+      <CustomText testID="outer">
+        <CustomText testID="inner">Test</CustomText>
+      </CustomText>
+    );
+  };
+
+  const { getByText } = render(<NestedText />);
+
+  expect(getByText('Test').props.testID).toBe('inner');
+});

src/__tests__/queryByApi.test.js

@@ -114,3 +114,17 @@ test('queryByText nested deep <CustomText> in <Text>', () => {
     ).queryByText('Hello World!')
   ).toBeTruthy();
 });
+
+test('queryByText nested deep <CustomText> in <CustomText>', () => {
+  const CustomText = ({ children }) => {
+    return <Text>{children}</Text>;
+  };
+
+  expect(
+    render(
+      <CustomText>
+        <CustomText>Hello</CustomText> <CustomText>World!</CustomText>
+      </CustomText>
+    ).queryByText('Hello World!')
+  ).toBeTruthy();
+});

src/helpers/getByAPI.js

@@ -31,16 +31,21 @@ const getNodeByText = (node, text) => {
   }
 };
 
+const isTextContentType = (candidate) =>
+  ['string', 'number'].includes(typeof candidate);
+
 const getChildrenAsText = (children, TextComponent, textContent = []) => {
-  React.Children.forEach(children, (child) => {
-    if (typeof child === 'string') {
-      textContent.push(child);
-      return;
-    }
+  if (
+    typeof children === 'object' &&
+    isTextContentType(children.props?.children)
+  ) {
+    return textContent;
+  }
 
-    if (typeof child === 'number') {
-      textContent.push(child.toString());
-      return;
+  React.Children.forEach(children, (child) => {
+    if (isTextContentType(child)) {
+      textContent.push(child + '');
+      return textContent;
     }
 
     if (child?.props?.children) {
@@ -49,7 +54,7 @@ const getChildrenAsText = (children, TextComponent, textContent = []) => {
       // 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;
+        return textContent;
       }
 
       getChildrenAsText(child.props.children, TextComponent, textContent);