I have some react-native/expo with native-base code that runs normally on the phone or emulator. I tried creating a test for it using jest and react-native-testing-library. When doing so, whatever is inside the from native-base is not rendered and cannot be found in the test.
Has anyone been through this and would know a solution so the children of Content are rendered during testing?
An example code is below to illustrate what I am saying. Thank you very much for the help.
import { render } from 'react-native-testing-library';
import {
Content, Container, Text
} from 'native-base';
class App extends React.Component {
render() {
return (
<Container>
<Content>
<Text testID="textId">Hello</Text>
</Content>
</Container>
);
}
}
describe('Testing Content', () => {
const { queryByTestId } = render(<App />)
it('renders text inside content', () => {
expect(queryByTestId('textId')).not.toBeNull()
});
})
The versions of the packages are:
"expo": "^32.0.0",
"react": "16.5.0",
"native-base": "^2.12.1",
"jest-expo": "^32.0.0",
"react-native-testing-library": "^1.7.0"
I asked the question in the react-native-testing-library in github (https://github.com/callstack/react-native-testing-library/issues/118).
The issue is with react-native-keyboard-aware-scroll-view
To solve it, we can mock it the following way
jest.mock('react-native-keyboard-aware-scroll-view', () => {
const KeyboardAwareScrollView = ({ children }) => children;
return { KeyboardAwareScrollView };
});
I also put an example here for whoever might be looking: https://github.com/pedrohbtp/rntl-content-bug