React Native тестирование android и ios компонент - PullRequest
Новая
       21

React Native тестирование android и ios компонент

1 голос
/ 28 мая 2020

У меня есть такой код: 

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);
});

Когда я запускаю тест, я получаю сообщение об ошибке:

enter image description here

Провел поиск, и в большинстве полученных ответов говорится, что это как-то связано с тем, как я возвращаю компонент. Похоже, что он не позволяет условный возврат, потому что я уже пробовал: 

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>
  );
}

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Может быть, вы могли бы попробовать использовать вместо ios.

Что-то вроде: 

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

Обновить

Попробуйте это без SafeAreaView:

Целью SafeAreaView является отображение содержимого в пределах границ безопасной области устройства. В настоящее время это применимо только к iOS устройствам с iOS версией 11 или новее.

И Stack.Screen не установлен компонент. 

function App() {
  return (
    <WrapWithProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="landing_page" options={{headerShown: false}} component={landing_page}/>
        </Stack.Navigator>
      </NavigationContainer>
    </WrapWithProvider>
  );
}
0 голосов
/ 28 мая 2020

Решение в том, что я должен издеваться над NavigationContainer. 

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

Тест успешно пройден.

...