如何用Jest模拟React Navigation头部按钮点击并测试navigationOptions

我明白你的困扰——静态的navigationOptions不会直接出现在组件自身的渲染输出里，所以常规的组件快照或查询找不到头部元素。下面分两种思路来解决这个问题，从基础验证到完整交互测试：

一、直接测试navigationOptions的返回值（快速验证配置） #

如果只是想确认navigationOptions返回的头部配置是否正确，不需要渲染整个导航容器，可以直接调用这个静态方法，传入模拟的navigation对象来验证结果：

import CreateEmailScreen from './CreateEmailScreen';
import HeaderConfirmButton from './HeaderConfirmButton';

describe('CreateEmailScreen navigationOptions', () => {
  it('should render correct header title and right button', () => {
    // 模拟navigation对象
    const mockNavigation = {
      navigate: jest.fn(),
    };

    // 调用静态的navigationOptions方法
    const options = CreateEmailScreen.navigationOptions({ navigation: mockNavigation });

    // 验证标题
    expect(options.headerTitle).toBe('Create Email');

    // 验证右侧按钮组件（可以用快照或检查props）
    const headerRightElement = options.headerRight();
    expect(headerRightElement.type).toBe(HeaderConfirmButton);
    expect(headerRightElement.props.onPress).toBeDefined();
  });

  it('should trigger navigate when header right button is pressed', () => {
    const mockNavigate = jest.fn();
    const mockNavigation = { navigate: mockNavigate };

    const options = CreateEmailScreen.navigationOptions({ navigation: mockNavigation });
    const headerRightElement = options.headerRight();

    // 模拟按钮点击
    headerRightElement.props.onPress();

    // 验证导航方法被调用
    expect(mockNavigate).toHaveBeenCalledWith('ConfirmEmail');
  });
});

这种方式简单直接，适合快速验证navigationOptions的逻辑是否正确，不需要依赖导航库的渲染环境。

二、用React Navigation测试工具渲染完整导航容器（测试真实渲染与交互） #

如果需要测试头部的真实渲染效果，以及按钮点击后的完整行为（比如页面跳转），可以使用@react-navigation/testing库来模拟导航环境，这样头部会被真实渲染出来，就能查询到按钮元素并模拟点击：

首先安装依赖：

npm install @react-navigation/testing --save-dev

然后编写测试用例：

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import CreateEmailScreen from './CreateEmailScreen';
import HeaderConfirmButton from './HeaderConfirmButton';

const Stack = createStackNavigator();

// 封装一个测试用的导航容器
const TestNavigation = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="CreateEmail" component={CreateEmailScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

describe('CreateEmailScreen header interaction', () => {
  it('should display header title and right button', () => {
    const { getByText, getByTestId } = render(<TestNavigation />);

    // 验证标题存在
    expect(getByText('Create Email')).toBeTruthy();

    // 假设HeaderConfirmButton有testID="header-confirm-btn"
    expect(getByTestId('header-confirm-btn')).toBeTruthy();
  });

  it('should trigger navigation when right button is pressed', () => {
    // 模拟导航的navigate方法
    const mockNavigate = jest.fn();
    const headerRightProps = CreateEmailScreen.navigationOptions({ navigation: { navigate: mockNavigate } }).headerRight().props;
    jest.spyOn(headerRightProps, 'onPress');

    const { getByTestId } = render(<TestNavigation />);
    const confirmButton = getByTestId('header-confirm-btn');

    // 模拟点击按钮
    fireEvent.press(confirmButton);

    // 验证导航方法被调用
    expect(mockNavigate).toHaveBeenCalledWith('ConfirmEmail');
  });

  it('should go back when back button is pressed', () => {
    // 先渲染导航容器，模拟有返回按钮的场景
    const { getByRole } = render(<TestNavigation />);
    
    // 获取默认返回按钮（根据你的本地化语言调整name值）
    const backButton = getByRole('button', { name: 'Back' });

    // 模拟导航的goBack方法
    const mockGoBack = jest.fn();
    jest.spyOn(require('@react-navigation/native').useNavigation(), 'goBack').mockImplementation(mockGoBack);

    // 模拟点击返回按钮
    fireEvent.press(backButton);

    // 验证返回方法被调用
    expect(mockGoBack).toHaveBeenCalled();
  });
});

关键注意点： #

• 给你的HeaderConfirmButton添加testID，方便测试时查询元素：

  // HeaderConfirmButton.js示例
  const HeaderConfirmButton = ({ onPress }) => (
    <Button
      testID="header-confirm-btn"
      title="Confirm"
      onPress={onPress}
    />
  );
  

• 如果是自定义返回按钮，同样可以通过testID定位；默认返回按钮可以通过角色button加上名称Back（或对应语言的文本）来查询。

三、为什么Jest打印的HTML里没有navigationOptions内容？ #

因为navigationOptions是组件的静态配置属性，它的作用是给React Navigation导航器提供渲染头部的规则，而不是组件自身render()方法的输出内容。组件的render()只返回页面主体部分，头部是由导航器单独根据navigationOptions渲染的——所以必须把组件放在导航容器中，头部才会出现在测试的渲染输出里。

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