React Native函数式组件调用const函数及Jest测试该方法的实现

一、函数式组件中调用const定义的函数 #

你定义的goToLoginPage是函数表达式，在函数式组件里调用非常直接，分两种场景：

1. 作为事件回调使用 #

你代码里存在一处小问题：TouchableOpacity的onPress绑定了goToLogin，但你的函数名是goToLoginPage，修正为一致名称后，点击按钮就会自动触发该函数：

<TouchableOpacity onPress={goToLoginPage}>
  <Text>OK</Text>
</TouchableOpacity>

2. 组件内部主动调用 #

在组件的其他逻辑（比如useEffect、自定义函数）里，直接通过函数名加括号调用即可，比如：

import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

const YourComponent = () => {
  const navigation = useNavigation();
  const AppConstants = { LOGIN_SCREEN: 'Login' };

  const goToLoginPage = () => {       
    navigation.navigate(AppConstants.LOGIN_SCREEN);
  };

  // 组件挂载时自动跳转到登录页
  useEffect(() => {
    goToLoginPage();
  }, []);

  // ...组件渲染部分
};

注意：确保navigation对象在组件内可用——要么组件是React Navigation导航栈的一部分，要么通过useNavigation()钩子获取。

二、用Jest测试goToLoginPage方法 #

核心思路是模拟navigation.navigate方法，验证它是否被正确调用，以下是两种测试方案：

1. 测试组件交互（点击按钮触发函数） #

通过模拟React Navigation的useNavigation钩子，渲染组件后触发按钮点击，验证导航行为：

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import YourComponent from './YourComponent';
import { useNavigation } from '@react-navigation/native';

// 模拟useNavigation钩子
jest.mock('@react-navigation/native', () => ({
  useNavigation: jest.fn(),
}));

describe('YourComponent', () => {
  it('triggers login page navigation when OK button is pressed', () => {
    // 创建模拟的navigate函数
    const mockNavigate = jest.fn();
    // 让useNavigation返回包含模拟函数的navigation对象
    useNavigation.mockReturnValue({ navigate: mockNavigate });
    const LOGIN_SCREEN = 'Login';

    // 渲染组件
    const { getByText } = render(<YourComponent />);
    // 触发按钮点击
    fireEvent.press(getByText('OK'));

    // 验证navigate是否被正确调用
    expect(mockNavigate).toHaveBeenCalledWith(LOGIN_SCREEN);
  });
});

2. 直接测试函数逻辑 #

如果不需要测试组件交互，可单独提取函数逻辑测试，直接模拟navigation对象调用函数：

describe('goToLoginPage', () => {
  it('calls navigation.navigate with correct screen name', () => {
    const mockNavigate = jest.fn();
    const navigation = { navigate: mockNavigate };
    const LOGIN_SCREEN = 'Login';

    // 定义函数并调用
    const goToLoginPage = () => {       
      navigation.navigate(LOGIN_SCREEN);
    };

    goToLoginPage();
    // 验证导航参数正确
    expect(mockNavigate).toHaveBeenCalledWith(LOGIN_SCREEN);
  });
});

如果AppConstants是外部导入的模块，可通过jest.mock模拟该模块，确保测试时能获取到正确的LOGIN_SCREEN值。

内容的提问来源于stack exchange，提问作者Swift