Native Base <Content/> type is not rendered

Hi, I have this component:

import {
	Container,
	Content,
	Text,
} from 'native-base';


<Container style={styles.container}>			
	<Content padder>
		<Text testID={'emptyCasesList'}>Cases list is empty</Text>
	</Content>
</Container>

But the test can’t find the ‘emptyCasesList’ element. when I run debug.deep, I can’t see the <Content/> element nor the <Text>. BUT - when I remove the <Content/> element (leaving just the <Text/>), test passes and I see the <Text/> element. If the answer is something like “NativeBase is mocking the <Content/> in tests” - could you please elaborate further?

Thanks.

[thymikee]

Hey! I looked into the example and it indeed doesn’t work. So I jumped into native-base internals and found this: https://github.com/GeekyAnts/NativeBase/blob/65f0bc7ff53b28099d177813d2b33ffd987cadcd/src/basic/Content.js#L90-L95

The Content component uses react-native-keyboard-aware-scroll-view under the hood, which is just not mocked properly. I can see it’s even named KeyboardAwareScrollViewMock, not sure where it comes from (maybe jest-expo? I’ll leave that to you to investigate).

Here’s the diff that fixes your tests (of course this mock is very basic, feel free to make it closer to the original and send a PR to the library maintainers, or use a better one if available already):

diff --git a/App.test.js b/App.test.js
index 08bb08d..c02713e 100644
--- a/App.test.js
+++ b/App.test.js
@@ -4,6 +4,10 @@ import {
     Content, Container, Text
 } from 'native-base';

+jest.mock('react-native-keyboard-aware-scroll-view', () => {
+    const KeyboardAwareScrollView = ({ children }) => children;
+    return { KeyboardAwareScrollView };
+});

 class App extends React.Component {

@@ -34,4 +38,4 @@ describe('Testing Content', () => {
         expect(queryByTestId('textIdInside')).not.toBeNull()
     });

-})
\ No newline at end of file
+})

Closing, as that’s not an issue with this library, but with mocking in general.

[pedrohbtp]

@thymikee , thank you for the reply and I apologize for the misunderstanding.

I created the following repository to reproduce the behavior: https://github.com/pedrohbtp/rntl-content-bug