使用Vitest测试React中window.onerror调用失败的问题求助

问题原因 #

Vitest默认会捕获React事件循环中抛出的未处理错误，阻止其传播到window.onerror；而Jest的错误处理机制允许这类错误冒泡到全局层面，导致相同测试逻辑在两个框架下表现不一致。

可行解决方案 #

方案1：修改Vitest配置，允许错误传播到全局 #

在vitest.config.js中禁用Vitest的未捕获错误拦截功能，让错误自然触发window.onerror：

// vitest.config.js
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    // 禁用Vitest对未捕获错误的处理，允许错误传播到window.onerror
    unhandledErrors: false,
    // 可选：开启后可在控制台查看错误日志
    silent: false
  }
})

修改配置后，原测试代码无需改动即可正常断言window.onerror被调用。

方案2：将错误抛出到React事件循环外 #

如果不想修改Vitest全局配置，可以在组件的事件处理器中，通过setTimeout将错误抛到宏任务队列，绕过React的事件错误捕获：

// 组件代码示例
function ErrorButton() {
  const handleClick = () => {
    // 用setTimeout跳出React事件循环，让错误触发window.onerror
    setTimeout(() => {
      throw new Error('Test error from click handler')
    }, 0)
  }

  return <button onClick={handleClick}>Trigger Error</button>
}

测试时需要用waitFor等待宏任务执行完成：

// 测试代码
import { render, screen, waitFor } from '@testing-library/react'
import ErrorButton from './ErrorButton'
import { vi } from 'vitest'

test('click triggers window.onerror', async () => {
  const onerrorSpy = vi.spyOn(window, 'onerror').mockImplementation(() => true)
  
  render(<ErrorButton />)
  screen.getByText('Trigger Error').click()

  await waitFor(() => {
    expect(onerrorSpy).toHaveBeenCalledWith(
      'Test error from click handler',
      expect.any(String),
      expect.any(Number),
      expect.any(Number),
      expect.any(Error)
    )
  })

  onerrorSpy.mockRestore()
})

方案3：用错误边界手动转发错误 #

如果需要保持组件原有逻辑不变，可以添加一个错误边界组件，捕获React事件中的错误后手动调用window.onerror：

// 错误边界组件
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // 将捕获到的错误转发给window.onerror
    window.onerror(error.message, errorInfo.componentStack)
  }

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

测试时用错误边界包裹目标组件：

// 测试代码
import { render, screen } from '@testing-library/react'
import ErrorButton from './ErrorButton'
import ErrorBoundary from './ErrorBoundary'
import { vi } from 'vitest'

test('click triggers window.onerror via error boundary', () => {
  const onerrorSpy = vi.spyOn(window, 'onerror').mockImplementation(() => true)
  
  render(
    <ErrorBoundary>
      <ErrorButton />
    </ErrorBoundary>
  )
  screen.getByText('Trigger Error').click()

  expect(onerrorSpy).toHaveBeenCalled()
  onerrorSpy.mockRestore()
})

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