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

user_4788592 0
Viewed 1088

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.

native-testing-library react-native-paper react-native unit-testing
1 Answers

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

user_91191860
Related