Skip to content

Commit b307675

Browse files
committed
Update ReactDOMServerSuspense-test to not use legacy rendering APIs
Updates ReactDOMServerSuspense-test to not use legacy rendering APIs Also removes an experimental only gate that is not necessary
1 parent 4728548 commit b307675

File tree

1 file changed

+62
-64
lines changed

1 file changed

+62
-64
lines changed

packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js

Lines changed: 62 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function initModules() {
4141
};
4242
}
4343

44-
const {itThrowsWhenRendering, resetModules, serverRender} =
44+
const {resetModules, itThrowsWhenRendering} =
4545
ReactDOMServerIntegrationUtils(initModules);
4646

4747
describe('ReactDOMServerSuspense', () => {
@@ -97,42 +97,42 @@ describe('ReactDOMServerSuspense', () => {
9797
}
9898

9999
it('should render the children when no promise is thrown', async () => {
100-
const c = await serverRender(
101-
<div>
102-
<React.Suspense fallback={<Text text="Fallback" />}>
103-
<Text text="Children" />
104-
</React.Suspense>
105-
</div>,
100+
const container = document.createElement('div');
101+
const html = ReactDOMServer.renderToString(
102+
<React.Suspense fallback={<Text text="Fallback" />}>
103+
<Text text="Children" />
104+
</React.Suspense>,
106105
);
107-
expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
106+
container.innerHTML = html;
107+
expect(getVisibleChildren(container)).toEqual(<div>Children</div>);
108108
});
109109

110110
it('should render the fallback when a promise thrown', async () => {
111-
const c = await serverRender(
112-
<div>
113-
<React.Suspense fallback={<Text text="Fallback" />}>
114-
<AsyncText text="Children" />
115-
</React.Suspense>
116-
</div>,
111+
const container = document.createElement('div');
112+
const html = ReactDOMServer.renderToString(
113+
<React.Suspense fallback={<Text text="Fallback" />}>
114+
<AsyncText text="Children" />
115+
</React.Suspense>,
117116
);
118-
expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
117+
container.innerHTML = html;
118+
expect(getVisibleChildren(container)).toEqual(<div>Fallback</div>);
119119
});
120120

121121
it('should work with nested suspense components', async () => {
122-
const c = await serverRender(
123-
<div>
124-
<React.Suspense fallback={<Text text="Fallback" />}>
125-
<div>
126-
<Text text="Children" />
127-
<React.Suspense fallback={<Text text="Fallback" />}>
128-
<AsyncText text="Children" />
129-
</React.Suspense>
130-
</div>
131-
</React.Suspense>
132-
</div>,
122+
const container = document.createElement('div');
123+
const html = ReactDOMServer.renderToString(
124+
<React.Suspense fallback={<Text text="Fallback" />}>
125+
<div>
126+
<Text text="Children" />
127+
<React.Suspense fallback={<Text text="Fallback" />}>
128+
<AsyncText text="Children" />
129+
</React.Suspense>
130+
</div>
131+
</React.Suspense>,
133132
);
133+
container.innerHTML = html;
134134

135-
expect(getVisibleChildren(c)).toEqual(
135+
expect(getVisibleChildren(container)).toEqual(
136136
<div>
137137
<div>Children</div>
138138
<div>Fallback</div>
@@ -152,56 +152,54 @@ describe('ReactDOMServerSuspense', () => {
152152
</React.Suspense>
153153
</SuspenseList>
154154
);
155-
const element = await serverRender(example);
156-
const parent = element.parentNode;
157-
const divA = parent.children[0];
155+
const container = document.createElement('div');
156+
const html = ReactDOMServer.renderToString(example);
157+
container.innerHTML = html;
158+
159+
const divA = container.children[0];
158160
expect(divA.tagName).toBe('DIV');
159161
expect(divA.textContent).toBe('A');
160-
const divB = parent.children[1];
162+
const divB = container.children[1];
161163
expect(divB.tagName).toBe('DIV');
162164
expect(divB.textContent).toBe('B');
163165

164166
await act(() => {
165-
ReactDOMClient.hydrateRoot(parent, example);
167+
ReactDOMClient.hydrateRoot(container, example);
166168
});
167169

168-
const parent2 = element.parentNode;
169-
const divA2 = parent2.children[0];
170-
const divB2 = parent2.children[1];
170+
const divA2 = container.children[0];
171+
const divB2 = container.children[1];
171172
expect(divA).toBe(divA2);
172173
expect(divB).toBe(divB2);
173174
});
174175

175-
// TODO: Remove this in favor of @gate pragma
176-
if (__EXPERIMENTAL__) {
177-
itThrowsWhenRendering(
178-
'a suspending component outside a Suspense node',
179-
async render => {
180-
await render(
181-
<div>
182-
<React.Suspense />
183-
<AsyncText text="Children" />
184-
<React.Suspense />
185-
</div>,
186-
1,
187-
);
188-
},
189-
'A component suspended while responding to synchronous input.',
190-
);
176+
itThrowsWhenRendering(
177+
'a suspending component outside a Suspense node',
178+
async render => {
179+
await render(
180+
<div>
181+
<React.Suspense />
182+
<AsyncText text="Children" />
183+
<React.Suspense />
184+
</div>,
185+
1,
186+
);
187+
},
188+
'A component suspended while responding to synchronous input.',
189+
);
191190

192-
itThrowsWhenRendering(
193-
'a suspending component without a Suspense above',
194-
async render => {
195-
await render(
196-
<div>
197-
<AsyncText text="Children" />
198-
</div>,
199-
1,
200-
);
201-
},
202-
'A component suspended while responding to synchronous input.',
203-
);
204-
}
191+
itThrowsWhenRendering(
192+
'a suspending component without a Suspense above',
193+
async render => {
194+
await render(
195+
<div>
196+
<AsyncText text="Children" />
197+
</div>,
198+
1,
199+
);
200+
},
201+
'A component suspended while responding to synchronous input.',
202+
);
205203

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

0 commit comments

Comments
 (0)