diff --git a/src/__tests__/getByApi.test.js b/src/__tests__/getByApi.test.js
index db66b1c69..948872611 100644
--- a/src/__tests__/getByApi.test.js
+++ b/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 (
+
+ Test
+
+ );
+ };
+
+ const { getByText } = render();
+
+ expect(getByText('Test').props.testID).toBe('inner');
+});
+
+test('getByText with nested multiple custom Text component get closest Text', () => {
+ const CustomText = ({ children, ...rest }) => (
+ {children}
+ );
+
+ const NestedText = () => {
+ return (
+
+ Test1
+ Test2
+
+ );
+ };
+
+ const { getByText } = render();
+
+ expect(getByText('Test1').props.testID).toBe('inner1');
+});
+
+test('getByText with nested custom Text component get closest Text', () => {
+ const CustomText = ({ children, ...rest }) => (
+ {children}
+ );
+
+ const NestedText = () => {
+ return (
+
+ Test
+
+ );
+ };
+
+ const { getByText } = render();
+
+ expect(getByText('Test').props.testID).toBe('inner');
+});
diff --git a/src/__tests__/queryByApi.test.js b/src/__tests__/queryByApi.test.js
index f7f39b991..fd4a0a4e7 100644
--- a/src/__tests__/queryByApi.test.js
+++ b/src/__tests__/queryByApi.test.js
@@ -114,3 +114,17 @@ test('queryByText nested deep in ', () => {
).queryByText('Hello World!')
).toBeTruthy();
});
+
+test('queryByText nested deep in ', () => {
+ const CustomText = ({ children }) => {
+ return {children};
+ };
+
+ expect(
+ render(
+
+ Hello World!
+
+ ).queryByText('Hello World!')
+ ).toBeTruthy();
+});
diff --git a/src/helpers/getByAPI.js b/src/helpers/getByAPI.js
index 18409d052..4a176d10b 100644
--- a/src/helpers/getByAPI.js
+++ b/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);