[Test] Outer boundary should not report errors from an inner boundary (#24618)
* Test to assert that hydration errors of an inner suspended boundary are not retained by an unsuspended outer boundary * lints
Josh Story committed
May 25, 2022 at 14:10 UTC
05c34dea91eced40d08cd72432087c1e26a4f59c
1 file changed
+46
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+46
@@ -3531,4 +3531,50 @@ describe('ReactDOMFizzServer', () => {
3531
console.error = originalConsoleError;
3532
}
3533
});
3534
+
3535
+ // @gate experimental
3536
+ it('#24578 Hydration errors caused by a suspending component should not become recoverable when nested in an ancestor Suspense that is showing primary content', async () => {
3537
+ // this test failed before because hydration errors on the inner boundary were upgraded to recoverable by
3538
+ // a codepath of the outer boundary
3539
+ function App({isClient}) {
3540
+ return (
3541
+ <Suspense fallback={'outer'}>
3542
+ <Suspense fallback={'inner'}>
3543
+ <div>
3544
+ {isClient ? <AsyncText text="A" /> : <Text text="A" />}
3545
+ <b>B</b>
3546
+ </div>
3547
+ </Suspense>
3548
+ </Suspense>
3549
+ );
3550
+ }
3551
+ await act(async () => {
3552
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
3553
+ pipe(writable);
3554
+ });
3555
+
3556
+ const errors = [];
3557
+ ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
3558
+ onRecoverableError(error) {
3559
+ errors.push(error.message);
3560
+ },
3561
+ });
3562
+
3563
+ expect(Scheduler).toFlushAndYield([]);
3564
+ expect(errors).toEqual([]);
3565
+ expect(getVisibleChildren(container)).toEqual(
3566
+ <div>
3567
+ A<b>B</b>
3568
+ </div>,
3569
+ );
3570
+
3571
+ resolveText('A');
3572
+ expect(Scheduler).toFlushAndYield([]);
3573
+ expect(errors).toEqual([]);
3574
+ expect(getVisibleChildren(container)).toEqual(
3575
+ <div>
3576
+ A<b>B</b>
3577
+ </div>,
3578
+ );
3579
+ });
3580
});