import { beforeEach, describe, expect, it, vi } from 'vitest'; import { render, screen, waitFor } from '@testing-library/react'; import { ErrorBoundary } from '@/components/ErrorBoundary'; // 用于触发错误的测试子组件 function ThrowError({ message }: { message: string }): never { throw new Error(message); } // 正常渲染的子组件 function NormalComponent({ text }: { text: string }) { return
{text}
; } describe('ErrorBoundary', () => { beforeEach(() => { // 抑制测试中故意抛出的错误日志 vi.spyOn(console, 'error').mockImplementation(() => {}); }); it('正常渲染子组件', () => { render( , ); expect(screen.getByTestId('normal-content')).toHaveTextContent('正常内容'); }); it('子组件抛出错误时显示错误 UI', () => { render( , ); expect(screen.getByText('糟糕,出了点问题')).toBeInTheDocument(); expect(screen.getByText(/测试错误/)).toBeInTheDocument(); }); it('children 变化时重置错误状态', async () => { const { rerender } = render( , ); expect(screen.getByText('糟糕,出了点问题')).toBeInTheDocument(); // 切换到正常子组件 rerender( , ); await waitFor(() => { expect(screen.getByTestId('normal-content')).toHaveTextContent('恢复后的内容'); }); expect(screen.queryByText('糟糕,出了点问题')).not.toBeInTheDocument(); }); it('相同的 children 不重置错误状态', () => { const { rerender } = render( , ); expect(screen.getByText('糟糕,出了点问题')).toBeInTheDocument(); // 用相同的 children rerender rerender( , ); expect(screen.getByText('糟糕,出了点问题')).toBeInTheDocument(); }); it('错误 UI 包含刷新按钮', () => { const reloadMock = vi.fn(); Object.defineProperty(window, 'location', { value: { reload: reloadMock }, writable: true, }); render( , ); const refreshButton = screen.getByRole('button', { name: /刷新应用/ }); expect(refreshButton).toBeInTheDocument(); refreshButton.click(); expect(reloadMock).toHaveBeenCalledTimes(1); }); });