CODEWITHSUNDEEP
react-nativereact-native-testing-library
happy go lucky
happy go lucky

Reputation: 361

React Native testing android and ios component

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

enter image description here

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

Upvotes: 1

Views: 426

Answers (2)

happy go lucky
happy go lucky

Reputation: 361

The solution is I have to mock the NavigationContainer.

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

The test successfully passed now.

Upvotes: 0

高鵬翔
高鵬翔

Reputation: 2057

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

Upvotes: 1

Related Questions