Next.js+TypeScript+Vitest组件错误处理测试问题排查

问题原因 #

你的ToastIcon组件在传入无效type时会抛出错误，但测试用expect(() => render(...)).toThrow()无法捕获，核心原因是React 18+的错误处理机制：组件渲染阶段抛出的错误会被React自动捕获并封装，不会直接冒泡到测试的同步执行上下文里，而是通过React内部的错误处理流程（如触发错误边界、输出控制台报错）处理，导致常规的同步断言失效。

解决方法 #

方法一：直接调用组件函数测试（推荐） #

ToastIcon是纯函数组件，直接调用它可以绕开React的错误捕获机制，让错误同步抛出，从而被toThrow断言正常捕获：

test('throws error for invalid type', () => {
  expect(() => ToastIcon({ type: 'invalidType' as unknown as ToastType }))
    .toThrowError('Unhandled ToastType: invalidType');
});

这种方式直接测试组件逻辑分支，不依赖React渲染环境，测试效率高且结果可靠。

方法二：监听控制台错误断言 #

如果需要验证组件在渲染环境中的错误行为，可以监听console.error，避免错误污染测试日志的同时断言错误信息：

import { vi } from 'vitest';

test('throws error when rendering with invalid type', async () => {
  // 拦截console.error，避免错误输出干扰测试
  const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
  
  try {
    render(<ToastIcon type='invalidType' as unknown as ToastType />);
    // 等待React完成错误处理流程
    await new Promise(resolve => setTimeout(resolve, 0));
    // 断言错误信息符合预期
    expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining('Unhandled ToastType: invalidType'));
  } finally {
    // 恢复console.error的原始行为
    consoleErrorSpy.mockRestore();
  }
});

方法三：用错误边界组件捕获错误 #

创建简单的错误边界组件包裹ToastIcon，通过断言错误边界的状态验证错误是否被捕获：

import React from 'react';

// 自定义错误边界组件
class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null as Error | null };

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

  render() {
    if (this.state.hasError) {
      return null;
    }
    return this.props.children;
  }
}

// 测试用例
test('captures error for invalid ToastType', () => {
  const { rerender, container } = render(
    <ErrorBoundary>
      <ToastIcon type='info' />
    </ErrorBoundary>
  );

  // 重新渲染传入无效类型
  rerender(
    <ErrorBoundary>
      <ToastIcon type='invalidType' as unknown as ToastType />
    </ErrorBoundary>
  );

  // 获取错误边界实例并断言错误
  const errorBoundary = container.parentElement?.querySelector('ErrorBoundary') as InstanceType<typeof ErrorBoundary>;
  expect(errorBoundary.state.error?.message).toBe('Unhandled ToastType: invalidType');
});

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