Internal act: Flush timers at end of scope (#19788)

If there are any suspended fallbacks at the end of the `act` scope, force them to display by running the pending timers (i.e. `setTimeout`). The public implementation of `act` achieves the same behavior with an extra check in the work loop (`shouldForceFlushFallbacks`). Since our internal `act` needs to work in both development and production, without additional runtime checks, we instead rely on Jest's mock timers. This doesn't not affect refresh transitions, which are meant to delay indefinitely, because in that case we exit the work loop without posting a timer.

Author: acdlite

packages/react-dom/src/test-utils/ReactTestUtilsAct.js

@@ -126,8 +126,9 @@ export function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
 }
 
 functionflushActWork(resolve,reject){
-// TODO: Run timers to flush suspended fallbacks
-// jest.runOnlyPendingTimers();
+// Flush suspended fallbacks
+// $FlowFixMe: Flow doesn't know about global Jest object
+jest.runOnlyPendingTimers();
 enqueueTask(()=>{
 try{
 constdidFlushWork=Scheduler.unstable_flushAllWithoutAsserting();

packages/react-noop-renderer/src/createReactNoop.js

@@ -1175,8 +1175,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 }
 
 functionflushActWork(resolve,reject){
-// TODO: Run timers to flush suspended fallbacks
-// jest.runOnlyPendingTimers();
+// Flush suspended fallbacks
+// $FlowFixMe: Flow doesn't know about global Jest object
+jest.runOnlyPendingTimers();
 enqueueTask(()=>{
 try{
 constdidFlushWork=Scheduler.unstable_flushAllWithoutAsserting();

packages/react-reconciler/src/__tests__/ReactBlocks-test.js

@@ -14,6 +14,7 @@ let useState;
 letSuspense;
 letblock;
 letreadString;
+letresolvePromises;
 letScheduler;
 
 describe('ReactBlocks',()=>{
@@ -28,15 +29,16 @@ describe('ReactBlocks', () => {
 useState=React.useState;
 Suspense=React.Suspense;
 constcache=newMap();
+letunresolved=[];
 readString=function(text){
 letentry=cache.get(text);
 if(!entry){
 entry={
 promise: newPromise(resolve=>{
-setTimeout(()=>{
+unresolved.push(()=>{
 entry.resolved=true;
 resolve();
-},100);
+});
 }),
 resolved: false,
 };
@@ -47,6 +49,12 @@ describe('ReactBlocks', () => {
 }
 returntext;
 };
+
+resolvePromises=()=>{
+constres=unresolved;
+unresolved=[];
+res.forEach(r=>r());
+};
 });
 
 // @gate experimental
@@ -144,7 +152,7 @@ describe('ReactBlocks', () => {
 expect(ReactNoop).toMatchRenderedOutput('Loading...');
 
 awaitReactNoop.act(async()=>{
-jest.advanceTimersByTime(1000);
+resolvePromises();
 });
 
 expect(ReactNoop).toMatchRenderedOutput(<span>Name: Sebastian</span>);
@@ -291,7 +299,7 @@ describe('ReactBlocks', () => {
 ReactNoop.render(<AppPage={loadParent('Sebastian')}/>);
 });
 awaitReactNoop.act(async()=>{
-jest.advanceTimersByTime(1000);
+resolvePromises();
 });
 expect(ReactNoop).toMatchRenderedOutput(<span>Name: Sebastian</span>);
 });
@@ -336,7 +344,7 @@ describe('ReactBlocks', () => {
 });
 awaitReactNoop.act(async()=>{
 _setSuspend(false);
-jest.advanceTimersByTime(1000);
+resolvePromises();
 });
 expect(ReactNoop).toMatchRenderedOutput(<span>Sebastian</span>);
 });

packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js

@@ -575,7 +575,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 <Suspensefallback="Loading...">
 <Texttext="Sibling"/>
 {shouldSuspend ? (
-<AsyncTextms={10000}text={'Step '+step}/>
+<AsyncTexttext={'Step '+step}/>
 ) : (
 <Texttext={'Step '+step}/>
 )}
@@ -2595,7 +2595,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 }
 return(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<AsyncTexttext={page}ms={5000}/>
+<AsyncTexttext={page}/>
 </Suspense>
 );
 }
@@ -2616,8 +2616,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 });
 
 // Later we load the data.
-Scheduler.unstable_advanceTime(5000);
-awaitadvanceTimers(5000);
+awaitresolveText('A');
 expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
 expect(Scheduler).toFlushAndYield(['A']);
 expect(ReactNoop.getChildren()).toEqual([span('A')]);
@@ -2635,8 +2634,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 });
 
 // Later we load the data.
-Scheduler.unstable_advanceTime(3000);
-awaitadvanceTimers(3000);
+awaitresolveText('B');
 expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
 expect(Scheduler).toFlushAndYield(['B']);
 expect(ReactNoop.getChildren()).toEqual([span('B')]);
@@ -2754,12 +2752,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 );
 });
 
