meno-core 1.0.53 → 1.1.0

package/lib/client/ErrorBoundary.test.tsx

@@ -1,8 +1,9 @@
-import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
-import { ErrorBoundary, withErrorBoundary } from "./ErrorBoundary";
-import React, { createElement as h, Component, useState } from "react";
-import { createRoot, Root } from "react-dom/client";
-import { flushPromises, wait } from "../test-utils/helpers/asyncHelpers";
+import { test, expect, describe, beforeEach, afterEach, mock } from 'bun:test';
+import { ErrorBoundary, withErrorBoundary } from './ErrorBoundary';
+import type React from 'react';
+import { createElement as h, Component } from 'react';
+import { createRoot } from 'react-dom/client';
+import { wait } from '../test-utils/helpers/asyncHelpers';
 
 // Mock console.error to avoid noise in test output
 const originalConsoleError = console.error;
@@ -19,7 +20,7 @@ afterEach(() => {
 
 // Helper to create test container
 function createTestContainer() {
-  const div = document.createElement("div");
+  const div = document.createElement('div');
   document.body.appendChild(div);
   return div;
 }
@@ -27,7 +28,7 @@ function createTestContainer() {
 function cleanupContainer(container: HTMLElement) {
   try {
     document.body.removeChild(container);
-  } catch (e) {
+  } catch (_e) {
     // Already removed
   }
 }
@@ -38,92 +39,101 @@ function ThrowingComponent({ error }: { error: Error }): React.ReactNode {
 }
 
 // Component that throws conditionally
-class ConditionallyThrowingComponent extends Component<{ shouldThrow: boolean; error: Error }> {
+class _ConditionallyThrowingComponent extends Component<{ shouldThrow: boolean; error: Error }> {
   render() {
     if (this.props.shouldThrow) {
       throw this.props.error;
     }
-    return h("div", null, "Safe content");
+    return h('div', null, 'Safe content');
   }
 }
 
-describe("ErrorBoundary - Error catching", () => {
-  describe("Component render errors", () => {
-    test("should catch errors thrown during render and display fallback UI", async () => {
+describe('ErrorBoundary - Error catching', () => {
+  describe('Component render errors', () => {
+    test('should catch errors thrown during render and display fallback UI', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const testError = new Error("Test render error");
-        const errorBoundary = h(ErrorBoundary, {
-          level: "component",
-          componentName: "TestComponent",
-          children: h(ThrowingComponent, { error: testError })
-        });
+        const testError = new Error('Test render error');
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'component',
+            componentName: 'TestComponent',
+          },
+          h(ThrowingComponent, { error: testError }),
+        );
 
         root.render(errorBoundary);
         await wait(10); // Wait for React to process error
 
         // Verify friendly fallback UI is displayed with the component name
-        expect(container.textContent).toContain("This section ran into a problem");
-        expect(container.textContent).toContain("TestComponent");
+        expect(container.textContent).toContain('This section ran into a problem');
+        expect(container.textContent).toContain('TestComponent');
       } finally {
         root.unmount();
         cleanupContainer(container);
       }
     });
 
-    test("should render children when no error occurs", async () => {
+    test('should render children when no error occurs', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const errorBoundary = h(ErrorBoundary, {
-          level: "component",
-          componentName: "TestComponent",
-          children: h("div", null, "Safe content")
-        });
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'component',
+            componentName: 'TestComponent',
+          },
+          h('div', null, 'Safe content'),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
         // Should render the safe content
-        expect(container.textContent).toContain("Safe content");
+        expect(container.textContent).toContain('Safe content');
         // Should NOT show error UI
-        expect(container.textContent).not.toContain("This section ran into a problem");
+        expect(container.textContent).not.toContain('This section ran into a problem');
       } finally {
         root.unmount();
         cleanupContainer(container);
       }
     });
 
-    test("getDerivedStateFromError should return correct state shape", () => {
-      const error = new Error("Test error");
+    test('getDerivedStateFromError should return correct state shape', () => {
+      const error = new Error('Test error');
       const state = ErrorBoundary.getDerivedStateFromError(error);
 
       expect(state?.hasError).toBe(true);
       expect(state?.error).toBe(error);
     });
 
-    test("should call onError callback when error is caught", async () => {
+    test('should call onError callback when error is caught', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
       const onErrorMock = mock(() => {});
 
       try {
-        const testError = new Error("Callback test error");
-        const errorBoundary = h(ErrorBoundary, {
-          level: "component",
-          onError: onErrorMock,
-          children: h(ThrowingComponent, { error: testError })
-        });
+        const testError = new Error('Callback test error');
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'component',
+            onError: onErrorMock,
+          },
+          h(ThrowingComponent, { error: testError }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
         // Verify onError callback was called with the error
         expect(onErrorMock).toHaveBeenCalled();
-        const callArgs = (onErrorMock.mock.calls as unknown as [Error, unknown][])[0];
+        const callArgs = (onErrorMock.mock.calls as unknown as [Error, unknown][])[0]!;
         expect(callArgs[0]).toBe(testError);
       } finally {
         root.unmount();
@@ -132,46 +142,52 @@ describe("ErrorBoundary - Error catching", () => {
     });
   });
 
-  describe("Page level errors", () => {
-    test("should display page-level error UI when level is page", async () => {
+  describe('Page level errors', () => {
+    test('should display page-level error UI when level is page', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const testError = new Error("Page rendering failed");
-        const errorBoundary = h(ErrorBoundary, {
-          level: "page",
-          children: h(ThrowingComponent, { error: testError })
-        });
+        const testError = new Error('Page rendering failed');
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'page',
+          },
+          h(ThrowingComponent, { error: testError }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
         // Should show friendly page-level error UI
-        expect(container.textContent).toContain("This section ran into a problem");
+        expect(container.textContent).toContain('This section ran into a problem');
         // Raw message is preserved in the collapsible technical details.
-        expect(container.textContent).toContain("Page rendering failed");
+        expect(container.textContent).toContain('Page rendering failed');
       } finally {
         root.unmount();
         cleanupContainer(container);
       }
     });
 
-    test("should render page content when no error occurs", async () => {
+    test('should render page content when no error occurs', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const errorBoundary = h(ErrorBoundary, {
-          level: "page",
-          children: h("div", null, "Page content")
-        });
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'page',
+          },
+          h('div', null, 'Page content'),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
-        expect(container.textContent).toContain("Page content");
-        expect(container.textContent).not.toContain("This section ran into a problem");
+        expect(container.textContent).toContain('Page content');
+        expect(container.textContent).not.toContain('This section ran into a problem');
       } finally {
         root.unmount();
         cleanupContainer(container);
@@ -179,28 +195,31 @@ describe("ErrorBoundary - Error catching", () => {
     });
   });
 
-  describe("Custom fallback UI", () => {
-    test("should use custom fallback when provided", async () => {
+  describe('Custom fallback UI', () => {
+    test('should use custom fallback when provided', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const testError = new Error("Custom error");
-        const customFallback = (error: Error) => h("div", null, `Custom fallback: ${error.message}`);
-
-        const errorBoundary = h(ErrorBoundary, {
-          level: "component",
-          fallback: customFallback,
-          children: h(ThrowingComponent, { error: testError })
-        });
+        const testError = new Error('Custom error');
+        const customFallback = (error: Error) => h('div', null, `Custom fallback: ${error.message}`);
+
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'component',
+            fallback: customFallback,
+          },
+          h(ThrowingComponent, { error: testError }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
         // Should show custom fallback
-        expect(container.textContent).toContain("Custom fallback: Custom error");
+        expect(container.textContent).toContain('Custom fallback: Custom error');
         // Should NOT show default error UI
-        expect(container.textContent).not.toContain("This section ran into a problem");
+        expect(container.textContent).not.toContain('This section ran into a problem');
       } finally {
         root.unmount();
         cleanupContainer(container);
@@ -208,26 +227,26 @@ describe("ErrorBoundary - Error catching", () => {
     });
   });
 
-  describe("Error state management", () => {
-    test("getDerivedStateFromError should set hasError to true", () => {
-      const error = new Error("Test");
+  describe('Error state management', () => {
+    test('getDerivedStateFromError should set hasError to true', () => {
+      const error = new Error('Test');
       const state = ErrorBoundary.getDerivedStateFromError(error);
 
       expect(state?.hasError).toBe(true);
       expect(state?.error).toBe(error);
     });
 
-    test("should handle different error types", () => {
-      const typeError = new TypeError("Type error");
-      const refError = new ReferenceError("Reference error");
-      const syntaxError = new SyntaxError("Syntax error");
+    test('should handle different error types', () => {
+      const typeError = new TypeError('Type error');
+      const refError = new ReferenceError('Reference error');
+      const syntaxError = new SyntaxError('Syntax error');
 
       expect(ErrorBoundary.getDerivedStateFromError(typeError)?.error).toBeInstanceOf(TypeError);
       expect(ErrorBoundary.getDerivedStateFromError(refError)?.error).toBeInstanceOf(ReferenceError);
       expect(ErrorBoundary.getDerivedStateFromError(syntaxError)?.error).toBeInstanceOf(SyntaxError);
     });
 
-    test("should handle null errors gracefully", () => {
+    test('should handle null errors gracefully', () => {
       const state = ErrorBoundary.getDerivedStateFromError(null as any);
 
       expect(state?.hasError).toBe(true);
@@ -235,44 +254,50 @@ describe("ErrorBoundary - Error catching", () => {
   });
 });
 
-describe("ErrorBoundary - Error display", () => {
-  describe("Error message rendering", () => {
-    test("should display error message in fallback UI", async () => {
+describe('ErrorBoundary - Error display', () => {
+  describe('Error message rendering', () => {
+    test('should display error message in fallback UI', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const errorBoundary = h(ErrorBoundary, {
-          level: "component",
-          children: h(ThrowingComponent, { error: new Error("Specific error message") })
-        });
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'component',
+          },
+          h(ThrowingComponent, { error: new Error('Specific error message') }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
         // Component-level shows friendly copy; the raw message is dev-only.
-        expect(container.textContent).toContain("This section ran into a problem");
+        expect(container.textContent).toContain('This section ran into a problem');
       } finally {
         root.unmount();
         cleanupContainer(container);
       }
     });
 
-    test("should handle errors without messages", async () => {
+    test('should handle errors without messages', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const errorBoundary = h(ErrorBoundary, {
-          level: "component",
-          children: h(ThrowingComponent, { error: new Error() })
-        });
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'component',
+          },
+          h(ThrowingComponent, { error: new Error() }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
         // Should still show error UI even without message
-        expect(container.textContent).toContain("This section ran into a problem");
+        expect(container.textContent).toContain('This section ran into a problem');
       } finally {
         root.unmount();
         cleanupContainer(container);
@@ -280,43 +305,49 @@ describe("ErrorBoundary - Error display", () => {
     });
   });
 
-  describe("Component name display", () => {
-    test("should display componentName in error UI", async () => {
+  describe('Component name display', () => {
+    test('should display componentName in error UI', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const errorBoundary = h(ErrorBoundary, {
-          level: "component",
-          componentName: "MyCustomComponent",
-          children: h(ThrowingComponent, { error: new Error("Error") })
-        });
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'component',
+            componentName: 'MyCustomComponent',
+          },
+          h(ThrowingComponent, { error: new Error('Error') }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
-        expect(container.textContent).toContain("MyCustomComponent");
-        expect(container.textContent).toContain("This section ran into a problem");
+        expect(container.textContent).toContain('MyCustomComponent');
+        expect(container.textContent).toContain('This section ran into a problem');
       } finally {
         root.unmount();
         cleanupContainer(container);
       }
     });
 
-    test("should display generic error when componentName is not provided", async () => {
+    test('should display generic error when componentName is not provided', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const errorBoundary = h(ErrorBoundary, {
-          level: "component",
-          children: h(ThrowingComponent, { error: new Error("Error") })
-        });
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'component',
+          },
+          h(ThrowingComponent, { error: new Error('Error') }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
-        expect(container.textContent).toContain("This section ran into a problem");
+        expect(container.textContent).toContain('This section ran into a problem');
       } finally {
         root.unmount();
         cleanupContainer(container);
@@ -324,40 +355,46 @@ describe("ErrorBoundary - Error display", () => {
     });
   });
 
-  describe("Error level handling", () => {
-    test("should render component-level UI by default", async () => {
+  describe('Error level handling', () => {
+    test('should render component-level UI by default', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const errorBoundary = h(ErrorBoundary, {
-          // No level prop - should default to 'component'
-          children: h(ThrowingComponent, { error: new Error("Test") })
-        });
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            // No level prop - should default to 'component'
+          },
+          h(ThrowingComponent, { error: new Error('Test') }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
 
         // Component-level shows the friendly title...
-        expect(container.textContent).toContain("This section ran into a problem");
+        expect(container.textContent).toContain('This section ran into a problem');
         // ...but NOT the page-level "Reload Page" affordance.
-        expect(container.textContent).not.toContain("Reload Page");
+        expect(container.textContent).not.toContain('Reload Page');
       } finally {
         root.unmount();
         cleanupContainer(container);
       }
     });
 
-    test("should log error to console with correct level", async () => {
+    test('should log error to console with correct level', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const errorBoundary = h(ErrorBoundary, {
-          level: "page",
-          componentName: "TestPage",
-          children: h(ThrowingComponent, { error: new Error("Log test") })
-        });
+        const errorBoundary = h(
+          ErrorBoundary,
+          {
+            level: 'page',
+            componentName: 'TestPage',
+          },
+          h(ThrowingComponent, { error: new Error('Log test') }),
+        );
 
         root.render(errorBoundary);
         await wait(10);
@@ -372,61 +409,61 @@ describe("ErrorBoundary - Error display", () => {
   });
 });
 
-describe("ErrorBoundary - withErrorBoundary utility", () => {
-  describe("Error catching", () => {
-    test("should catch synchronous errors in render function", () => {
+describe('ErrorBoundary - withErrorBoundary utility', () => {
+  describe('Error catching', () => {
+    test('should catch synchronous errors in render function', () => {
       const throwingFn = () => {
-        throw new Error("Render error");
+        throw new Error('Render error');
       };
 
       // Should not throw - returns an ErrorBoundary element instead
       const result = withErrorBoundary(throwingFn, {
-        componentName: "TestComponent"
+        componentName: 'TestComponent',
       });
 
       // Result should be a React element (ErrorBoundary)
       expect(result).toBeDefined();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should return result when no error occurs", () => {
-      const successFn = () => "Success";
+    test('should return result when no error occurs', () => {
+      const successFn = () => 'Success';
 
       const result = withErrorBoundary(successFn);
 
-      expect(result).toBe("Success");
+      expect(result).toBe('Success');
     });
 
-    test("should render wrapped component content when no error", async () => {
+    test('should render wrapped component content when no error', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
-        const successFn = () => h("div", null, "Wrapped content");
+        const successFn = () => h('div', null, 'Wrapped content');
         const wrapped = withErrorBoundary(successFn, {
-          componentName: "WrappedComponent"
+          componentName: 'WrappedComponent',
         });
 
         root.render(wrapped);
         await wait(10);
 
-        expect(container.textContent).toContain("Wrapped content");
+        expect(container.textContent).toContain('Wrapped content');
       } finally {
         root.unmount();
         cleanupContainer(container);
       }
     });
 
-    test("should render error boundary when function throws", async () => {
+    test('should render error boundary when function throws', async () => {
       const container = createTestContainer();
       const root = createRoot(container);
 
       try {
         const throwingFn = () => {
-          throw new Error("Sync error");
+          throw new Error('Sync error');
         };
         const wrapped = withErrorBoundary(throwingFn, {
-          componentName: "FailingComponent"
+          componentName: 'FailingComponent',
         });
 
         root.render(wrapped);
@@ -442,26 +479,26 @@ describe("ErrorBoundary - withErrorBoundary utility", () => {
     });
   });
 
-  describe("Error handling options", () => {
-    test("should pass options to the error boundary", () => {
+  describe('Error handling options', () => {
+    test('should pass options to the error boundary', () => {
       const onErrorMock = mock(() => {});
 
       const throwingFn = () => {
-        throw new Error("Test error");
+        throw new Error('Test error');
       };
 
       const result = withErrorBoundary(throwingFn, {
-        componentName: "TestComponent",
-        level: "page",
-        onError: onErrorMock
+        componentName: 'TestComponent',
+        level: 'page',
+        onError: onErrorMock,
       });
 
       // Result is an ErrorBoundary element with the provided props
       expect(result).toBeDefined();
     });
 
-    test("should use default options when not provided", () => {
-      const successFn = () => h("div", null, "Content");
+    test('should use default options when not provided', () => {
+      const successFn = () => h('div', null, 'Content');
 
       const result = withErrorBoundary(successFn);
 
@@ -471,63 +508,72 @@ describe("ErrorBoundary - withErrorBoundary utility", () => {
   });
 });
 
-describe("ErrorBoundary - Error types", () => {
-  test("should catch and display TypeError", async () => {
+describe('ErrorBoundary - Error types', () => {
+  test('should catch and display TypeError', async () => {
     const container = createTestContainer();
     const root = createRoot(container);
 
     try {
-      const errorBoundary = h(ErrorBoundary, {
-        level: "component",
-        children: h(ThrowingComponent, { error: new TypeError("Type mismatch") })
-      });
+      const errorBoundary = h(
+        ErrorBoundary,
+        {
+          level: 'component',
+        },
+        h(ThrowingComponent, { error: new TypeError('Type mismatch') }),
+      );
 
       root.render(errorBoundary);
       await wait(10);
 
-      expect(container.textContent).toContain("This section ran into a problem");
+      expect(container.textContent).toContain('This section ran into a problem');
     } finally {
       root.unmount();
       cleanupContainer(container);
     }
   });
 
-  test("should catch and display ReferenceError", async () => {
+  test('should catch and display ReferenceError', async () => {
     const container = createTestContainer();
     const root = createRoot(container);
 
     try {
-      const errorBoundary = h(ErrorBoundary, {
-        level: "component",
-        children: h(ThrowingComponent, { error: new ReferenceError("undefined variable") })
-      });
+      const errorBoundary = h(
+        ErrorBoundary,
+        {
+          level: 'component',
+        },
+        h(ThrowingComponent, { error: new ReferenceError('undefined variable') }),
+      );
 
       root.render(errorBoundary);
       await wait(10);
 
       // Raw message is dev-only for component-level; friendly title always shows.
-      expect(container.textContent).toContain("This section ran into a problem");
+      expect(container.textContent).toContain('This section ran into a problem');
     } finally {
       root.unmount();
       cleanupContainer(container);
     }
   });
 
-  test("should display custom error messages clearly", async () => {
+  test('should display custom error messages clearly', async () => {
     const container = createTestContainer();
     const root = createRoot(container);
 
     try {
-      const errorBoundary = h(ErrorBoundary, {
-        level: "component",
-        children: h(ThrowingComponent, { error: new Error("Invalid component definition: Missing structure") })
-      });
+      const errorBoundary = h(
+        ErrorBoundary,
+        {
+          level: 'component',
+        },
+        h(ThrowingComponent, { error: new Error('Invalid component definition: Missing structure') }),
+      );
 
       root.render(errorBoundary);
       await wait(10);
 
       // Friendly, plain-language copy replaces the raw JS message for end users.
-      expect(container.textContent).toContain("This section ran into a problem");
+      expect(container.textContent).toContain('This section ran into a problem');
     } finally {
       root.unmount();
       cleanupContainer(container);
@@ -535,60 +581,74 @@ describe("ErrorBoundary - Error types", () => {
   });
 });
 
-describe("ErrorBoundary - Multiple instances", () => {
-  test("should isolate errors to their own boundary", async () => {
+describe('ErrorBoundary - Multiple instances', () => {
+  test('should isolate errors to their own boundary', async () => {
     const container = createTestContainer();
     const root = createRoot(container);
 
     try {
       // Create a parent with two error boundaries - one throws, one doesn't
-      const app = h("div", null,
-        h(ErrorBoundary, {
-          level: "component",
-          componentName: "ThrowingChild",
-          children: h(ThrowingComponent, { error: new Error("Child error") })
-        }),
-        h(ErrorBoundary, {
-          level: "component",
-          componentName: "SafeChild",
-          children: h("div", null, "Safe content")
-        })
+      const app = h(
+        'div',
+        null,
+        h(
+          ErrorBoundary,
+          {
+            level: 'component',
+            componentName: 'ThrowingChild',
+          },
+          h(ThrowingComponent, { error: new Error('Child error') }),
+        ),
+        h(
+          ErrorBoundary,
+          {
+            level: 'component',
+            componentName: 'SafeChild',
+          },
+          h('div', null, 'Safe content'),
+        ),
       );
 
       root.render(app);
       await wait(10);
 
       // Both should be in the DOM
-      expect(container.textContent).toContain("This section ran into a problem");
-      expect(container.textContent).toContain("Safe content");
+      expect(container.textContent).toContain('This section ran into a problem');
+      expect(container.textContent).toContain('Safe content');
     } finally {
       root.unmount();
       cleanupContainer(container);
     }
   });
 
-  test("should handle nested error boundaries", async () => {
+  test('should handle nested error boundaries', async () => {
     const container = createTestContainer();
     const root = createRoot(container);
 
     try {
       // Outer boundary catches errors that inner boundary doesn't handle
-      const app = h(ErrorBoundary, {
-        level: "page",
-        children: h(ErrorBoundary, {
-          level: "component",
-          componentName: "InnerComponent",
-          children: h(ThrowingComponent, { error: new Error("Inner error") })
-        })
-      });
+      const app = h(
+        ErrorBoundary,
+        {
+          level: 'page',
+        },
+        h(
+          ErrorBoundary,
+          {
+            level: 'component',
+            componentName: 'InnerComponent',
+          },
+          h(ThrowingComponent, { error: new Error('Inner error') }),
+        ),
+      );
 
       root.render(app);
       await wait(10);
 
       // Inner (component-level) boundary catches it: friendly title shows,
       // and the page-level "Reload Page" affordance does not.
-      expect(container.textContent).toContain("This section ran into a problem");
-      expect(container.textContent).not.toContain("Reload Page");
+      expect(container.textContent).toContain('This section ran into a problem');
+      expect(container.textContent).not.toContain('Reload Page');
     } finally {
       root.unmount();
       cleanupContainer(container);