react-native - 如何在反应原生中测试模态和门户内的 RN 组件渲染

Question

我正在使用react-native-paper库作为我的 UI 组件库。我正在使用在 Portal 中呈现的 Modal 组件，如下所示

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

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

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

Answer 1

我不确定您为什么“没有在其中获取 Modal 节点”，但是如果您不测试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;
});

还有其他模拟组件的方法，如果您有问题，请查看此文档