react-native - React Native 测试 android 和 ios 组件

Question

我有一个这样的代码：

function AppContainerAndroid() {
  return <App />;
}

function AppContainerIOS() {
  return (
    <SafeAreaProvider testID="ios_area_provider">
      <App />
    </SafeAreaProvider>
  );
}

function RenderProperContainer({renderProps}) {
  return renderProps();
}

export default function AppContainer() {
  return (
    <RenderProperContainer
      renderProps={() => {
        if (Platform.OS === 'android') {
          return <AppContainerAndroid />;
        }

        return <AppContainerIOS />;
      }}
    />
  );
}

和一个看起来像这样的测试。

it('should render android platform', () => {
    setPlatform('android');
    const {getByTestId} = render(<AppContainer />);

    const element = getByTestId('ios_area_provider');

    console.log(element);
});

当我运行测试时，我收到一条错误消息

做了一些搜索，我得到的大部分答案都说这与我返回组件的方式有关。似乎它不允许有条件返回，因为我已经尝试过：

export default function AppContainer() {
     if(Platform.OS === 'android') {
         return <AppContainerAndroid />
     }

     return <AppContainerIOS />
}

和

export default function AppContainer() {
  return Platform.OS === 'android' ? (
    <AppContainerAndroid />
  ) : (
    <AppContainerIOS />
  );
}

并得到同样的错误。有没有办法处理这种情况？

更新：<App />由于某种原因，我的反应导航中的某处导致了这个问题，因为<WrapWithProvider><View /></WrapWithProvider>工作得很好，测试通过了。

function App() {
  return (
    <WrapWithProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen>
            {() => <View />}
          </Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
    </WrapWithProvider>
  );
}

Answer 1

也许您可以尝试使用 if ios 代替。

就像是：

return Platform.OS === 'ios' ? <AppContainerIOS /> : <App />;

更新

试试这个没有SafeAreaView：

SafeAreaView 的目的是在设备的安全区域边界内呈现内容。目前仅适用于 iOS 版本 11 或更高版本的 iOS 设备。

并且Stack.Screen没有设置组件。

function App() {
  return (
    <WrapWithProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="landing_page" options={{headerShown: false}} component={landing_page}/>
        </Stack.Navigator>
      </NavigationContainer>
    </WrapWithProvider>
  );
}

Answer 2

解决方案是我必须模拟NavigationContainer.

jest.mock('@react-navigation/native', () => ({
  NavigationContainer: jest.fn().mockImplementation((f) => []),
}));

现在测试成功通过了。