如何使用Jest和React Testing Library测试React函数组件的clickHandler

函数式组件内部定义的clickHandler是组件作用域内的私有变量，外部测试代码无法直接访问，因此不存在直接监听该函数是否被调用的方法。业内通用的测试原则（尤其React Testing Library倡导的理念）是不测试组件内部实现细节，只测试用户可感知的行为，只要验证点击按钮后clickHandler的预期执行效果符合要求，即可证明处理函数被正常调用。

下面根据clickHandler的不同逻辑，给出对应测试方案：

场景1：点击后有可见UI变化 #

如果clickHandler执行后会修改组件状态、引发UI变动，直接断言UI变化即可：

// 示例Button.jsx
import { useState } from 'react'
const Button = () => {
  const [clicked, setClicked] = useState(false)
  const clickHandler = () => {
    setClicked(true)
  }

  return (
    <button onClick={clickHandler}>
      {clicked ? '已点击' : 'Click Me'}
    </button>
  )
}
export default Button

// 对应测试代码
import { render, fireEvent } from '@testing-library/react'
import Button from './Button'

test('Click event functions properly', () => {
  const { getByRole } = render(<Button />)
  const button = getByRole('button')
  
  fireEvent.click(button)
  // 断言UI符合预期即可证明clickHandler正常触发
  expect(button).toHaveTextContent('已点击')
})

场景2：点击后调用外部依赖 #

如果clickHandler内部调用了外部导入的工具函数、接口请求等逻辑，mock对应依赖后验证调用即可：

// 示例Button.jsx
import { submitLog } from './report'
const Button = () => {
  const clickHandler = () => {
    submitLog('button_click_event')
  }

  return <button onClick={clickHandler}>Click Me</button>
}

// 对应测试代码
import { render, fireEvent } from '@testing-library/react'
import { submitLog } from './report'
import Button from './Button'

// mock外部依赖
jest.mock('./report', () => ({
  submitLog: jest.fn()
}))

test('Click event functions properly', () => {
  const { getByRole } = render(<Button />)
  const button = getByRole('button')
  
  fireEvent.click(button)
  // 验证外部依赖被正常调用，即可证明clickHandler触发
  expect(submitLog).toHaveBeenCalledWith('button_click_event')
})

特殊说明 #

不推荐为了测试强行把内部函数暴露到外部作用域，这类测试会和组件实现强绑定，只要你修改内部函数名、逻辑结构，哪怕功能正常测试也会失效，维护成本极高。

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