mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
[act] Wrap IsThisRendererActing in DEV check (#16259)
* [act] Wrap IsThisRendererActing in DEV check So that it doesn't leak into the production bundle. Follow-up to #16240. * Disable Suspense fallback test in prod
This commit is contained in:
+62
-56
@@ -722,68 +722,74 @@ function runActTests(label, render, unmount, rerender) {
|
||||
});
|
||||
|
||||
describe('suspense', () => {
|
||||
it('triggers fallbacks if available', async () => {
|
||||
let resolved = false;
|
||||
let resolve;
|
||||
const promise = new Promise(_resolve => {
|
||||
resolve = _resolve;
|
||||
});
|
||||
if (__DEV__) {
|
||||
it('triggers fallbacks if available', async () => {
|
||||
let resolved = false;
|
||||
let resolve;
|
||||
const promise = new Promise(_resolve => {
|
||||
resolve = _resolve;
|
||||
});
|
||||
|
||||
function Suspends() {
|
||||
if (resolved) {
|
||||
return 'was suspended';
|
||||
function Suspends() {
|
||||
if (resolved) {
|
||||
return 'was suspended';
|
||||
}
|
||||
throw promise;
|
||||
}
|
||||
throw promise;
|
||||
}
|
||||
|
||||
function App(props) {
|
||||
return (
|
||||
<React.Suspense
|
||||
fallback={<span data-test-id="spinner">loading...</span>}>
|
||||
{props.suspend ? <Suspends /> : 'content'}
|
||||
</React.Suspense>
|
||||
function App(props) {
|
||||
return (
|
||||
<React.Suspense
|
||||
fallback={<span data-test-id="spinner">loading...</span>}>
|
||||
{props.suspend ? <Suspends /> : 'content'}
|
||||
</React.Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
// render something so there's content
|
||||
act(() => {
|
||||
render(<App suspend={false} />, container);
|
||||
});
|
||||
|
||||
// trigger a suspendy update
|
||||
act(() => {
|
||||
rerender(<App suspend={true} />);
|
||||
});
|
||||
expect(
|
||||
document.querySelector('[data-test-id=spinner]'),
|
||||
).not.toBeNull();
|
||||
|
||||
// now render regular content again
|
||||
act(() => {
|
||||
rerender(<App suspend={false} />);
|
||||
});
|
||||
expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
|
||||
|
||||
// trigger a suspendy update with a delay
|
||||
React.unstable_withSuspenseConfig(
|
||||
() => {
|
||||
act(() => {
|
||||
rerender(<App suspend={true} />);
|
||||
});
|
||||
},
|
||||
{timeout: 5000},
|
||||
);
|
||||
}
|
||||
// the spinner shows up regardless
|
||||
expect(
|
||||
document.querySelector('[data-test-id=spinner]'),
|
||||
).not.toBeNull();
|
||||
|
||||
// render something so there's content
|
||||
act(() => {
|
||||
render(<App suspend={false} />, container);
|
||||
// resolve the promise
|
||||
await act(async () => {
|
||||
resolved = true;
|
||||
resolve();
|
||||
});
|
||||
|
||||
// spinner gone, content showing
|
||||
expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
|
||||
expect(container.textContent).toBe('was suspended');
|
||||
});
|
||||
|
||||
// trigger a suspendy update
|
||||
act(() => {
|
||||
rerender(<App suspend={true} />);
|
||||
});
|
||||
expect(document.querySelector('[data-test-id=spinner]')).not.toBeNull();
|
||||
|
||||
// now render regular content again
|
||||
act(() => {
|
||||
rerender(<App suspend={false} />);
|
||||
});
|
||||
expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
|
||||
|
||||
// trigger a suspendy update with a delay
|
||||
React.unstable_withSuspenseConfig(
|
||||
() => {
|
||||
act(() => {
|
||||
rerender(<App suspend={true} />);
|
||||
});
|
||||
},
|
||||
{timeout: 5000},
|
||||
);
|
||||
// the spinner shows up regardless
|
||||
expect(document.querySelector('[data-test-id=spinner]')).not.toBeNull();
|
||||
|
||||
// resolve the promise
|
||||
await act(async () => {
|
||||
resolved = true;
|
||||
resolve();
|
||||
});
|
||||
|
||||
// spinner gone, content showing
|
||||
expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
|
||||
expect(container.textContent).toBe('was suspended');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
+15
-3
@@ -1034,7 +1034,11 @@ function renderRoot(
|
||||
hasNotProcessedNewUpdates &&
|
||||
!isSync &&
|
||||
// do not delay if we're inside an act() scope
|
||||
!(flushSuspenseFallbacksInTests && IsThisRendererActing.current)
|
||||
!(
|
||||
__DEV__ &&
|
||||
flushSuspenseFallbacksInTests &&
|
||||
IsThisRendererActing.current
|
||||
)
|
||||
) {
|
||||
// If we have not processed any new updates during this pass, then this is
|
||||
// either a retry of an existing fallback state or a hidden tree.
|
||||
@@ -1075,7 +1079,11 @@ function renderRoot(
|
||||
if (
|
||||
!isSync &&
|
||||
// do not delay if we're inside an act() scope
|
||||
!(flushSuspenseFallbacksInTests && IsThisRendererActing.current)
|
||||
!(
|
||||
__DEV__ &&
|
||||
flushSuspenseFallbacksInTests &&
|
||||
IsThisRendererActing.current
|
||||
)
|
||||
) {
|
||||
// We're suspended in a state that should be avoided. We'll try to avoid committing
|
||||
// it for as long as the timeouts let us.
|
||||
@@ -1148,7 +1156,11 @@ function renderRoot(
|
||||
if (
|
||||
!isSync &&
|
||||
// do not delay if we're inside an act() scope
|
||||
!(flushSuspenseFallbacksInTests && IsThisRendererActing.current) &&
|
||||
!(
|
||||
__DEV__ &&
|
||||
flushSuspenseFallbacksInTests &&
|
||||
IsThisRendererActing.current
|
||||
) &&
|
||||
workInProgressRootLatestProcessedExpirationTime !== Sync &&
|
||||
workInProgressRootCanSuspendUsingConfig !== null
|
||||
) {
|
||||
|
||||
Reference in New Issue
Block a user