Files
Alfred/tests/web/components/ErrorBoundary.test.tsx

63 lines
1.9 KiB
TypeScript

import { describe, expect, test } from "bun:test";
import { fireEvent, render, screen } from "@testing-library/react";
import { App as AntApp, ConfigProvider } from "antd";
import { createElement } from "react";
import { ErrorBoundary } from "../../../src/web/shared/components/ErrorBoundary";
function BrokenChild(): never {
throw new Error("render failed");
}
function captureConsoleError(callback: () => void): string[] {
const originalError = console.error;
const errors: string[] = [];
console.error = (...args: unknown[]) => {
errors.push(args.map(String).join(" "));
};
try {
callback();
} finally {
console.error = originalError;
}
return errors;
}
describe("ErrorBoundary", () => {
test("子组件渲染失败后展示错误结果并隔离 console.error", () => {
const errors = captureConsoleError(() => {
render(
createElement(
ConfigProvider,
null,
createElement(AntApp, null, createElement(ErrorBoundary, null, createElement(BrokenChild))),
),
);
});
expect(screen.getByText("渲染错误")).not.toBeNull();
expect(screen.getByText("页面渲染出现异常,请刷新重试")).not.toBeNull();
expect(screen.getByRole("button", { name: "刷新页面" })).not.toBeNull();
expect(errors.some((line) => line.includes("[Alfred:ERROR] 渲染错误"))).toBe(true);
});
test("点击刷新页面按钮不会破坏错误兜底界面", () => {
captureConsoleError(() => {
render(
createElement(
ConfigProvider,
null,
createElement(AntApp, null, createElement(ErrorBoundary, null, createElement(BrokenChild))),
),
);
});
expect(() => {
captureConsoleError(() => fireEvent.click(screen.getByRole("button", { name: "刷新页面" })));
}).not.toThrow();
expect(screen.getByText("渲染错误")).not.toBeNull();
});
});