如何在 React Native 中测试模态和门户内的 RN 组件渲染

Question

我正在使用 react-native-paper 库作为我的 UI 组件 library.I 我正在使用在 Portal 中呈现的模态组件，如下所示

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

为了编写单元测试用例，我正在使用 @testing-library/react-native。

我的问题是如何测试模型内部渲染的组件。当我使用 debug() 时没有在其中获取模态节点。

Answer 1

我不确定你为什么“没有在其中加入模态节点”，但是如果你不测试 Portal 组件，你可以做的一件事就是用 View 组件并测试里面的内容 Modal.

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

还有其他的mock组件方式，如果有问题，请查看this doc

如何在 React Native 中测试模态和门户内的 RN 组件渲染

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

react-native

unit-testing

react-native-paper

native-testing-library