Skip to content

Commit 4c75881

Browse files
sebmarkbagesebmarkbage
authored
Remove maxDuration from tests (#15272)
We instead assume a 150ms duration.
1 parent 9307932 commit 4c75881

12 files changed

+141
-188
lines changed

‎packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -720,16 +720,14 @@ describe('ReactDOMFiberAsync', () => {
720720

721721
let root = ReactDOM.unstable_createRoot(container);
722722
root.render(
723-
<React.Suspense maxDuration={1000} fallback={'Loading'}>
724-
Initial
725-
</React.Suspense>,
723+
<React.Suspense fallback={'Loading'}>Initial</React.Suspense>,
726724
);
727725

728726
Scheduler.flushAll();
729727
expect(container.textContent).toBe('Initial');
730728

731729
root.render(
732-
<React.Suspense maxDuration={1000} fallback={'Loading'}>
730+
<React.Suspense fallback={'Loading'}>
733731
<Suspend />
734732
</React.Suspense>,
735733
);

‎packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,7 @@ describe('ReactDOMServerPartialHydration', () => {
363363
<div>
364364
<Suspense fallback="Loading...">
365365
<span ref={ref} className={className}>
366-
<Suspense maxDuration={200}>
366+
<Suspense>
367367
<Child text={text} />
368368
</Suspense>
369369
</span>
@@ -703,7 +703,7 @@ describe('ReactDOMServerPartialHydration', () => {
703703
expect(ref.current).toBe(span);
704704
});
705705

706-
it('replaces the fallback within the maxDuration if there is a nested suspense', async () => {
706+
it('replaces the fallback within the suspended time if there is a nested suspense', async () => {
707707
let suspend = false;
708708
let promise = new Promise(resolvePromise => {});
709709
let ref = React.createRef();
@@ -724,7 +724,7 @@ describe('ReactDOMServerPartialHydration', () => {
724724
function App() {
725725
return (
726726
<div>
727-
<Suspense fallback="Loading..." maxDuration={100}>
727+
<Suspense fallback="Loading...">
728728
<span ref={ref}>
729729
<Child />
730730
</span>
@@ -751,7 +751,7 @@ describe('ReactDOMServerPartialHydration', () => {
751751
let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
752752
root.render(<App />);
753753
Scheduler.flushAll();
754-
// This will have exceeded the maxDuration so we should timeout.
754+
// This will have exceeded the suspended time so we should timeout.
755755
jest.advanceTimersByTime(500);
756756
// The boundary should longer be suspended for the middle content
757757
// even though the inner boundary is still suspended.
@@ -762,7 +762,7 @@ describe('ReactDOMServerPartialHydration', () => {
762762
expect(ref.current).toBe(span);
763763
});
764764

765-
it('replaces the fallback within the maxDuration if there is a nested suspense in a nested suspense', async () => {
765+
it('replaces the fallback within the suspended time if there is a nested suspense in a nested suspense', async () => {
766766
let suspend = false;
767767
let promise = new Promise(resolvePromise => {});
768768
let ref = React.createRef();
@@ -784,7 +784,7 @@ describe('ReactDOMServerPartialHydration', () => {
784784
return (
785785
<div>
786786
<Suspense fallback="Another layer">
787-
<Suspense fallback="Loading..." maxDuration={100}>
787+
<Suspense fallback="Loading...">
788788
<span ref={ref}>
789789
<Child />
790790
</span>
@@ -812,7 +812,7 @@ describe('ReactDOMServerPartialHydration', () => {
812812
let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
813813
root.render(<App />);
814814
Scheduler.flushAll();
815-
// This will have exceeded the maxDuration so we should timeout.
815+
// This will have exceeded the suspended time so we should timeout.
816816
jest.advanceTimersByTime(500);
817817
// The boundary should longer be suspended for the middle content
818818
// even though the inner boundary is still suspended.

‎packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,12 @@ describe('ReactDOMSuspensePlaceholder', () => {
7474
];
7575
function App() {
7676
return (
77-
<Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
77+
<Suspense fallback={<Text text="Loading..." />}>
7878
<div ref={divs[0]}>
7979
<Text text="A" />
8080
</div>
8181
<div ref={divs[1]}>
82-
<AsyncText ms={1000} text="B" />
82+
<AsyncText ms={500} text="B" />
8383
</div>
8484
<div style={{display: 'block'}} ref={divs[2]}>
8585
<Text text="C" />
@@ -92,7 +92,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
9292
expect(divs[1].current.style.display).toEqual('none');
9393
expect(divs[2].current.style.display).toEqual('none');
9494

95-
await advanceTimers(1000);
95+
await advanceTimers(500);
9696

9797
expect(divs[0].current.style.display).toEqual('');
9898
expect(divs[1].current.style.display).toEqual('');
@@ -103,17 +103,17 @@ describe('ReactDOMSuspensePlaceholder', () => {
103103
it('hides and unhides timed out text nodes', async () => {
104104
function App() {
105105
return (
106-
<Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
106+
<Suspense fallback={<Text text="Loading..." />}>
107107
<Text text="A" />
108-
<AsyncText ms={1000} text="B" />
108+
<AsyncText ms={500} text="B" />
109109
<Text text="C" />
110110
</Suspense>
111111
);
112112
}
113113
ReactDOM.render(<App />, container);
114114
expect(container.textContent).toEqual('Loading...');
115115

116-
await advanceTimers(1000);
116+
await advanceTimers(500);
117117

118118
expect(container.textContent).toEqual('ABC');
119119
});
@@ -137,10 +137,10 @@ describe('ReactDOMSuspensePlaceholder', () => {
137137

138138
function App() {
139139
return (
140-
<Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
140+
<Suspense fallback={<Text text="Loading..." />}>
141141
<Sibling>Sibling</Sibling>
142142
<span>
143-
<AsyncText ms={1000} text="Async" />
143+
<AsyncText ms={500} text="Async" />
144144
</span>
145145
</Suspense>
146146
);
@@ -158,7 +158,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
158158
'<span style="display: none;">Sibling</span><span style="display: none;"></span>Loading...',
159159
);
160160

161-
await advanceTimers(1000);
161+
await advanceTimers(500);
162162

163163
expect(container.innerHTML).toEqual(
164164
'<span style="display: inline;">Sibling</span><span style="">Async</span>',

‎packages/react-reconciler/src/ReactFiberBeginWork.js

+15
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ let didWarnAboutContextTypeOnFunctionComponent;
157157
let didWarnAboutGetDerivedStateOnFunctionComponent;
158158
let didWarnAboutFunctionRefs;
159159
export let didWarnAboutReassigningProps;
160+
let didWarnAboutMaxDuration;
160161

161162
if (__DEV__) {
162163
didWarnAboutBadClass = {};
@@ -165,6 +166,7 @@ if (__DEV__) {
165166
didWarnAboutGetDerivedStateOnFunctionComponent = {};
166167
didWarnAboutFunctionRefs = {};
167168
didWarnAboutReassigningProps = false;
169+
didWarnAboutMaxDuration = false;
168170
}
169171

170172
export function reconcileChildren(
@@ -1409,6 +1411,19 @@ function updateSuspenseComponent(
14091411
workInProgress.effectTag &= ~DidCapture;
14101412
}
14111413

1414+
if (__DEV__) {
1415+
if ('maxDuration' in nextProps) {
1416+
if (!didWarnAboutMaxDuration) {
1417+
didWarnAboutMaxDuration = true;
1418+
warning(
1419+
false,
1420+
'maxDuration has been removed from React. ' +
1421+
'Remove the maxDuration prop.',
1422+
);
1423+
}
1424+
}
1425+
}
1426+
14121427
// This next part is a bit confusing. If the children timeout, we switch to
14131428
// showing the fallback children in place of the "primary" children.
14141429
// However, we don't want to delete the primary children because then their

‎packages/react-reconciler/src/ReactFiberUnwindWork.js

+6-10
Original file line numberDiff line numberDiff line change
@@ -232,16 +232,12 @@ function throwException(
232232
break;
233233
}
234234
}
235-
let timeoutPropMs = workInProgress.pendingProps.maxDuration;
236-
if (typeof timeoutPropMs === 'number') {
237-
if (timeoutPropMs <= 0) {
238-
earliestTimeoutMs = 0;
239-
} else if (
240-
earliestTimeoutMs === -1 ||
241-
timeoutPropMs < earliestTimeoutMs
242-
) {
243-
earliestTimeoutMs = timeoutPropMs;
244-
}
235+
const defaultSuspenseTimeout = 150;
236+
if (
237+
earliestTimeoutMs === -1 ||
238+
defaultSuspenseTimeout < earliestTimeoutMs
239+
) {
240+
earliestTimeoutMs = defaultSuspenseTimeout;
245241
}
246242
}
247243
// If there is a DehydratedSuspenseComponent we don't have to do anything because

‎packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@ describe('ReactLazy', () => {
119119
return <Text text="Bar" />;
120120
}
121121

122-
const promiseForFoo = delay(1000).then(() => fakeImport(Foo));
123-
const promiseForBar = delay(2000).then(() => fakeImport(Bar));
122+
const promiseForFoo = delay(100).then(() => fakeImport(Foo));
123+
const promiseForBar = delay(500).then(() => fakeImport(Bar));
124124

125125
const LazyFoo = lazy(() => promiseForFoo);
126126
const LazyBar = lazy(() => promiseForBar);
@@ -138,13 +138,13 @@ describe('ReactLazy', () => {
138138
expect(Scheduler).toFlushAndYield(['Loading...']);
139139
expect(root).toMatchRenderedOutput(null);
140140

141-
jest.advanceTimersByTime(1000);
141+
jest.advanceTimersByTime(100);
142142
await promiseForFoo;
143143

144144
expect(Scheduler).toFlushAndYield(['Foo', 'Loading...']);
145145
expect(root).toMatchRenderedOutput(null);
146146

147-
jest.advanceTimersByTime(1000);
147+
jest.advanceTimersByTime(500);
148148
await promiseForBar;
149149

150150
expect(Scheduler).toFlushAndYield(['Foo', 'Bar']);

‎packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js

+8-10
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,10 @@ describe('ReactSuspense', () => {
140140
// Render two sibling Suspense components
141141
const root = ReactTestRenderer.create(
142142
<React.Fragment>
143-
<Suspense maxDuration={1000} fallback={<Text text="Loading A..." />}>
143+
<Suspense fallback={<Text text="Loading A..." />}>
144144
<AsyncText text="A" ms={5000} />
145145
</Suspense>
146-
<Suspense maxDuration={3000} fallback={<Text text="Loading B..." />}>
146+
<Suspense fallback={<Text text="Loading B..." />}>
147147
<AsyncText text="B" ms={6000} />
148148
</Suspense>
149149
</React.Fragment>,
@@ -211,7 +211,7 @@ describe('ReactSuspense', () => {
211211
}
212212

213213
const root = ReactTestRenderer.create(
214-
<Suspense maxDuration={1000} fallback={<Text text="Loading..." />}>
214+
<Suspense fallback={<Text text="Loading..." />}>
215215
<Async />
216216
<Text text="Sibling" />
217217
</Suspense>,
@@ -272,7 +272,7 @@ describe('ReactSuspense', () => {
272272
it('only captures if `fallback` is defined', () => {
273273
const root = ReactTestRenderer.create(
274274
<Suspense fallback={<Text text="Loading..." />}>
275-
<Suspense maxDuration={100}>
275+
<Suspense>
276276
<AsyncText text="Hi" ms={5000} />
277277
</Suspense>
278278
</Suspense>,
@@ -368,9 +368,7 @@ describe('ReactSuspense', () => {
368368

369369
function App() {
370370
return (
371-
<Suspense
372-
maxDuration={1000}
373-
fallback={<TextWithLifecycle text="Loading..." />}>
371+
<Suspense fallback={<TextWithLifecycle text="Loading..." />}>
374372
<TextWithLifecycle text="A" />
375373
<AsyncTextWithLifecycle ms={100} text="B" ref={instance} />
376374
<TextWithLifecycle text="C" />
@@ -631,7 +629,7 @@ describe('ReactSuspense', () => {
631629

632630
function App(props) {
633631
return (
634-
<Suspense maxDuration={10} fallback={<Text text="Loading..." />}>
632+
<Suspense fallback={<Text text="Loading..." />}>
635633
<Stateful />
636634
</Suspense>
637635
);
@@ -681,7 +679,7 @@ describe('ReactSuspense', () => {
681679

682680
function App(props) {
683681
return (
684-
<Suspense maxDuration={10} fallback={<ShouldMountOnce />}>
682+
<Suspense fallback={<ShouldMountOnce />}>
685683
<AsyncText ms={1000} text="Child 1" />
686684
<AsyncText ms={2000} text="Child 2" />
687685
<AsyncText ms={3000} text="Child 3" />
@@ -726,7 +724,7 @@ describe('ReactSuspense', () => {
726724
it('does not get stuck with fallback in concurrent mode for a large delay', () => {
727725
function App(props) {
728726
return (
729-
<Suspense maxDuration={10} fallback={<Text text="Loading..." />}>
727+
<Suspense fallback={<Text text="Loading..." />}>
730728
<AsyncText ms={1000} text="Child 1" />
731729
<AsyncText ms={7000} text="Child 2" />
732730
</Suspense>

‎packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js

+1-10
Original file line numberDiff line numberDiff line change
@@ -268,11 +268,6 @@ describe('ReactSuspenseFuzz', () => {
268268
remainingElements--;
269269
const children = createRandomChildren(3);
270270

271-
const maxDuration = pickRandomWeighted(rand, [
272-
{value: undefined, weight: 1},
273-
{value: rand.intBetween(0, 5000), weight: 1},
274-
]);
275-
276271
const fallbackType = pickRandomWeighted(rand, [
277272
{value: 'none', weight: 1},
278273
{value: 'normal', weight: 1},
@@ -290,11 +285,7 @@ describe('ReactSuspenseFuzz', () => {
290285
);
291286
}
292287

293-
return React.createElement(
294-
Suspense,
295-
{maxDuration, fallback},
296-
...children,
297-
);
288+
return React.createElement(Suspense, {fallback}, ...children);
298289
}
299290
case 'return':
300291
default:

‎packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ describe('ReactSuspensePlaceholder', () => {
110110

111111
function App(props) {
112112
return (
113-
<Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
113+
<Suspense fallback={<Text text="Loading..." />}>
114114
<HiddenText text="A" />
115115
<span>
116116
<AsyncText ms={1000} text={props.middleText} />
@@ -176,7 +176,7 @@ describe('ReactSuspensePlaceholder', () => {
176176
it('times out text nodes', async () => {
177177
function App(props) {
178178
return (
179-
<Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
179+
<Suspense fallback={<Text text="Loading..." />}>
180180
<Text text="A" />
181181
<AsyncText ms={1000} text={props.middleText} />
182182
<Text text="C" />
@@ -225,7 +225,7 @@ describe('ReactSuspensePlaceholder', () => {
225225
// uppercase is a special type that causes React Noop to render child
226226
// text nodes as uppercase.
227227
<uppercase>
228-
<Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
228+
<Suspense fallback={<Text text="Loading..." />}>
229229
<Text text="a" />
230230
<AsyncText ms={1000} text={props.middleText} />
231231
<Text text="c" />
@@ -293,7 +293,7 @@ describe('ReactSuspensePlaceholder', () => {
293293
Scheduler.yieldValue('App');
294294
return (
295295
<Profiler id="root" onRender={onRender}>
296-
<Suspense maxDuration={500} fallback={<Fallback />}>
296+
<Suspense fallback={<Fallback />}>
297297
{shouldSuspend && <Suspending />}
298298
<Text fakeRenderDuration={textRenderDuration} text={text} />
299299
</Suspense>

0 commit comments

Comments
 (0)