when I test the app.js I have a problem that appears

when I test App.js I have the following error that appears:

TypeError: Cannot read property 'createStackNavigator' of undefined

      24 |             borderBottomWidth:0,
      25 |         },
    > 26 |         headerTintColor: '#294c95',
         |                                                  ^
      27 |         headerTitleStyle: {
      28 |             fontWeight: 'bold',
      29 |             color:'white',

the file that indicates, it is HomeNavigation.js. On the other hand the line that indicates is correct and in this file the code is correct

here is my test

import 'react-native';
import React from 'react';
import App from '../App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

global.fetch = jest.fn(() => new Promise(resolve => resolve()));
jest.mock('react-native-gesture-handler', () => {});
jest.mock('react-navigation-stack', () => { BaseButton: {} });
//jest.mock('react-navigation', ()=>{}); //if I add or remove this line it doesn't change anything.

describe('App', ()=> {
  it('renders correctly the App component', () => {
    const tree = renderer.create(<App/>).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

• jest.mock('react-native-gesture-handler', () => {}) this line solves this problem: TypeError: Cannot read property 'State' of undefined

• jest.mock('react-navigation-stack', () => { BaseButton: {} }); this line solves this problem: TypeError: Cannot read property 'BaseButton' of undefined

HomeNavigation.js

import React from "react";
import {createStackNavigator} from "react-navigation";
import {Screen1Screen} from "../Screen"; //whatever name
import {Icon} from "react-native-elements";
import {fromRight} from 'react-navigation-transitions';
import {CLR_MENU} from "../assets/styles/colors";

export const HomeNavigation = createStackNavigator({
    Screen1: Screen1Screen // whatever name // this part is correct
},{
    cardStyle: {
        backgroundColor: 'black',
        opacity: 1,
    },
    defaultNavigationOptions: (navigation) =>({
        headerStyle: {
            backgroundColor: [CLR_MENU],
            borderBottomWidth:0,
        },
        headerTintColor: '#294c95', // the error point on this line
        headerTitleStyle: {
            fontWeight: 'bold',
            color:'white',
        },
        headerRight:
            <Icon
                name = "menu"
                size = {24}
                color = "white"
                onPress={_=>navigation.navigation.openDrawer()}
                containerStyle=
                underlayColor={CLR_MENU}
            />,
    }),
    transitionConfig: () => fromRight(),
});