How to test navigation button on press - react-native

Question

Let's say I have one button and when user input their name and that name is valid then button will enabled and on press it will navigate to other screen.
But when I try to test on press button, it will return error.
TypeError: Cannot read property 'navigate' of undefined
This is my component
import React, { useState } from 'react'
import { ScrollView, StatusBar, Text, View } from 'react-native'
import HeaderAuth from '../../../__global__/headerAuth/headerAuth'
import color from '../../../__global__/styles/themes/colorThemes'
import ButtonFull from '../../../__global__/button/buttonFull'
import Field from '../../../__global__/fieldAuthScreen/Field'
import styles from './styles/StyleFullName'
import regex from '../../../constant/regex'
const FullNameScreen = ({ navigation }) => {
const [fullName, setFullName] = useState('')
const regexName = regex.name
const submitFullName = () => {
navigation.navigate('LinkEmail')
}
return (
<ScrollView>
<StatusBar
translucent
backgroundColor="transparent"
barStyle="light-content"
/>
<HeaderAuth />
<Field
testID={'inputFullName'}
icon={'account'}
value={fullName}
placeholder={'Type your full name'}
onChangeText={(value) => {
handleChange('fullName')
setFullName(value)
setFieldTouched('fullName', true)
setFieldValue('fullName', value)
}}
onBlur={() => setFieldTouched('fullName', true)}
keyboardType={'default'}
/>
<ButtonFull
testID={'submitFullName'}
isDisabled={!isValid}
buttonColor={isValid ? color.thema : color.disabledButton}
onPress={() => submitFullName()}
title={'Next'}
/>
</ScrollView>
)
}
export default FullNameScreen
This is my test file
import React from 'react'
import { configure, shallow, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import FullNameScreen from '../index'
import renderer from 'react-test-renderer'
import { fireEvent, render, waitFor } from 'react-native-testing-library'
import '#testing-library/jest-native/extend-expect'
jest.mock('#react-navigation/native', () => ({
useNavigation: component => component,
}))
describe('Login', () => {
configure({ adapter: new Adapter() })
const wrapper = shallow(<FullNameScreen />)
const instaceOf = wrapper.instance()
const rendered = renderer.create(<FullNameScreen />)
it('renders correctly', () => {
expect(rendered.toJSON()).toBeTruthy()
})
it('should call submit fullname one time', async () => {
const onPressMock = jest.fn()
const phoneNumber = 'Ganda Rain Panjaitan'
const { getByTestId } = render(<FullNameScreen />)
const input = getByTestId('inputFullName')
fireEvent.changeText(input, phoneNumber)
expect(getByTestId('inputFullName').props.value).toEqual(phoneNumber)
await waitFor(() => {
expect(getByTestId('submitFullName')).toBeEnabled()
})
fireEvent.press(getByTestId('submitFullName'))
expect(onPressMock.mock.calls.length)
})
})
This is my navigator
import * as React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import HomeScreen from '../views/homeScreen'
import SplashScreen from '../views/splashScreen'
import WelcomeScreen from '../views/welcomeScreen'
import ProfileScreen from '../views/profileScreen'
import ChangeNumberScreen from '../views/changeNumberScreen'
import LoginScreen from '../views/authScreen/loginScreen'
import PinScreen from '../views/authScreen/pinScreen/index'
import SetPinScren from '../views/authScreen/setPinScreen'
import OtpVerificationScreen from '../views/authScreen/otpVerificationScreen'
import PhoneNumberScreen from '../views/authScreen/phoneNumberScreen'
import FullNameScreen from '../views/authScreen/fullNameScreen'
import LinkEmailScreen from '../views/authScreen/linkEmailScreen'
const Stack = createStackNavigator()
import ChangeNameScreen from '../views/changeNameScreen'
import MainTab from '../views/mainTab'
function Routes() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
<Stack.Screen name="Welcome" component={WelcomeScreen} options={{ headerShown: false }} />
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
<Stack.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }} />
<Stack.Screen name="ChangeNumber" component={ChangeNumberScreen} options={{ headerShown: false }} />
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
<Stack.Screen name="Pin" component={PinScreen} options={{ headerShown: false }} />
<Stack.Screen name="SetPin" component={SetPinScren} options={{ headerShown: false }} />
<Stack.Screen name="OtpVerification" component={OtpVerificationScreen} options={{ headerShown: false }} />
<Stack.Screen name="PhoneNumber" component={PhoneNumberScreen} options={{ headerShown: false }} />
<Stack.Screen name="ChangeName" component={ChangeNameScreen} options={{ headerShown: false }} />
<Stack.Screen name="MainTab" component={MainTab} options={{ headerShown: false }} />
<Stack.Screen name="FullName" component={FullNameScreen} options={{ headerShown: false }} />
<Stack.Screen name="LinkEmail" component={LinkEmailScreen} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default Routes

Answer 1

Set it like this:
const FullNameScreen = ({ navigation: { navigate } }) => {
yourFunction() {
navigate('LinkEmail')
}
}
Or alternately you can pass full props like this:
const FullNameScreen = (props) => {
yourFunction() {
props.navigation.navigate('LinkEmail')
}
}