New internal testing helpers: waitFor, waitForAll, waitForPaint (#26285)

Over the years, we've gradually aligned on a set of best practices for for testing concurrent React features in this repo. The default in most cases is to use `act`, the same as you would do when testing a real React app. However, because we're testing React itself, as opposed to an app that uses React, our internal tests sometimes need to make assertions on intermediate states that `act` intentionally disallows. For those cases, we built a custom set of Jest assertion matchers that provide greater control over the concurrent work queue. It works by mocking the Scheduler package. (When we eventually migrate to using native postTask, it would probably work by stubbing that instead.) A problem with these helpers that we recently discovered is, because they are synchronous function calls, they aren't sufficient if the work you need to flush is scheduled in a microtask — we don't control the microtask queue, and can't mock it. `act` addresses this problem by encouraging you to await the result of the `act` call. (It's not currently required to await, but in future versions of React it likely will be.) It will then continue flushing work until both the microtask queue and the Scheduler queue is exhausted. We can follow a similar strategy for our custom test helpers, by replacing the current set of synchronous helpers with a corresponding set of async ones: - `expect(Scheduler).toFlushAndYield(log)` -> `await waitForAll(log)` - `expect(Scheduler).toFlushAndYieldThrough(log)` -> `await waitFor(log)` - `expect(Scheduler).toFlushUntilNextPaint(log)` -> `await waitForPaint(log)` These APIs are inspired by the existing best practice for writing e2e React tests. Rather than mock all task queues, in an e2e test you set up a timer loop and wait for the UI to match an expecte condition. Although we are mocking _some_ of the task queues in our tests, the general principle still holds: it makes it less likely that our tests will diverge from real world behavior in an actual browser. In this commit, I've implemented the new testing helpers and converted one of the Suspense tests to use them. In subsequent steps, I'll codemod the rest of our test suite. DiffTrain build for [e524467](e524467)
facebook · Mar 3, 2023 · 71b9527 · 71b9527
1 parent 73c0f59
commit 71b9527
Show file tree

Hide file tree

Showing 28 changed files with 42 additions and 42 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-d49e0e0be0941490fe709f80de137516ba4c0ee3
+e5244673388a58eaf8f02a9e44749bef3ffee615
diff --git a/compiled/facebook-www/REVISION_TRANSFORMS b/compiled/facebook-www/REVISION_TRANSFORMS
@@ -1 +1 @@
-d49e0e0be0941490fe709f80de137516ba4c0ee3
+e5244673388a58eaf8f02a9e44749bef3ffee615
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
@@ -27,7 +27,7 @@ if (
 }
  "use strict";
 
-var ReactVersion = "18.3.0-www-classic-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-classic-e52446733-20230302";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
@@ -27,7 +27,7 @@ if (
 }
  "use strict";
 
-var ReactVersion = "18.3.0-www-modern-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-modern-e52446733-20230302";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js
@@ -646,4 +646,4 @@ exports.useSyncExternalStore = function (
  );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-www-classic-d49e0e0be-20230302";
+exports.version = "18.3.0-www-classic-e52446733-20230302";
diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
@@ -638,4 +638,4 @@ exports.useSyncExternalStore = function (
  );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-www-modern-d49e0e0be-20230302";
+exports.version = "18.3.0-www-modern-e52446733-20230302";
diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js
@@ -657,7 +657,7 @@ exports.useSyncExternalStore = function (
  );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-www-classic-d49e0e0be-20230302";
+exports.version = "18.3.0-www-classic-e52446733-20230302";
 
  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js
@@ -649,7 +649,7 @@ exports.useSyncExternalStore = function (
  );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-www-modern-d49e0e0be-20230302";
+exports.version = "18.3.0-www-modern-e52446733-20230302";
 
  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
  return self;
 }
 
-var ReactVersion = "18.3.0-www-classic-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-classic-e52446733-20230302";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
  return self;
 }
 
-var ReactVersion = "18.3.0-www-modern-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-modern-e52446733-20230302";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -9780,7 +9780,7 @@ var slice = Array.prototype.slice,
  return null;
  },
  bundleType: 0,
- version: "18.3.0-www-classic-d49e0e0be-20230302",
+ version: "18.3.0-www-classic-e52446733-20230302",
  rendererPackageName: "react-art"
  };
 var internals$jscomp$inline_1300 = {
@@ -9811,7 +9811,7 @@ var internals$jscomp$inline_1300 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-next-d49e0e0be-20230302"
+ reconcilerVersion: "18.3.0-next-e52446733-20230302"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_1301 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
@@ -9445,7 +9445,7 @@ var slice = Array.prototype.slice,
  return null;
  },
  bundleType: 0,
