React Native project unit-tests failing using latest React-Navigation/Stack version

49 Views Asked by At

I just recently upgraded the react-native version of my project to v0.72.4 and upgraded all dependencies that could be updated as well. This included the @react-navigation/* packages. The issue is that my unit tests are currently failing with the following error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    
    Check the render method of `MaybeScreenContainer`.
        at enabled (/Users/rameezhussain/dev/selfapy/mobile-react/node_modules/@react-navigation/stack/src/views/Screens.tsx:13:3)

I've checked that file in the @react-navigation/stack package, and I don't see anything weird with it. The only thing I can think of that's causing the issue is the MockedNavigator component which I use to wrap the components I want to test. It looks like this:

import React, { ComponentType } from 'react';
import { View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';

const Stack = createStackNavigator();

type Props = {
  componentName?: string;
  component?: ComponentType<any>;
  secondComponentName?: string;
  secondComponent?: ComponentType<any>;
  params?: object;
  secondParams?: object;
};

const screenOptions: StackNavigationOptions = {
  animationEnabled: false,
};

export const MockedNavigator = ({
  componentName = 'MockedComponent',
  component = () => <View />,
  secondComponentName = 'SecondMockedComponent',
  secondComponent = () => <View />,
  params = {},
  secondParams = {},
}: Props) => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={screenOptions}>
        <Stack.Screen name={componentName} component={component} initialParams={params} />
        <Stack.Screen name={secondComponentName} component={secondComponent} initialParams={secondParams} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MockedNavigator;

The thing is that this setup was working with @react-navigation/[email protected] and the issue pops up when I tried using 6.x.x. More specifically, I am using v6.3.18.

I also found this Github issue, so it seems like there are others facing this issue as well.

Any idea what might be causing this?

0

There are 0 best solutions below