如何使用Jest拦截React函数组件内部定义的方法？

核心结论 #

你无法直接Mock示例代码中组件内部定义的someMethodInMyComponent：该函数属于组件函数闭包内的私有成员，没有对外暴露的访问路径，Jest无法直接获取到该函数的引用进行覆盖。

可落地的替代方案 #

方案1：抽离函数到独立模块导出 #

将需要Mock的逻辑抽离为单独的工具函数，导出后即可用Jest的标准Mock能力进行覆盖：

1. 抽离工具函数文件utils.js：

// src/utils.js
export const someMethodInMyComponent = () => 'hello world'

2. 改造组件引用抽离后的函数：

import { someMethodInMyComponent } from './utils'

function MyComponent(){
  return <p>{someMethodInMyComponent()}</p>
}

3. 测试文件中Mock模块：

import * as utils from './utils'
jest.mock('./utils')

test('组件渲染Mock后的文本', () => {
  utils.someMethodInMyComponent.mockReturnValue('Mock后的内容')
  // 渲染组件后断言对应文本存在即可
})

方案2：将函数改为组件Props传入 #

把需要Mock的逻辑设计为组件的可选Props，生产环境使用默认实现，测试时直接传入Mock函数：

// 组件定义
function MyComponent({ 
  someMethodInMyComponent = () => 'hello world' 
}){
  return <p>{someMethodInMyComponent()}</p>
}

测试时直接传递Mock函数即可：

test('组件调用Mock函数', () => {
  const mockFn = jest.fn(() => '测试内容')
  render(<MyComponent someMethodInMyComponent={mockFn} />)
  expect(mockFn).toHaveBeenCalledTimes(1)
})

方案3：直接测试组件行为（更推荐） #

如果没有特殊的调用断言需求，不需要单独Mock内部函数，直接针对组件的对外输出做断言即可，这是React组件单元测试的最佳实践：

test('组件渲染正常内容', () => {
  render(<MyComponent />)
  expect(screen.getByText('hello world')).toBeInTheDocument()
})

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