Problem
src/components/ErrorBoundary.tsx is a class component that catches React render errors and shows a fallback UI with "Try again" and "Reload page" buttons. It has zero tests. Class-component error boundaries cannot be tested with simple unit tests, but they can be tested with React Testing Library by rendering a child component that throws conditionally.
Two specific untested behaviors: (1) when a child throws during render, the fallback UI appears — but no test verifies the fallback contains the error message; (2) clicking "Try again" calls reset() and re-renders children — but no test verifies the children re-mount correctly after reset, which is critical since a bad reset implementation could cause an infinite loop.
Solution
Create a ThrowingComponent test helper that throws when a shouldThrow prop is true. Write tests:
- Children render normally when
shouldThrow is false
- Fallback UI appears when
shouldThrow is true (child throws during render)
- Fallback displays the thrown error message
- Clicking "Try again" clears the boundary state and re-mounts children
- The optional
fallback render prop is used when provided instead of the default UI
console.error is suppressed during error boundary tests to keep output clean
Acceptance Criteria
Note for Contributors: If you're assigned to this issue, write a clear and detailed description for your pull request. Explain what was changed, why it was needed, how it was implemented, and include any relevant testing or screenshots where applicable.
Problem
src/components/ErrorBoundary.tsxis a class component that catches React render errors and shows a fallback UI with "Try again" and "Reload page" buttons. It has zero tests. Class-component error boundaries cannot be tested with simple unit tests, but they can be tested with React Testing Library by rendering a child component that throws conditionally.Two specific untested behaviors: (1) when a child throws during render, the fallback UI appears — but no test verifies the fallback contains the error message; (2) clicking "Try again" calls
reset()and re-renders children — but no test verifies the children re-mount correctly after reset, which is critical since a bad reset implementation could cause an infinite loop.Solution
Create a
ThrowingComponenttest helper that throws when ashouldThrowprop istrue. Write tests:shouldThrowisfalseshouldThrowistrue(child throws during render)fallbackrender prop is used when provided instead of the default UIconsole.erroris suppressed during error boundary tests to keep output cleanAcceptance Criteria
fallbackrender prop is rendered when providedconsole.erroris mocked to suppress expected React error boundary logsnpm test