- version: "18.3.0-www-modern-d49e0e0be-20230302",
+ version: "18.3.0-www-modern-e52446733-20230302",
  rendererPackageName: "react-art"
  };
 var internals$jscomp$inline_1280 = {
@@ -9476,7 +9476,7 @@ var internals$jscomp$inline_1280 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-next-d49e0e0be-20230302"
+ reconcilerVersion: "18.3.0-next-e52446733-20230302"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_1281 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -42108,7 +42108,7 @@ function createFiberRoot(
  return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-classic-e52446733-20230302";
 
 function createPortal$1(
  children,

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -41712,7 +41712,7 @@ function createFiberRoot(
  return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-modern-e52446733-20230302";
 
 function createPortal$1(
  children,

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -15490,7 +15490,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1741 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-classic-d49e0e0be-20230302",
+ version: "18.3.0-www-classic-e52446733-20230302",
  rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2108 = {
@@ -15520,7 +15520,7 @@ var internals$jscomp$inline_2108 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-next-d49e0e0be-20230302"
+ reconcilerVersion: "18.3.0-next-e52446733-20230302"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_2109 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15776,4 +15776,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
  );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-d49e0e0be-20230302";
+exports.version = "18.3.0-next-e52446733-20230302";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -15019,7 +15019,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1700 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-modern-d49e0e0be-20230302",
+ version: "18.3.0-www-modern-e52446733-20230302",
  rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2072 = {
@@ -15050,7 +15050,7 @@ var internals$jscomp$inline_2072 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-next-d49e0e0be-20230302"
+ reconcilerVersion: "18.3.0-next-e52446733-20230302"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_2073 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15235,4 +15235,4 @@ exports.unstable_flushControlled = function (fn) {
  }
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-d49e0e0be-20230302";
+exports.version = "18.3.0-next-e52446733-20230302";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -16267,7 +16267,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1821 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-classic-d49e0e0be-20230302",
+ version: "18.3.0-www-classic-e52446733-20230302",
  rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16311,7 +16311,7 @@ var devToolsConfig$jscomp$inline_1821 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-next-d49e0e0be-20230302"
+ reconcilerVersion: "18.3.0-next-e52446733-20230302"
 });
 assign(Internals, {
  ReactBrowserEventEmitter: {
@@ -16554,7 +16554,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
  );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-d49e0e0be-20230302";
+exports.version = "18.3.0-next-e52446733-20230302";
 
  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -15786,7 +15786,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1780 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-modern-d49e0e0be-20230302",
+ version: "18.3.0-www-modern-e52446733-20230302",
  rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -15831,7 +15831,7 @@ var devToolsConfig$jscomp$inline_1780 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-next-d49e0e0be-20230302"
+ reconcilerVersion: "18.3.0-next-e52446733-20230302"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -16003,7 +16003,7 @@ exports.unstable_flushControlled = function (fn) {
  }
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-d49e0e0be-20230302";
+exports.version = "18.3.0-next-e52446733-20230302";
 
  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-classic-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-classic-e52446733-20230302";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");

diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-modern-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-modern-e52446733-20230302";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");

diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -3721,4 +3721,4 @@ exports.renderToString = function (children, options) {
  'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
  );
 };
-exports.version = "18.3.0-www-classic-d49e0e0be-20230302";
+exports.version = "18.3.0-www-classic-e52446733-20230302";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -3619,4 +3619,4 @@ exports.renderToString = function (children, options) {
  'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
  );
 };
-exports.version = "18.3.0-www-modern-d49e0e0be-20230302";
+exports.version = "18.3.0-www-modern-e52446733-20230302";
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -31237,7 +31237,7 @@ function createFiberRoot(
  return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-classic-e52446733-20230302";
 
 function createPortal$1(
  children,

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -37728,7 +37728,7 @@ function createFiberRoot(
  return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-modern-e52446733-20230302";
 
 function createPortal$1(
  children,

diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
@@ -11521,7 +11521,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1535 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-classic-d49e0e0be-20230302",
+ version: "18.3.0-www-classic-e52446733-20230302",
  rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2058 = {
@@ -11551,7 +11551,7 @@ var internals$jscomp$inline_2058 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-next-d49e0e0be-20230302"
+ reconcilerVersion: "18.3.0-next-e52446733-20230302"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_2059 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14782,4 +14782,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
  );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-d49e0e0be-20230302";
+exports.version = "18.3.0-next-e52446733-20230302";
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
@@ -13881,7 +13881,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1652 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-modern-d49e0e0be-20230302",
+ version: "18.3.0-www-modern-e52446733-20230302",
  rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2032 = {
@@ -13912,7 +13912,7 @@ var internals$jscomp$inline_2032 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-next-d49e0e0be-20230302"
+ reconcilerVersion: "18.3.0-next-e52446733-20230302"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_2033 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14240,4 +14240,4 @@ exports.unstable_flushControlled = function (fn) {
  }
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-d49e0e0be-20230302";
+exports.version = "18.3.0-next-e52446733-20230302";
diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js
@@ -23753,7 +23753,7 @@ function createFiberRoot(
  return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-classic-e52446733-20230302";
 
 // Might add PROFILE later.
 

diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
@@ -23753,7 +23753,7 @@ function createFiberRoot(
  return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-d49e0e0be-20230302";
+var ReactVersion = "18.3.0-www-modern-e52446733-20230302";
 
 // Might add PROFILE later.