Skip to content

Commit

Permalink
Update ReactDOMServerSuspense-test to not use legacy rendering APIs
Browse files Browse the repository at this point in the history 
Updates ReactDOMServerSuspense-test to not use legacy rendering APIs
Also removes an experimental only gate that is not necessary
  • Loading branch information
@gnoff
gnoff committed Feb 6, 2024
1 parent 952aa74 commit f946f51
Showing 1 changed file with 64 additions and 68 deletions.
132 changes: 64 additions & 68 deletions packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');

let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMServer;
let ReactTestUtils;
Expand All @@ -24,7 +23,6 @@ function initModules() {
jest.resetModules();

React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');
Expand All @@ -35,13 +33,13 @@ function initModules() {

// Make them available to the helpers.
return {
ReactDOM,
ReactDOMClient,
ReactDOMServer,
ReactTestUtils,
};
}

const {itThrowsWhenRendering, resetModules, serverRender} =
const {resetModules, itThrowsWhenRendering} =
ReactDOMServerIntegrationUtils(initModules);

describe('ReactDOMServerSuspense', () => {
Expand Down Expand Up @@ -97,42 +95,42 @@ describe('ReactDOMServerSuspense', () => {
}

it('should render the children when no promise is thrown', async () => {
const c = await serverRender(
<div>
<React.Suspense fallback={<Text text="Fallback" />}>
<Text text="Children" />
</React.Suspense>
</div>,
const container = document.createElement('div');
const html = ReactDOMServer.renderToString(
<React.Suspense fallback={<Text text="Fallback" />}>
<Text text="Children" />
</React.Suspense>,
);
expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
container.innerHTML = html;
expect(getVisibleChildren(container)).toEqual(<div>Children</div>);
});

it('should render the fallback when a promise thrown', async () => {
const c = await serverRender(
<div>
<React.Suspense fallback={<Text text="Fallback" />}>
<AsyncText text="Children" />
</React.Suspense>
</div>,
const container = document.createElement('div');
const html = ReactDOMServer.renderToString(
<React.Suspense fallback={<Text text="Fallback" />}>
<AsyncText text="Children" />
</React.Suspense>,
);
expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
container.innerHTML = html;
expect(getVisibleChildren(container)).toEqual(<div>Fallback</div>);
});

it('should work with nested suspense components', async () => {
const c = await serverRender(
<div>
<React.Suspense fallback={<Text text="Fallback" />}>
<div>
<Text text="Children" />
<React.Suspense fallback={<Text text="Fallback" />}>
<AsyncText text="Children" />
</React.Suspense>
</div>
</React.Suspense>
</div>,
const container = document.createElement('div');
const html = ReactDOMServer.renderToString(
<React.Suspense fallback={<Text text="Fallback" />}>
<div>
<Text text="Children" />
<React.Suspense fallback={<Text text="Fallback" />}>
<AsyncText text="Children" />
</React.Suspense>
</div>
</React.Suspense>,
);
container.innerHTML = html;

expect(getVisibleChildren(c)).toEqual(
expect(getVisibleChildren(container)).toEqual(
<div>
<div>Children</div>
<div>Fallback</div>
Expand All @@ -152,56 +150,54 @@ describe('ReactDOMServerSuspense', () => {
</React.Suspense>
</SuspenseList>
);
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(
<div>
<React.Suspense />
<AsyncText text="Children" />
<React.Suspense />
</div>,
1,
);
},
'A component suspended while responding to synchronous input.',
);

itThrowsWhenRendering(
'a suspending component without a Suspense above',
async render => {
await render(
<div>
<AsyncText text="Children" />
</div>,
1,
);
},
'A component suspended while responding to synchronous input.',
);
}
itThrowsWhenRendering(
'a suspending component outside a Suspense node',
async render => {
await render(
<div>
<React.Suspense />
<AsyncText text="Children" />
<React.Suspense />
</div>,
1,
);
},
'A component suspended while responding to synchronous input.',
);

itThrowsWhenRendering(
'a suspending component without a Suspense above',
async render => {
await render(
<div>
<AsyncText text="Children" />
</div>,
1,
);
},
'A component suspended while responding to synchronous input.',
);

it('does not get confused by throwing null', () => {
function Bad() {
Expand Down

0 comments on commit f946f51

Please sign in to comment.