Run tests with React 19 RC.1 and adjust tests accordingly (#12140)

Co-authored-by: Jerel Miller <[email protected]>

.circleci/config.yml

@@ -173,7 +173,7 @@ workflows:
                 - "@types/[email protected] @types/[email protected]"
                 - "@types/react@17 @types/react-dom@17"
                 - "@types/react@18 @types/react-dom@18"
-                - "@types/react@npm:[email protected].0 @types/react-dom@npm:[email protected].0"
+                - "@types/react@npm:[email protected].1 @types/react-dom@npm:[email protected].1"
                 - "typescript@next"
   security-scans:
     jobs:

.eslintrc

@@ -89,7 +89,10 @@
       "rules": {
         "testing-library/prefer-user-event": "error",
         "testing-library/no-wait-for-multiple-assertions": "off",
-        "local-rules/require-using-disposable": "error"
+        "local-rules/require-using-disposable": "error",
+        "local-rules/require-disable-act-environment": "error",
+        "local-rules/forbid-act-in-disabled-act-environment": "error",
+        "@typescript-eslint/no-floating-promises": "warn"
       }
     }
   ],

config/jest.config.js

@@ -85,7 +85,6 @@ const standardReact17Config = {
     "^react-dom$": "react-dom-17",
     "^react-dom/server$": "react-dom-17/server",
     "^react-dom/test-utils$": "react-dom-17/test-utils",
-    "^@testing-library/react$": "@testing-library/react-12",
   },
 };
 

eslint-local-rules/forbid-act-in-disabled-act-environment.test.ts

@@ -0,0 +1,56 @@
+import { rule } from "./forbid-act-in-disabled-act-environment";
+import { ruleTester } from "./testSetup";
+
+ruleTester.run("forbid-act-in-disabled-act-environment", rule, {
+  valid: [
+    `
+  () => {
+    using _disabledAct = disableActEnvironment();
+  }
+  () => {
+    act(() => {})
+  }
+    `,
+    `
+  () => {
+    using _disabledAct = disableActEnvironment();
+  }
+  () => {
+    actAsync(() => {})
+  }
+    `,
+  ],
+  invalid: [
+    `
+    () => {
+      using _disabledAct = disableActEnvironment();
+      act(() => {})
+    }
+      `,
+    `
+    () => {
+      using _disabledAct = disableActEnvironment();
+      actAsync(() => {})
+    }
+    `,
+    `
+    () => {
+      using _disabledAct = disableActEnvironment();
+      () => {
+        act(() => {})
+      }
+    }
+      `,
+    `
+    () => {
+      using _disabledAct = disableActEnvironment();
+      () => {
+        actAsync(() => {})
+      }
+    }
+    `,
+  ].map((code) => ({
+    code,
+    errors: [{ messageId: "forbiddenActInNonActEnvironment" }],
+  })),
+});

eslint-local-rules/forbid-act-in-disabled-act-environment.ts

@@ -0,0 +1,63 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    let depth = 1;
+    let disabledDepth: number | false = false;
+
+    function EnterFn() {
+      depth++;
+    }
+    function ExitFn() {
+      depth--;
+      if (disabledDepth !== false && disabledDepth > depth) {
+        disabledDepth = false;
+      }
+    }
+
+    return {
+      CallExpression(node) {
+        const directCallee =
+          node.callee.type === "Identifier" ? node.callee
+          : node.callee.type === "MemberExpression" ? node.callee.property
+          : null;
+
+        if (
+          directCallee?.type === "Identifier" &&
+          directCallee.name === "disableActEnvironment"
+        ) {
+          if (disabledDepth === false) {
+            disabledDepth = depth;
+          }
+        }
+
+        if (
+          directCallee?.type === "Identifier" &&
+          (directCallee.name === "act" || directCallee.name === "actAsync")
+        ) {
+          if (disabledDepth !== false) {
+            context.report({
+              messageId: "forbiddenActInNonActEnvironment",
+              node: node,
+            });
+          }
+        }
+      },
+      ArrowFunctionExpression: EnterFn,
+      FunctionExpression: EnterFn,
+      FunctionDeclaration: EnterFn,
+      "ArrowFunctionExpression:exit": ExitFn,
+      "FunctionExpression:exit": ExitFn,
+      "FunctionDeclaration:exit": ExitFn,
+    };
+  },
+  meta: {
+    messages: {
+      forbiddenActInNonActEnvironment:
+        "`act` should not be called in a `disableActEnvironment`.",
+    },
+    type: "problem",
+    schema: [],
+  },
+  defaultOptions: [],
+});

eslint-local-rules/index.js

