File size: 3,706 Bytes
900a32d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { ErrorBoundary } from "../ErrorBoundary";
// Component that throws an error
function ThrowingComponent({ shouldThrow }: { shouldThrow: boolean }) {
if (shouldThrow) {
throw new Error("Test error message");
}
return <div>Normal content</div>;
}
describe("ErrorBoundary", () => {
// Suppress React error boundary console.error in tests
beforeEach(() => {
vi.spyOn(console, "error").mockImplementation(() => {});
});
it("renders children when there is no error", () => {
render(
<ErrorBoundary>
<div data-testid="child">Child content</div>
</ErrorBoundary>,
);
expect(screen.getByTestId("child")).toBeInTheDocument();
expect(screen.getByText("Child content")).toBeInTheDocument();
});
it("displays error UI when child throws", () => {
render(
<ErrorBoundary>
<ThrowingComponent shouldThrow={true} />
</ErrorBoundary>,
);
expect(screen.getByText("Something went wrong")).toBeInTheDocument();
expect(
screen.getByText(/an unexpected error occurred/i),
).toBeInTheDocument();
expect(screen.getByRole("button", { name: /try again/i })).toBeInTheDocument();
});
it("shows error details in expandable section", () => {
render(
<ErrorBoundary>
<ThrowingComponent shouldThrow={true} />
</ErrorBoundary>,
);
// Click to expand error details
const details = screen.getByText("Error details");
fireEvent.click(details);
expect(screen.getByText("Test error message")).toBeInTheDocument();
});
it("resets error state when Try Again is clicked", () => {
// Use a stateful wrapper to control whether child throws
let shouldThrow = true;
const StatefulThrower = () => {
if (shouldThrow) {
throw new Error("Test error");
}
return <div>Normal content</div>;
};
const { rerender } = render(
<ErrorBoundary>
<StatefulThrower />
</ErrorBoundary>,
);
// Verify error state
expect(screen.getByText("Something went wrong")).toBeInTheDocument();
// Fix the underlying issue before clicking retry
shouldThrow = false;
// Click Try Again - this resets ErrorBoundary state and re-renders children
fireEvent.click(screen.getByRole("button", { name: /try again/i }));
// Force rerender to trigger new render after state reset
rerender(
<ErrorBoundary>
<StatefulThrower />
</ErrorBoundary>,
);
// Should show normal content now since shouldThrow is false
expect(screen.getByText("Normal content")).toBeInTheDocument();
expect(screen.queryByText("Something went wrong")).not.toBeInTheDocument();
});
it("renders custom fallback when provided", () => {
const customFallback = <div data-testid="custom-fallback">Custom error UI</div>;
render(
<ErrorBoundary fallback={customFallback}>
<ThrowingComponent shouldThrow={true} />
</ErrorBoundary>,
);
expect(screen.getByTestId("custom-fallback")).toBeInTheDocument();
expect(screen.getByText("Custom error UI")).toBeInTheDocument();
// Should not show default error UI
expect(screen.queryByText("Something went wrong")).not.toBeInTheDocument();
});
it("logs error to console when error is caught", () => {
const consoleSpy = vi.spyOn(console, "error");
render(
<ErrorBoundary>
<ThrowingComponent shouldThrow={true} />
</ErrorBoundary>,
);
// ErrorBoundary should have called console.error
expect(consoleSpy).toHaveBeenCalled();
});
});
|