+// TODO: This test is specifically about avoided commits that suspend for a
+// JND. We may remove this behavior.
 it("suspended commit remains suspended even if there's another update at same expiration",async()=>{
 // Regression test
 functionApp({text}){
 return(
 <Suspensefallback="Loading...">
-<AsyncTextms={2000}text={text}/>
+<AsyncTexttext={text}/>
 </Suspense>
 );
 }
@@ -2768,34 +2768,28 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 awaitReactNoop.act(async()=>{
 root.render(<Apptext="Initial"/>);
 });
+expect(Scheduler).toHaveYielded(['Suspend! [Initial]']);
 
 // Resolve initial render
 awaitReactNoop.act(async()=>{
-Scheduler.unstable_advanceTime(2000);
-awaitadvanceTimers(2000);
+awaitresolveText('Initial');
 });
-expect(Scheduler).toHaveYielded([
-'Suspend! [Initial]',
-'Promise resolved [Initial]',
-'Initial',
-]);
+expect(Scheduler).toHaveYielded(['Promise resolved [Initial]','Initial']);
 expect(root).toMatchRenderedOutput(<spanprop="Initial"/>);
 
-// Update. Since showing a fallback would hide content that's already
-// visible, it should suspend for a bit without committing.
 awaitReactNoop.act(async()=>{
+// Update. Since showing a fallback would hide content that's already
+// visible, it should suspend for a JND without committing.
 root.render(<Apptext="First update"/>);
-
 expect(Scheduler).toFlushAndYield(['Suspend! [First update]']);
+
 // Should not display a fallback
 expect(root).toMatchRenderedOutput(<spanprop="Initial"/>);
-});
 
-// Update again. This should also suspend for a bit.
-awaitReactNoop.act(async()=>{
+// Update again. This should also suspend for a JND.
 root.render(<Apptext="Second update"/>);
-
 expect(Scheduler).toFlushAndYield(['Suspend! [Second update]']);
+
 // Should not display a fallback
 expect(root).toMatchRenderedOutput(<spanprop="Initial"/>);
 });
@@ -3989,9 +3983,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 awaitReactNoop.act(async()=>{
 root.render(<Appshow={true}/>);
 });
-// TODO: `act` should have already flushed the placeholder, so this
-// runAllTimers call should be unnecessary.
-jest.runAllTimers();
 expect(Scheduler).toHaveYielded(['Suspend! [Async]','Loading...']);
 expect(root).toMatchRenderedOutput(
 <>

packages/react-test-renderer/src/ReactTestRenderer.js

@@ -684,8 +684,9 @@ function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
 }
 
 functionflushActWork(resolve,reject){
-// TODO: Run timers to flush suspended fallbacks
-// jest.runOnlyPendingTimers();
+// Flush suspended fallbacks
+// $FlowFixMe: Flow doesn't know about global Jest object
+jest.runOnlyPendingTimers();
 enqueueTask(()=>{
 try{
 constdidFlushWork=Scheduler.unstable_flushAllWithoutAsserting();

scripts/rollup/validate/eslintrc.cjs.js

@@ -42,6 +42,7 @@ module.exports = {
 
 // jest
 expect: true,
+jest: true,
 },
 parserOptions: {
 ecmaVersion: 5,

scripts/rollup/validate/eslintrc.cjs2015.js

@@ -42,6 +42,7 @@ module.exports = {
 
 // jest
 expect: true,
+jest: true,
 },
 parserOptions: {
 ecmaVersion: 2015,

scripts/rollup/validate/eslintrc.fb.js

@@ -36,6 +36,9 @@ module.exports = {
 // Flight
 Uint8Array: true,
 Promise: true,
+
+// jest
+jest: true,
 },
 parserOptions: {
 ecmaVersion: 5,

scripts/rollup/validate/eslintrc.rn.js

@@ -31,6 +31,9 @@ module.exports = {
 ArrayBuffer: true,
 
 TaskController: true,
+
+// jest
+jest: true,
 },
 parserOptions: {
 ecmaVersion: 5,

scripts/rollup/validate/eslintrc.umd.js

@@ -43,6 +43,9 @@ module.exports = {
 // Flight Webpack
 __webpack_chunk_load__: true,
 __webpack_require__: true,
+
+// jest
+jest: true,
 },
 parserOptions: {
 ecmaVersion: 5,