如何测试React组件内自定义Hook返回的回调在按钮点击后被调用

组件内部闭包里的open方法在测试代码里是无法直接访问的，有两种成熟方案可以实现测试目标，对应不同的测试诉求：

方案1：Mock自定义Hook（适合需要明确断言回调调用的场景） #

你可以直接Mock组件引入的整个自定义Hook模块，替换掉Hook的返回值，把自己构造的Mock监听函数塞进去，就能断言调用情况了。
举个具体实现例子，假设你的useHook是从@/hooks/use-hook路径导入组件的：

// 在测试文件顶部Mock对应的Hook模块，路径必须和组件里的导入路径完全一致
jest.mock('@/hooks/use-hook')

it('点击按钮时会调用open回调', () => {
  // 每次用例执行前清空之前的Mock调用记录，避免用例之间互相干扰
  jest.clearAllMocks()
  // 构造可监听调用情况的Mock函数
  const mockOpen = jest.fn()
  // 给Mock的useHook设置返回值，替换掉真实的open方法
  useHook.mockReturnValue({
    open: mockOpen
  })

  // 渲染组件，注意要传JSX而不是组件函数本身，查询方法从RTL导出的screen获取
  render(<Component />)
  // 触发按钮点击
  fireEvent.click(screen.getByRole('button'))

  // 直接断言Mock的open方法被调用即可
  expect(mockOpen).toHaveBeenCalledTimes(1)
})

方案2：断言行为结果（React Testing Library官方推荐写法） #

RTL的核心设计原则是测试用户可感知的真实行为，而非代码内部实现细节。如果你不需要强制和内部实现耦合，完全可以不用Mock Hook，直接断言点击按钮之后open方法执行带来的实际DOM变化即可。
举个例子，如果open方法的作用是打开弹窗、展示某个面板、切换按钮状态这类有实际UI反馈的逻辑，测试可以这么写：

it('点击按钮会触发打开操作', () => {
  render(<Component />)
  // 点击前目标元素（比如弹窗）不存在
  expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
  // 点击按钮
  fireEvent.click(screen.getByRole('button'))
  // 点击后目标元素正常渲染，说明open逻辑已经正常执行
  expect(screen.getByRole('dialog')).toBeInTheDocument()
})

这种写法的好处是测试不会和你内部用了什么Hook、方法叫什么名字耦合，后续就算你重构内部实现，只要用户能看到的行为没变，测试就不会挂，稳定性高很多。

别费力气想直接访问组件内部声明的open变量做断言，组件渲染时的内部作用域是独立闭包，测试代码根本拿不到这个引用，硬要通过特殊黑魔法取内部变量属于纯纯的反模式，写出来的测试脆得像纸，以后随便改点内部实现（比如把open改个名、换个Hook返回结构）测试就挂，维护成本极高。

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