React函数组件单元测试如何监听调用链中otherHelper是否被调用

你的测试代码存在两处核心逻辑错误：

1. jest.spyOn 第一个入参需要传入目标方法所属的对象/模块，你传入了组件渲染返回的实例，完全不符合入参要求
2. 你在组件渲染完成后才创建 spy，此时组件内的函数调用已经执行完毕，spy 无法捕获到历史调用

方案一：无需修改原有业务代码 #

直接监听 helper 模块导出的 otherHelper 方法即可，测试代码如下：

// App.test.tsx
import { App } from './App'
// 导入整个模块作为spy的监听对象
import * as helperModule from './helper'
import { render } from '@testing-library/react'

describe("App", () => {
  it("calls otherHelper", () => {
    // 第一步：先创建spy，监听模块导出的otherHelper方法
    const otherHelperSpy = jest.spyOn(helperModule, 'otherHelper')
    // 第二步：再渲染组件，触发内部调用链路
    render(<App />)
    // 第三步：断言调用
    expect(otherHelperSpy).toHaveBeenCalled()
    // 可选：测试结束后还原原方法，避免影响其他用例
    otherHelperSpy.mockRestore()
  })
})

方案二：按你提供的写法修改helper.ts #

如果你更倾向于把方法挂载到对象上方便监听，修改后代码如下：

修改后的helper.ts #

export const otherHelper = { 
  help: () => {} 
}

export const helper = () => {
  // 调用对象上的help方法
  otherHelper.help()
}

对应的测试代码 #

// App.test.tsx
import { App } from './App'
import { otherHelper } from './helper'
import { render } from '@testing-library/react'

describe("App", () => {
  it("calls otherHelper.help", () => {
    const helpSpy = jest.spyOn(otherHelper, 'help')
    render(<App />)
    expect(helpSpy).toHaveBeenCalled()
    helpSpy.mockRestore()
  })
})

注意事项 #

• spy 必须在组件渲染前创建，否则无法捕获到调用
• 如果使用 TypeScript 遇到类型不兼容问题，可以给 spy 加 as jest.Mock 做临时类型断言
• 单测结束后调用 mockRestore() 可以清理 spy 的 mock 状态，避免污染同文件下的其他测试用例

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