如何用Error Boundary测试事件处理器：回调缺失场景

问题描述 #

我有一个包含回调函数的React组件，希望编写测试用例验证当回调函数缺失时console.error会被调用。我使用Error Boundary编写了示例，但测试无法正常运行，想知道问题出在哪，以及有没有更优的测试方式。

我的Error Boundary代码 #

export class ErrorBoundary extends Component {
  static defaultProps = { logger: console }
  constructor(props: ErrorBoundaryPropType) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true }
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error(error)
  }

  render() {
    return this.props.children
  }
}

我的测试代码 #

it('should handle missing callbacks', async () => {
    const onClick = undefined
    const consoleSpy = jest.spyOn(console, 'error')

    render(
      <ErrorBoundary>
        <button onClick={() => onClick('key')}>Generate Key</button>
      </ErrorBoundary>
    )

    const button = screen.getByRole('button', {
      name: /Generate Key/i,
    })

    await userEvent.click(button)
    expect(consoleSpy).toHaveBeenCalledWith(expect.any(TypeError))
  })

问题排查 #

测试失效的核心原因是React Error Boundary的捕获范围限制：

• Error Boundary仅能捕获渲染阶段、组件生命周期方法、子组件构造函数中抛出的错误；
• 事件处理函数（比如按钮的onClick）中的错误属于同步执行的回调，不会冒泡到Error Boundary，因此你的Error Boundary根本没机会捕获这个错误，自然console.error不会被它触发。

另外你的Error Boundary还有个小问题：定义了logger默认props，但componentDidCatch里直接用了console.error，没用到传入的logger，不过这不是测试失败的关键。

修复方案（让Error Boundary能捕获事件错误） #

要让Error Boundary捕获事件回调里的错误，需要把错误转移到React的渲染周期中，通过状态更新触发渲染时抛出错误：

步骤1：封装带错误捕获的按钮组件 #

import { useState } from 'react'

const ErrorCatchingButton = ({ onClick, children }) => {
  const [triggerError, setTriggerError] = useState<Error | null>(null)

  // 渲染时如果有错误，直接抛出让Error Boundary捕获
  if (triggerError) {
    throw triggerError
  }

  const handleClick = () => {
    try {
      onClick('key')
    } catch (err) {
      // 用状态更新触发渲染，从而抛出错误
      setTriggerError(err as Error)
    }
  }

  return <button onClick={handleClick}>{children}</button>
}

步骤2：修改测试代码 #

it('should handle missing callbacks', async () => {
  const onClick = undefined
  const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})

  render(
    <ErrorBoundary>
      <ErrorCatchingButton onClick={onClick}>Generate Key</ErrorCatchingButton>
    </ErrorBoundary>
  )

  await userEvent.click(screen.getByRole('button', { name: /Generate Key/i }))
  
  expect(consoleSpy).toHaveBeenCalledWith(expect.any(TypeError))
  
  // 清理spy，避免影响其他测试
  consoleSpy.mockRestore()
})

更优测试方式：无需Error Boundary #

其实你要验证的是"回调缺失时console.error被调用"，而事件回调里的错误会直接触发全局的console.error，完全不需要Error Boundary，测试可以更简洁：

it('should trigger console.error when onClick is missing', async () => {
  const onClick = undefined
  // 替换console.error的实现，避免测试时打印错误信息
  const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})

  render(
    <button onClick={() => onClick('key')}>Generate Key</button>
  )

  await userEvent.click(screen.getByRole('button', { name: /Generate Key/i }))
  
  // 验证错误被打印
  expect(consoleSpy).toHaveBeenCalledWith(expect.any(TypeError))
  
  // 恢复console.error的原始实现
  consoleSpy.mockRestore()
})

这种方式直接监听全局console.error，跳过Error Boundary的复杂逻辑，更贴合你的测试目标。

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