@@ -11,4 +11,8 @@ require("ts-node").register({
 
 module.exports = {
   "require-using-disposable": require("./require-using-disposable").rule,
+  "require-disable-act-environment":
+    require("./require-disable-act-environment").rule,
+  "forbid-act-in-disabled-act-environment":
+    require("./forbid-act-in-disabled-act-environment").rule,
 };

eslint-local-rules/require-disable-act-environment.test.ts

@@ -0,0 +1,120 @@
+import { rule } from "./require-disable-act-environment";
+import { ruleTester } from "./testSetup";
+
+ruleTester.run("require-disable-act-environment", rule, {
+  valid: [
+    `
+  () => {
+    using _disabledAct = disableActEnvironment();
+    const { takeRender } = someCall()
+    const {} = takeRender()
+  }
+    `,
+    `
+  () => {
+    using _disabledAct = disableActEnvironment();
+    const {} = renderStream.takeRender()
+  }
+    `,
+    `
+  () => {
+    using _disabledAct = disableActEnvironment();
+    const { takeSnapshot } = someCall()
+    const {} = takeSnapshot()
+  }
+    `,
+    `
+  () => {
+    using _disabledAct = disableActEnvironment();
+    const {} = renderStream.takeSnapshot()
+  }
+    `,
+    `
+  using _disabledAct = disableActEnvironment();
+  () => {
+    const { takeRender } = someCall()
+    const {} = takeRender()
+  }
+    `,
+    `
+  using _disabledAct = disableActEnvironment();
+  () => {
+    const {} = renderStream.takeRender()
+  }
+    `,
+    `
+  using _disabledAct = disableActEnvironment();
+  () => {
+    const { takeSnapshot } = someCall()
+    const {} = takeSnapshot()
+  }
+    `,
+    `
+  using _disabledAct = disableActEnvironment();
+  () => {
+    const {} = renderStream.takeSnapshot()
+  }
+    `,
+  ],
+  invalid: [
+    `
+    () => {
+      using _disabledAct = disableActEnvironment();
+    }
+    () => {
+      const { takeRender } = someCall()
+      takeRender()
+    }
+    `,
+    `
+    () => {
+      using _disabledAct = disableActEnvironment();
+    }
+    () => {
+      renderStream.takeRender()
+    }
+    `,
+    `
+    () => {
+      using _disabledAct = disableActEnvironment();
+    }
+    () => {
+      const { takeSnapshot } = someCall()
+      takeSnapshot()
+    }
+    `,
+    `
+    () => {
+      using _disabledAct = disableActEnvironment();
+    }
+    () => {
+      renderStream.takeSnapshot()
+    }
+    `,
+    `
+    () => {
+      const { takeRender } = someCall()
+      takeRender()
+    }
+    `,
+    `
+    () => {
+      renderStream.takeRender()
+    }
+    `,
+    `
+    () => {
+      const { takeSnapshot } = someCall()
+      takeSnapshot()
+    }
+    `,
+    `
+    () => {
+      renderStream.takeSnapshot()
+    }
+    `,
+  ].map((code) => ({
+    code,
+    errors: [{ messageId: "missingDisableActEnvironment" }],
+  })),
+});

eslint-local-rules/require-disable-act-environment.ts

@@ -0,0 +1,83 @@
+import { ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
+import type { TSESTree as AST } from "@typescript-eslint/types";
+
+type Fn =
+  | AST.FunctionDeclaration
+  | AST.ArrowFunctionExpression
+  | AST.FunctionExpression;
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    let depth = 1;
+    let disabledDepth: number | false = false;
+
+    function EnterFn() {
+      depth++;
+    }
+    function ExitFn() {
+      depth--;
+      if (disabledDepth !== false && disabledDepth > depth) {
+        disabledDepth = false;
+      }
+    }
+
+    return {
+      CallExpression(node) {
+        const directCallee =
+          node.callee.type === "Identifier" ? node.callee
+          : node.callee.type === "MemberExpression" ? node.callee.property
+          : null;
+
+        if (
+          directCallee?.type === "Identifier" &&
+          directCallee.name === "disableActEnvironment"
+        ) {
+          if (disabledDepth === false) {
+            disabledDepth = depth;
+          }
+        }
+
+        if (
+          directCallee?.type === "Identifier" &&
+          (directCallee.name === "takeRender" ||
+            directCallee.name === "takeSnapshot")
+        ) {
+          if (disabledDepth === false) {
+            context.report({
+              messageId: "missingDisableActEnvironment",
+              node: node,
+            });
+          }
+        }
+      },
+      ArrowFunctionExpression: EnterFn,
+      FunctionExpression: EnterFn,
+      FunctionDeclaration: EnterFn,
+      "ArrowFunctionExpression:exit": ExitFn,
+      "FunctionExpression:exit": ExitFn,
+      "FunctionDeclaration:exit": ExitFn,
+    };
+  },
+  meta: {
+    messages: {
+      missingDisableActEnvironment:
+        "Tests using a render stream should call `disableActEnvironment`.",
+    },
+    type: "problem",
+    schema: [],
+  },
+  defaultOptions: [],
+});
+
+function findParentFunction(node: AST.Node): Fn | undefined {
+  let parentFunction: AST.Node | undefined = node;
+  while (
+    parentFunction != null &&
+    parentFunction.type !== "FunctionDeclaration" &&
+    parentFunction.type !== "FunctionExpression" &&
+    parentFunction.type !== "ArrowFunctionExpression"
+  ) {
+    parentFunction = parentFunction.parent;
+  }
+  return parentFunction;
+}