diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js index 2a0e1f68a72b2..ccdcd898d390b 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js @@ -41,7 +41,7 @@ function initModules() { }; } -const {itThrowsWhenRendering, resetModules, serverRender} = +const {resetModules, itThrowsWhenRendering} = ReactDOMServerIntegrationUtils(initModules); describe('ReactDOMServerSuspense', () => { @@ -97,42 +97,42 @@ describe('ReactDOMServerSuspense', () => { } it('should render the children when no promise is thrown', async () => { - const c = await serverRender( -
- }> - - -
, + const container = document.createElement('div'); + const html = ReactDOMServer.renderToString( + }> + + , ); - expect(getVisibleChildren(c)).toEqual(
Children
); + container.innerHTML = html; + expect(getVisibleChildren(container)).toEqual(
Children
); }); it('should render the fallback when a promise thrown', async () => { - const c = await serverRender( -
- }> - - -
, + const container = document.createElement('div'); + const html = ReactDOMServer.renderToString( + }> + + , ); - expect(getVisibleChildren(c)).toEqual(
Fallback
); + container.innerHTML = html; + expect(getVisibleChildren(container)).toEqual(
Fallback
); }); it('should work with nested suspense components', async () => { - const c = await serverRender( -
- }> -
- - }> - - -
-
-
, + const container = document.createElement('div'); + const html = ReactDOMServer.renderToString( + }> +
+ + }> + + +
+
, ); + container.innerHTML = html; - expect(getVisibleChildren(c)).toEqual( + expect(getVisibleChildren(container)).toEqual(
Children
Fallback
@@ -152,56 +152,54 @@ describe('ReactDOMServerSuspense', () => { ); - const element = await serverRender(example); - const parent = element.parentNode; - const divA = parent.children[0]; + const container = document.createElement('div'); + const html = ReactDOMServer.renderToString(example); + container.innerHTML = html; + + const divA = container.children[0]; expect(divA.tagName).toBe('DIV'); expect(divA.textContent).toBe('A'); - const divB = parent.children[1]; + const divB = container.children[1]; expect(divB.tagName).toBe('DIV'); expect(divB.textContent).toBe('B'); await act(() => { - ReactDOMClient.hydrateRoot(parent, example); + ReactDOMClient.hydrateRoot(container, example); }); - const parent2 = element.parentNode; - const divA2 = parent2.children[0]; - const divB2 = parent2.children[1]; + const divA2 = container.children[0]; + const divB2 = container.children[1]; expect(divA).toBe(divA2); expect(divB).toBe(divB2); }); - // TODO: Remove this in favor of @gate pragma - if (__EXPERIMENTAL__) { - itThrowsWhenRendering( - 'a suspending component outside a Suspense node', - async render => { - await render( -
- - - -
, - 1, - ); - }, - 'A component suspended while responding to synchronous input.', - ); + itThrowsWhenRendering( + 'a suspending component outside a Suspense node', + async render => { + await render( +
+ + + +
, + 1, + ); + }, + 'A component suspended while responding to synchronous input.', + ); - itThrowsWhenRendering( - 'a suspending component without a Suspense above', - async render => { - await render( -
- -
, - 1, - ); - }, - 'A component suspended while responding to synchronous input.', - ); - } + itThrowsWhenRendering( + 'a suspending component without a Suspense above', + async render => { + await render( +
+ +
, + 1, + ); + }, + 'A component suspended while responding to synchronous input.', + ); it('does not get confused by throwing null', () => { function Bad() { diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js index e9c4479b028fb..4b7916f3be2de 100644 --- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js +++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js @@ -330,7 +330,7 @@ module.exports = function (initModules) { function itThrows(desc, testFn, partialMessage) { it(`throws ${desc}`, () => { return testFn().then( - () => expect(false).toBe('The promise resolved and should not have.'), + val => expect(false).toBe('The promise resolved and should not have.'), err => { expect(err).toBeInstanceOf(Error); expect(err.message).toContain(partialMessage);