How to test RN component rendering inside modal & portal in react native

Question

I am using react-native-paper library as my UI component library.I am using Modal component which gets rendered inside Portal, something like below

<Portal>
   <Modal visible={visible}>
    ....
   </Modal>
</Portal>

For writing unit test cases I am using @testing-library/react-native.

My question is how can I testing components rendering inside model. When I am using debug() not getting Modal node in it.

Answer 1

I'm not sure why you are "not getting Modal node in it", but one thing you can do, if you aren't testing the Portal component, is just mock it with a View component and just test what is inside Modal.

jest.mock('react-native-paper', () => {
  const RealModule = jest.requireActual('react-native-paper');
  const MockedModule = {
    ...RealModule,
    Portal: ({children}) => <View>{children}</View>
  };
  return MockedModule;
});

There's other ways of mocking the component, if you have some problems, please take a look at this doc