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);