React Native testing android and ios component

Question

I have a code that goes like this:

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

and a test that looks like this.

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

    const element = getByTestId('ios_area_provider');

    console.log(element);
});

When I run the test I get an error saying

Did some searching and most of the answers I get says it has something to do with the way I return the component. It appears that it does not allow conditional return because I already tried:

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

     return <AppContainerIOS />
}

and

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

and get the same error. Is there a way to handle this kind of scenario?

UPDATE: This is what's inside my <App /> for some reason somewhere in my react navigation is causing the issue because <WrapWithProvider><View /></WrapWithProvider> works just fine, the test passed.

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

高鵬翔 · Answer 1 · 2020-05-28T07:22:51.223

1

Maybe you could try use if ios instead.

Something like:

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

Update

Try this without SafeAreaView:

The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.

And Stack.Screen didn't set component.

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

edited May 28 '20 at 07:22

answered May 28 '20 at 04:58

高鵬翔

1,997
2
8
21

Thanks for the response, I applied your code but the same result... the test pass if I only return one component like `return `; – happy go lucky May 28 '20 at 05:58
Maybe just return like this `return ` because it looks do nothing in `AppContainerAndroid`? – 高鵬翔 May 28 '20 at 06:02
I separated them because of the iOS SafeAreaProvider, I just want to test if android return the if ios wrap the inside – happy go lucky May 28 '20 at 06:08
yep, I know, I means maybe you could try like answer updated. If it still have error code. – 高鵬翔 May 28 '20 at 06:12
Also this error happens when using `react-test-renderer` or `react-native-testing-library` – happy go lucky May 28 '20 at 06:12
Thanks you so much, I think the error is inside the it is not really the conditional return... :) – happy go lucky May 28 '20 at 06:22
Maybe you could post the component to let more possible to find out problem. – 高鵬翔 May 28 '20 at 06:24
I have update my post I included the content inside my – happy go lucky May 28 '20 at 06:39
The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. [DOC](https://reactnative.dev/docs/safeareaview) But you put in use in android? So that cause this error? – 高鵬翔 May 28 '20 at 07:00
I remove the SafeAreaView now and updated my post, still my test fails. – happy go lucky May 28 '20 at 07:07
I know the problem! It because the stack.screen using without component, try new update – 高鵬翔 May 28 '20 at 07:19
So that there is no any render, fit the error code's end description. return null or render nothing. Take it a try – 高鵬翔 May 28 '20 at 07:21
Did some thinking and tried mocking the NavigationContainer `jest.mock('@react-navigation/native', () => ({ NavigationContainer: jest.fn().mockImplementation((f) => []), }));` and it worked... :) – happy go lucky May 28 '20 at 07:41

score 0 · Answer 2 · answered May 28 '20 at 07:39

0

The solution is I have to mock the NavigationContainer.

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

The test successfully passed now.

answered May 28 '20 at 07:39

happy go lucky

361
3
13

where do you call this from? I'm trying to mock the Platform.OS in individual tests – conor909 Apr 22 '21 at 21:16

React Native testing android and ios component

2 Answers2