From be9e8795dd0041590ee55b0c386de502c336f4d2 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Thu, 9 Jan 2025 16:15:55 +0900
Subject: [PATCH] chore: add case to compare with react-error-boundary

---
 packages/react/package.json               |  3 ++-
 packages/react/src/ErrorBoundary.spec.tsx | 29 ++++++++++++++++++++++-
 pnpm-lock.yaml                            |  3 +++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index d1c4105b9..06e222332 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -53,7 +53,8 @@
     "@suspensive/tsconfig": "workspace:*",
     "@suspensive/tsup": "workspace:*",
     "@types/react": "catalog:react19",
-    "react": "catalog:react19"
+    "react": "catalog:react19",
+    "react-error-boundary": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19"
diff --git a/packages/react/src/ErrorBoundary.spec.tsx b/packages/react/src/ErrorBoundary.spec.tsx
index 8132526d2..1a8d08427 100644
--- a/packages/react/src/ErrorBoundary.spec.tsx
+++ b/packages/react/src/ErrorBoundary.spec.tsx
@@ -2,6 +2,7 @@ import { act, render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import ms from 'ms'
 import { type ComponentRef, createElement, createRef } from 'react'
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'
 import {
   ErrorBoundary,
   type ErrorBoundaryFallbackProps,
@@ -294,7 +295,7 @@ describe('<ErrorBoundary/>', () => {
     }
   )
 
-  it('should re-throw error occurred by fallback', async () => {
+  it('should re-throw error in fallback', async () => {
     render(
       <ErrorBoundary fallback={() => <>This is expected</>}>
         <ErrorBoundary
@@ -315,6 +316,32 @@ describe('<ErrorBoundary/>', () => {
     await waitFor(() => expect(screen.queryByText("ErrorBoundary's fallback before error")).toBeInTheDocument())
     await waitFor(() => expect(screen.queryByText('This is expected')).toBeInTheDocument())
   })
+  it('should not re-throw error in fallback (react-error-boundary)', async () => {
+    render(
+      <ReactErrorBoundary fallbackRender={() => <>This is expected</>}>
+        <ReactErrorBoundary
+          fallbackRender={() => (
+            <Throw.Error message={ERROR_MESSAGE} after={100}>
+              ErrorBoundary(react-error-boundary)'s fallback before error
+            </Throw.Error>
+          )}
+        >
+          <Throw.Error message={ERROR_MESSAGE} after={100}>
+            ErrorBoundary(react-error-boundary)'s children before error
+          </Throw.Error>
+        </ReactErrorBoundary>
+      </ReactErrorBoundary>
+    )
+
+    expect(screen.queryByText("ErrorBoundary(react-error-boundary)'s children before error")).toBeInTheDocument()
+    await waitFor(() =>
+      expect(screen.queryByText("ErrorBoundary(react-error-boundary)'s fallback before error")).toBeInTheDocument()
+    )
+    await waitFor(() => expect(screen.queryByText('This is expected')).not.toBeInTheDocument())
+    await waitFor(() =>
+      expect(screen.queryByText("ErrorBoundary(react-error-boundary)'s fallback before error")).toBeInTheDocument()
+    )
+  })
 })
 
 describe('<ErrorBoundary.Consumer/>', () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 994abb82d..5e7e15441 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -707,6 +707,9 @@ importers:
       react:
         specifier: catalog:react19
         version: 19.0.0
+      react-error-boundary:
+        specifier: ^5.0.0
+        version: 5.0.0(react@19.0.0)
 
   packages/react-dom:
     devDependencies: