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"

score 7 · Accepted Answer · answered Jun 05 '19 at 11:10

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

Having exactly the same issue. I followed your instructions from you github repo but its says `Cannot find module 'react-native-keyboard-aware-scroll-view' from 'src/screens/Login.test.tsx'` — Ilir, Dec 03 '22 at 00:32

score 1 · Answer 2 · answered Dec 03 '22 at 00:37

Update 2022

I found the solution in their docs:

To fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests.

const inset = {
  frame: { x: 0, y: 0, width: 0, height: 0 },
  insets: { top: 0, left: 0, right: 0, bottom: 0 },
};

<NativeBaseProvider initialWindowMetrics={inset}>
  {children}
</NativeBaseProvider>;

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

2 Answers2

Linked