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('HelloMismatch');
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', () => {
'
',
);
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', () => {
'',
);
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', () => {
'',
);
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('MismatchHello');
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', () => {
'MismatchHello
',
);
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 () => {