Jest测试报错TypeError: navigation.navigate不是函数的解决方法

问题根源很明确：你把navigation直接定义成了jest.fn()，但React Navigation的navigation是一个包含navigate等方法的对象，不是单纯的函数，所以点击时调用navigation.navigate自然找不到对应方法。

正确的Mock方式 #

你需要构造一个包含navigate方法的mock对象，而不是直接用空函数。有两种常用写法：

写法1：直接构造mock对象

// 替换原来的const navigation = jest.fn();
const navigation = {
  navigate: jest.fn()
};

写法2：用Jest mock函数，方便后续断言调用细节

const navigateMock = jest.fn();
const navigation = {
  navigate: navigateMock
};

修改后的完整测试代码 #

把测试代码里的navigation定义替换后，完整代码如下：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { render, screen, fireEvent } from "@testing-library/react-native";
import { authContext, stateContext, propsContext } from '../app/GlobalContext';
import Home from './Home';

describe ('Home page view', () => {
    test ('home page link', async () => {
        jest.mock('react-native-easy-grid', () => jest.fn());
        
        // 这里替换为正确的navigation mock
        const navigateMock = jest.fn();
        const navigation = { navigate: navigateMock };
        
        const propsVal = {device_id:"a device id"};
        const authVal = {result:"fdkfjdsl;fjdsafkl", myself:{id:1,name:"me"}};
        const stateVal = {name:"me", alias:"akkus", aka:"aka"};

        render(
            <NavigationContainer>
                <propsContext.Provider value={propsVal}>
                    <authContext.Provider value={authVal}>
                        <stateContext.Provider value={stateVal}>
                            <Home navigation={navigation}  />
                        </stateContext.Provider>
                    </authContext.Provider>
                </propsContext.Provider>                                 
            </NavigationContainer>
        );

        expect(screen.getByTestId('home.myhelp')).toBeTruthy();
        fireEvent.press(screen.getByTestId('home.myhelp'));
        
        // 可选：添加断言验证navigate是否被正确调用
        expect(navigateMock).toHaveBeenCalledTimes(1);
        expect(navigateMock).toHaveBeenCalledWith("MyHelp");
    })
})

额外说明 #

• 如果你的组件还用到了navigation的其他方法（比如goBack、push），只需要在mock对象里添加对应的jest.fn()即可。
• 加上断言可以确保跳转逻辑符合预期，避免后续代码变更导致功能失效。

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