How to unit test with AutocompleteDropdown using Jest?

[durgaswaroop]

I have a screen that imports AutocompleteDropdown and adds it as a component.

I am trying to unit test this screen using the react-native testing library.
When I render the screen in the test, I get the following error:

    Element 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 `AddHabitScreen`.
{
      21 |
    > 22 |     render(
         |           ^
      23 |         <NavigationContainer>
      24 |             <AddHabitScreen />
      25 |         </NavigationContainer>

The AddHabitScreen is the screen that has the import statement as follows:

# AddHabitScreen.js
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';

const AddHabitScreen = ({ navigation, route }) => {
...
<AutocompleteDropdown
...
/>
...
}

export default AddHabitScreen;

This code works when I test the interactions manually on a device but fails during the test. I am assuming mocking is the way to prevent this, but I haven't found a way to properly mock this library.

Any ideas on how I could mock this to avoid this error?

[durgaswaroop]

One more observation.

I add a mock file as follows in the __mocks__ directory.

# react-native-autocomplete-dropdown.js

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

const AutocompleteDropdown = (props) => <View {...props} />;

export default AutocompleteDropdown;

With this, I get the same render error as before but along with that, I get an additional error specifically showing AutocompleteDropdown as follows:

console.error
  Warning: React.jsx: 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 `AddHabitScreen`.
      at navigation (<path>\src\habits\AddHabitScreen.js:47:27)
      at children (<path>\node_modules\@react-navigation\core\src\EnsureSingleNavigator.tsx:20:49)
      at initialState (<path>\node_modules\@react-navigation\core\src\BaseNavigationContainer.tsx:82:7)
      at value (<path>\node_modules\@react-navigation\native\src\theming\ThemeProvider.tsx:11:41)
      at theme (<path>\node_modules\@react-navigation\native\src\NavigationContainer.tsx:55:5)

    83 |                         }}
    84 |                     >
  > 85 |                         <AutocompleteDropdown
        |                         ^
    86 |                             clearOnFocus={false}
    87 |                             closeOnBlur={true}
    88 |                             closeOnSubmit={false}

Not sure if that helps in any way to debug this issue.