NativeBase Content not rendered in Jest with react-native-testing-library

Question

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"

Answer 1

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