使用React Testing Library监听函数组件内部函数报错如何解决

handleClick是Foo函数组件运行时内部定义的私有函数，不属于Foo这个函数对象的公开属性，jest.spyOn(Foo, "handleClick")无法访问到组件内部的私有变量，只能拿到undefined，因此抛出该错误。

React Testing Library的核心设计理念是测试组件的外部可观测行为，而非内部实现细节，因此不建议直接监听组件内部的私有函数，推荐通过点击后产生的实际效果验证功能正常，常见场景的测试写法如下：

场景1：点击按钮触发父组件传入的回调 #

如果handleClick会调用props传入的回调函数，直接传入mock函数验证调用即可：

// 组件示例（常见业务场景）
const Foo = ({ onContinue }) => {
  const handleClick = () => {
    // 内部业务逻辑
    onContinue()
  }
  return <div>
     <button data-testid="button" onClick={handleClick}>Continue</button>
  </div>
}

// 测试用例
it("should handle continue button click", async () => {
  const mockOnContinue = jest.fn()
  const { getByTestId } = render(<Foo onContinue={mockOnContinue} />);
  fireEvent.click(getByTestId("button"));
  expect(mockOnContinue).toHaveBeenCalled();
});

场景2：点击按钮修改组件内部状态产生UI变化 #

如果点击按钮会触发文案修改、状态切换等UI变化，直接验证UI表现即可：

it("should disable button after click", async () => {
  const { getByTestId } = render(<Foo />);
  const button = getByTestId("button");
  fireEvent.click(button);
  expect(button).toBeDisabled();
});

可选方案：监听抽离后的公共函数（不推荐） #

如果确实需要直接监听handleClick的调用，可以将函数抽离为独立模块的导出方法，再通过jest.spyOn监听：

// 独立模块 fooUtils.js
export const handleClick = () => {}

// Foo 组件
import { handleClick } from './fooUtils'
const Foo = () => {
  return <div>
     <button data-testid="button" onClick={handleClick}>Continue</button>
  </div>
}

// 测试用例
import * as fooUtils from './fooUtils'
it("should handle continue button click", async () => {
  const spy = jest.spyOn(fooUtils, "handleClick");
  const { getByTestId } = render(<Foo />);
  fireEvent.click(getByTestId("button"));
  expect(spy).toHaveBeenCalled();
});

注意：该方案为了测试修改了组件原本的内聚实现，属于测试实现细节，一旦后续内部逻辑调整，测试用例很容易失效，非特殊情况不建议使用。

原测试代码中用act包裹fireEvent.click属于冗余操作，React Testing Library的fireEvent和userEvent已经自动做了act封装，不需要手动添加。

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