diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js index 5f32046683190..6cdd82fefb011 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js @@ -453,17 +453,17 @@ describe('ReactDOMServerPartialHydration', () => { // Client rendered - suspense comment nodes removed. expect(container.innerHTML).toBe('Hello
Mismatch
'); if (__DEV__) { - const secondToLastCall = - mockError.mock.calls[mockError.mock.calls.length - 2]; - expect(secondToLastCall).toEqual([ - 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', - 'article', - 'section', - '\n' + - ' in article (at **)\n' + - ' in Component (at **)\n' + - ' in Suspense (at **)\n' + - ' in App (at **)', + expect(mockError.mock.calls).toEqual([ + [ + 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', + 'article', + 'section', + '\n' + + ' in article (at **)\n' + + ' in Component (at **)\n' + + ' in Suspense (at **)\n' + + ' in App (at **)', + ], ]); } } finally { @@ -561,19 +561,19 @@ describe('ReactDOMServerPartialHydration', () => { '
Mismatch
', ); if (__DEV__) { - const secondToLastCall = - mockError.mock.calls[mockError.mock.calls.length - 2]; - expect(secondToLastCall).toEqual([ - 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', - 'article', - 'div', - '\n' + - ' in article (at **)\n' + - ' in Component (at **)\n' + - ' in div (at **)\n' + - ' in Child (at **)\n' + - ' in Suspense (at **)\n' + - ' in App (at **)', + expect(mockError.mock.calls).toEqual([ + [ + 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', + 'article', + 'div', + '\n' + + ' in article (at **)\n' + + ' in Component (at **)\n' + + ' in div (at **)\n' + + ' in Child (at **)\n' + + ' in Suspense (at **)\n' + + ' in App (at **)', + ], ]); } } finally { @@ -681,18 +681,18 @@ describe('ReactDOMServerPartialHydration', () => { '
Mismatch
', ); if (__DEV__) { - const secondToLastCall = - mockError.mock.calls[mockError.mock.calls.length - 2]; - expect(secondToLastCall).toEqual([ - 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', - 'article', - 'div', - '\n' + - ' in article (at **)\n' + - ' in div (at **)\n' + - ' in Component (at **)\n' + - ' in Suspense (at **)\n' + - ' in App (at **)', + expect(mockError.mock.calls).toEqual([ + [ + 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', + 'article', + 'div', + '\n' + + ' in article (at **)\n' + + ' in div (at **)\n' + + ' in Component (at **)\n' + + ' in Suspense (at **)\n' + + ' in App (at **)', + ], ]); } } finally { @@ -797,18 +797,18 @@ describe('ReactDOMServerPartialHydration', () => { '
Mismatch
', ); if (__DEV__) { - const secondToLastCall = - mockError.mock.calls[mockError.mock.calls.length - 2]; - expect(secondToLastCall).toEqual([ - 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', - 'article', - 'div', - '\n' + - ' in article (at **)\n' + - ' in div (at **)\n' + - ' in Component (at **)\n' + - ' in Suspense (at **)\n' + - ' in App (at **)', + expect(mockError.mock.calls).toEqual([ + [ + 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', + 'article', + 'div', + '\n' + + ' in article (at **)\n' + + ' in div (at **)\n' + + ' in Component (at **)\n' + + ' in Suspense (at **)\n' + + ' in App (at **)', + ], ]); } } finally { @@ -901,17 +901,17 @@ describe('ReactDOMServerPartialHydration', () => { // Client rendered - suspense comment nodes removed expect(container.innerHTML).toBe('
'); if (__DEV__) { - const secondToLastCall = - mockError.mock.calls[mockError.mock.calls.length - 2]; - expect(secondToLastCall).toEqual([ - 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', - 'article', - 'section', - '\n' + - ' in article (at **)\n' + - ' in Component (at **)\n' + - ' in Suspense (at **)\n' + - ' in App (at **)', + expect(mockError.mock.calls).toEqual([ + [ + 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', + 'article', + 'section', + '\n' + + ' in article (at **)\n' + + ' in Component (at **)\n' + + ' in Suspense (at **)\n' + + ' in App (at **)', + ], ]); } } finally { @@ -1007,17 +1007,17 @@ describe('ReactDOMServerPartialHydration', () => { // Client rendered - suspense comment nodes removed expect(container.innerHTML).toBe('
Mismatch
Hello'); if (__DEV__) { - const secondToLastCall = - mockError.mock.calls[mockError.mock.calls.length - 2]; - expect(secondToLastCall).toEqual([ - 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', - 'article', - 'section', - '\n' + - ' in article (at **)\n' + - ' in Component (at **)\n' + - ' in Suspense (at **)\n' + - ' in App (at **)', + expect(mockError.mock.calls).toEqual([ + [ + 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', + 'article', + 'section', + '\n' + + ' in article (at **)\n' + + ' in Component (at **)\n' + + ' in Suspense (at **)\n' + + ' in App (at **)', + ], ]); } } finally { @@ -1117,17 +1117,17 @@ describe('ReactDOMServerPartialHydration', () => { '
Mismatch
Hello
', ); if (__DEV__) { - const secondToLastCall = - mockError.mock.calls[mockError.mock.calls.length - 2]; - expect(secondToLastCall).toEqual([ - 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', - 'article', - 'section', - '\n' + - ' in article (at **)\n' + - ' in Component (at **)\n' + - ' in Suspense (at **)\n' + - ' in App (at **)', + expect(mockError.mock.calls).toEqual([ + [ + 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', + 'article', + 'section', + '\n' + + ' in article (at **)\n' + + ' in Component (at **)\n' + + ' in Suspense (at **)\n' + + ' in App (at **)', + ], ]); } } finally { diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js index 12563be1724ec..14c58cb0d6581 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js @@ -314,32 +314,30 @@ describe('ReactSuspense', () => { }, 290); // Render an empty shell - const root = ReactTestRenderer.create(, { - isConcurrent: true, - }); - + const root = ReactDOMClient.createRoot(container); + root.render(); await waitForAll(['Foo', 'Suspend! [A]', 'Loading...']); - expect(root).toMatchRenderedOutput('Loading...'); + expect(container.textContent).toEqual('Loading...'); // Now resolve A jest.advanceTimersByTime(290); await waitFor(['A']); - expect(root).toMatchRenderedOutput('Loading...'); + expect(container.textContent).toEqual('Loading...'); // B starts loading. Parent boundary is in throttle. // Still shows parent loading under throttle jest.advanceTimersByTime(10); await waitForAll(['Suspend! [B]', 'Loading more...']); - expect(root).toMatchRenderedOutput('Loading...'); + expect(container.textContent).toEqual('Loading...'); // !! B could have finished before the throttle, but we show a fallback. // !! Pushing out the 30ms fetch for B to 300ms. jest.advanceTimersByTime(300); await waitFor(['B']); - expect(root).toMatchRenderedOutput('ALoading more...'); + expect(container.textContent).toEqual('ALoading more...'); await act(() => {}); - expect(root).toMatchRenderedOutput('AB'); + expect(container.textContent).toEqual('AB'); }); it('does not throttle fallback committing for too long', async () => {