如何在按下时测试导航按钮

Question

假设我有一个按钮，当用户输入他们的姓名并且该名称有效时，按钮将启用，按下时它将导航到其他屏幕。 但是当我尝试按下按钮时，它会返回错误。

TypeError：无法读取未定义的属性“导航”

这是我的组件

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

这是我的测试文件

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

这是我的导航器

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

这样设置：

const FullNameScreen = ({ navigation: { navigate } }) => {

  yourFunction() {
      navigate('LinkEmail')
  }

}

或者你也可以像这样传递完整的道具：

const FullNameScreen = (props) => {

  yourFunction() {
      props.navigation.navigate('LinkEmail')
  }

}