Fixed regression

matthewlipski · matthewlipski · commit 082e3d8da678 · 2026-06-01T15:56:45.000+02:00
diff --git a/tests/src/end-to-end/ai/ai-selection.test.tsx b/tests/src/end-to-end/ai/ai-selection.test.tsx
@@ -9,7 +9,7 @@ import { clickAt, getRect } from "../../utils/mouse.js";
 const AI_BUTTON_SELECTOR = `[data-test="editwithAI"]`;
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/ai/ai.test.tsx b/tests/src/end-to-end/ai/ai.test.tsx
@@ -8,7 +8,7 @@ import { expectElement, sleep, waitForSelector } from "../../utils/editor.js";
 beforeEach(async () => {
   // Use a small viewport so the editor content requires scrolling.
   await page.viewport(800, 400);
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/ariakit/ariakit.test.tsx b/tests/src/end-to-end/ariakit/ariakit.test.tsx
@@ -18,7 +18,7 @@ import { mouseSequence, moveMouseOverElement } from "../../utils/mouse.js";
 import { executeSlashCommand } from "../../utils/slashmenu.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/basics/basicblocks.test.tsx b/tests/src/end-to-end/basics/basicblocks.test.tsx
@@ -11,7 +11,7 @@ import {
 } from "../../utils/editor.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/basics/basics.test.tsx b/tests/src/end-to-end/basics/basics.test.tsx
@@ -6,7 +6,7 @@ import { EDITOR_SELECTOR } from "../../utils/const.js";
 import { waitForSelector } from "../../utils/editor.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/colors/colors.test.tsx b/tests/src/end-to-end/colors/colors.test.tsx
@@ -23,7 +23,7 @@ import { clickAt, getRect, moveMouseOverElement } from "../../utils/mouse.js";
 import { executeSlashCommand } from "../../utils/slashmenu.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/comments/comments.test.tsx b/tests/src/end-to-end/comments/comments.test.tsx
@@ -18,7 +18,7 @@ async function doubleClickElement(element: Element) {
 }
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/copypaste/__screenshots__/copypaste.test.tsx/Check-Copy-Paste-From-Non-Editable-Block-Should-be-able-to-copy-paste-text-from-a-non-editable-block-1.png b/tests/src/end-to-end/copypaste/__screenshots__/copypaste.test.tsx/Check-Copy-Paste-From-Non-Editable-Block-Should-be-able-to-copy-paste-text-from-a-non-editable-block-1.png
diff --git a/tests/src/end-to-end/copypaste/__screenshots__/copypaste.test.tsx/Check-Copy-Paste-Functionality-Images-should-keep-props-1.png b/tests/src/end-to-end/copypaste/__screenshots__/copypaste.test.tsx/Check-Copy-Paste-Functionality-Images-should-keep-props-1.png
diff --git a/tests/src/end-to-end/copypaste/copypaste.test.tsx b/tests/src/end-to-end/copypaste/copypaste.test.tsx
@@ -24,7 +24,7 @@ import { executeSlashCommand } from "../../utils/slashmenu.js";
 
 describe("Check Copy/Paste Functionality", () => {
   beforeEach(async () => {
-    render(<TestingApp />);
+    await render(<TestingApp />);
     await waitForSelector(EDITOR_SELECTOR);
   });
 
@@ -174,7 +174,7 @@ describe("Check Copy/Paste Functionality", () => {
 
 describe("Check Copy/Paste From Non-Editable Block", () => {
   beforeEach(async () => {
-    render(<NonEditableApp />);
+    await render(<NonEditableApp />);
     await waitForSelector(EDITOR_SELECTOR);
   });
 
diff --git a/tests/src/end-to-end/customblocks/customblocks.test.tsx b/tests/src/end-to-end/customblocks/customblocks.test.tsx
@@ -13,7 +13,7 @@ import {
 
 describe("Check custom block functionality", () => {
   test("Should be able to interactively update vanilla custom blocks", async () => {
-    render(<VanillaCustomBlocksApp />);
+    await render(<VanillaCustomBlocksApp />);
     await waitForSelector(EDITOR_SELECTOR);
 
     await userEvent.selectOptions(await waitForSelector("select"), "info");
@@ -26,7 +26,7 @@ describe("Check custom block functionality", () => {
   });
 
   test("Should be able to interactively update React custom blocks", async () => {
-    render(<ReactCustomBlocksApp />);
+    await render(<ReactCustomBlocksApp />);
     await waitForSelector(EDITOR_SELECTOR);
 
     await userEvent.selectOptions(await waitForSelector("select"), "info");
diff --git a/tests/src/end-to-end/dragdrop/dragdrop.test.tsx b/tests/src/end-to-end/dragdrop/dragdrop.test.tsx
@@ -35,7 +35,7 @@ describe("Check Block Dragging Functionality", () => {
   test.skipIf(browserName === "firefox")(
     "Should be able to drag & drop non-nested blocks",
     async () => {
-      render(<TestingApp />);
+      await render(<TestingApp />);
       await waitForSelector(EDITOR_SELECTOR);
       await focusOnEditor();
 
@@ -54,7 +54,7 @@ describe("Check Block Dragging Functionality", () => {
   test.skipIf(browserName === "firefox")(
     "Should be able to drag & drop nested blocks",
     async () => {
-      render(<TestingApp />);
+      await render(<TestingApp />);
       await waitForSelector(EDITOR_SELECTOR);
       await focusOnEditor();
 
@@ -97,7 +97,7 @@ describe("Check Block Dragging Functionality", () => {
   test.skipIf(browserName === "firefox")(
     "Should be able to drag image",
     async () => {
-      render(<TestingApp />);
+      await render(<TestingApp />);
       await waitForSelector(EDITOR_SELECTOR);
       await focusOnEditor();
       await executeSlashCommand("image");
@@ -114,7 +114,7 @@ describe("Check Block Dragging Functionality", () => {
   test.skipIf(browserName === "firefox")(
     "Formatting toolbar should not appear when dragging image block",
     async () => {
-      render(<TestingApp />);
+      await render(<TestingApp />);
       await waitForSelector(EDITOR_SELECTOR);
       await focusOnEditor();
       await executeSlashCommand("image");
@@ -133,7 +133,7 @@ describe("Check Block Dragging Functionality", () => {
   test.skipIf(browserName === "firefox")(
     "Should be able to drag PDF block",
     async () => {
-      render(<PdfFileApp />);
+      await render(<PdfFileApp />);
       await waitForSelector(EDITOR_SELECTOR);
       await focusOnEditor();
       await waitForSelector(PDF_SELECTOR);
diff --git a/tests/src/end-to-end/draghandle/draghandle.test.tsx b/tests/src/end-to-end/draghandle/draghandle.test.tsx
@@ -32,7 +32,7 @@ import { executeSlashCommand } from "../../utils/slashmenu.js";
 
 describe("Check Draghandle functionality", () => {
   beforeEach(async () => {
-    render(<App />);
+    await render(<App />);
     await waitForSelector(EDITOR_SELECTOR);
     await focusOnEditor();
   });
diff --git a/tests/src/end-to-end/emojipicker/emojipicker.test.tsx b/tests/src/end-to-end/emojipicker/emojipicker.test.tsx
@@ -16,7 +16,7 @@ import {
 import { executeSlashCommand } from "../../utils/slashmenu.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/images/images.test.tsx b/tests/src/end-to-end/images/images.test.tsx
@@ -18,7 +18,7 @@ const IMAGE_EMBED_URL = "https://placehold.co/800x540.png";
 
 describe("Check Image Block and Toolbar functionality", () => {
   test("Should be able to create image block", async () => {
-    render(<TestingApp />);
+    await render(<TestingApp />);
     await waitForSelector(EDITOR_SELECTOR);
     await focusOnEditor();
     await executeSlashCommand("image");
@@ -28,7 +28,7 @@ describe("Check Image Block and Toolbar functionality", () => {
     await expectElement(document.body).toMatchScreenshot("create-image");
   });
   test.skip("Should be able to upload image", async () => {
-    render(<TestingApp />);
+    await render(<TestingApp />);
     await waitForSelector(EDITOR_SELECTOR);
     await focusOnEditor();
     await executeSlashCommand("image");
@@ -49,7 +49,7 @@ describe("Check Image Block and Toolbar functionality", () => {
     await expectElement(document.body).toMatchScreenshot("upload-image");
   });
   test("Should be able to embed image", async () => {
-    render(<TestingApp />);
+    await render(<TestingApp />);
     await waitForSelector(EDITOR_SELECTOR);
     await focusOnEditor();
     await executeSlashCommand("image");
@@ -70,7 +70,7 @@ describe("Check Image Block and Toolbar functionality", () => {
     await expectElement(document.body).toMatchScreenshot("embed-image");
   });
   test("Should be able to resize image", async () => {
-    render(<TestingApp />);
+    await render(<TestingApp />);
     await waitForSelector(EDITOR_SELECTOR);
     await focusOnEditor();
     await executeSlashCommand("image");
@@ -112,7 +112,7 @@ describe("Check Image Block and Toolbar functionality", () => {
     await expectElement(document.body).toMatchScreenshot("resize-image");
   });
   test("Should be able to delete image with backspace", async () => {
-    render(<TestingApp />);
+    await render(<TestingApp />);
     await waitForSelector(EDITOR_SELECTOR);
     await focusOnEditor();
     await executeSlashCommand("image");
@@ -131,7 +131,7 @@ describe("Check Image Block and Toolbar functionality", () => {
     await compareDocToSnapshot("deleteImage");
   });
   test("Should open file panel but not formatting toolbar when inserting image with no trailing block", async () => {
-    render(<NoTrailingBlockApp />);
+    await render(<NoTrailingBlockApp />);
     await waitForSelector(EDITOR_SELECTOR);
     await focusOnEditor();
     await executeSlashCommand("image");
diff --git a/tests/src/end-to-end/indentation/indentation.test.tsx b/tests/src/end-to-end/indentation/indentation.test.tsx
@@ -19,7 +19,7 @@ import {
 import { clickAt, getRect } from "../../utils/mouse.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.tsx b/tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.tsx
@@ -18,7 +18,7 @@ import { clickAt, getRect } from "../../utils/mouse.js";
 import { executeSlashCommand } from "../../utils/slashmenu.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/multicolumn/multicolumn.test.tsx b/tests/src/end-to-end/multicolumn/multicolumn.test.tsx
@@ -11,7 +11,7 @@ import {
 import { clickAt, getRect } from "../../utils/mouse.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/placeholder/placeholder.test.tsx b/tests/src/end-to-end/placeholder/placeholder.test.tsx
@@ -6,7 +6,7 @@ import { expectElement, sleep, waitForSelector } from "../../utils/editor.js";
 import { moveMouseOverElement } from "../../utils/mouse.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/shadcn/shadcn.test.tsx b/tests/src/end-to-end/shadcn/shadcn.test.tsx
@@ -27,7 +27,7 @@ import {
 import { executeSlashCommand } from "../../utils/slashmenu.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/slashmenu/slashmenu-customblock.test.tsx b/tests/src/end-to-end/slashmenu/slashmenu-customblock.test.tsx
@@ -21,7 +21,7 @@ const expectElement = (expect as unknown as { element: ElementExpect }).element;
 // open in this scenario.
 describe("Slash menu in custom (alert) block – issue #2531", () => {
   beforeEach(async () => {
-    render(<App />);
+    await render(<App />);
     await waitForSelector(EDITOR_SELECTOR);
   });
 
diff --git a/tests/src/end-to-end/slashmenu/slashmenu.test.tsx b/tests/src/end-to-end/slashmenu/slashmenu.test.tsx
@@ -23,7 +23,7 @@ import {
 import { executeSlashCommand, openSlashMenu } from "../../utils/slashmenu.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/Check-static-rendering-Check-static-rendering-visually-matches-live-editor-1.png b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/Check-static-rendering-Check-static-rendering-visually-matches-live-editor-1.png
diff --git a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/Check-static-rendering-Check-static-rendering-visually-matches-live-editor-2.png b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/Check-static-rendering-Check-static-rendering-visually-matches-live-editor-2.png
diff --git a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/Check-static-rendering-Check-static-rendering-visually-matches-live-editor-3.png b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/Check-static-rendering-Check-static-rendering-visually-matches-live-editor-3.png
diff --git a/tests/src/end-to-end/static/static.test.tsx b/tests/src/end-to-end/static/static.test.tsx
@@ -8,19 +8,50 @@ import { expectElement, sleep, waitForSelector } from "../../utils/editor.js";
 
 describe("Check static rendering", () => {
   test("Check static rendering", async () => {
-    render(<StaticApp />);
+    await render(<StaticApp />);
     await waitForSelector(EDITOR_SELECTOR);
     await sleep(500);
     await expectElement(document.body).toMatchScreenshot("static-rendering");
   });
 
-  // Renders two editors back-to-back and screenshots each. Heavy enough that
-  // even the suite-wide 30s testTimeout is tight when 3 browsers contend in
-  // one Docker container — bump to 60s to absorb the contention.
+  // Renders two editors back-to-back and screenshots each against the same
+  // baseline, asserting the static HTML export looks like the live editor.
+  // Heavy enough that even the suite-wide 30s testTimeout is tight when 3
+  // browsers contend in one Docker container — bump to 60s to absorb that.
   test(
     "Check static rendering visually matches live editor",
     { timeout: 60000 },
     async () => {
+      // Screenshots the page body against the shared baseline. Mirrors the
+      // options the original Playwright test used:
+      // - Mask the regions that legitimately differ between the live editor and
+      //   the static export, or that aren't deterministic across runs. <video>/
+      //   <audio> render differently as they load (and the amount loaded varies
+      //   per run) — unmasked, their per-frame changes also keep the page from
+      //   ever stabilising, which hangs the screenshot matcher. Checkboxes and
+      //   toggle buttons are interactive widgets in the live editor but plain
+      //   markup in the export. Masks are resolved at call time so they pick up
+      //   whichever of these elements the current render produced.
+      // - `allowedMismatchedPixels` is vite-plus's pixelmatch equivalent of
+      //   Playwright's `maxDiffPixels`: a small allowance for the image caption
+      //   text, which renders slightly differently (e.g. '×' vs 'x').
+      const matchEquality = () =>
+        expectElement(document.body).toMatchScreenshot(
+          "static-rendering-equality",
+          {
+            comparatorOptions: { allowedMismatchedPixels: 200 },
+            screenshotOptions: {
+              scale: "css",
+              mask: [
+                ...document.querySelectorAll("video"),
+                ...document.querySelectorAll("audio"),
+                ...document.querySelectorAll('input[type="checkbox"]'),
+                ...document.querySelectorAll(".bn-toggle-button"),
+              ],
+            },
+          },
+        );
+
       const liveEditor = await render(<BasicBlocksApp />);
       await waitForSelector(EDITOR_SELECTOR);
       // Hide the trailing block widget so the live editor's page height matches
@@ -30,19 +61,19 @@ describe("Check static rendering", () => {
       document.head.appendChild(style);
       await sleep(500);
 
-      await expectElement(document.body).toMatchScreenshot(
-        "static-rendering-equality",
-      );
+      await matchEquality();
 
-      liveEditor.unmount();
+      // Await the unmount: `render`/`unmount` run inside `act()`, and starting
+      // the next render before the unmount settles triggers React's
+      // "overlapping act() calls" warning and leaves a pending act promise that
+      // hangs the test.
+      await liveEditor.unmount();
       style.remove();
 
-      render(<BasicBlocksStaticApp />);
+      await render(<BasicBlocksStaticApp />);
       await waitForSelector(EDITOR_SELECTOR);
       await sleep(500);
-      await expectElement(document.body).toMatchScreenshot(
-        "static-rendering-equality",
-      );
+      await matchEquality();
     },
   );
 });
diff --git a/tests/src/end-to-end/tables/tables.test.tsx b/tests/src/end-to-end/tables/tables.test.tsx
@@ -12,7 +12,7 @@ import { mouseSequence, moveMouseOverElement } from "../../utils/mouse.js";
 import { executeSlashCommand } from "../../utils/slashmenu.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/textalignment/textAlignment.test.tsx b/tests/src/end-to-end/textalignment/textAlignment.test.tsx
@@ -15,7 +15,7 @@ import {
 } from "../../utils/editor.js";
 
 beforeEach(async () => {
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/end-to-end/theming/theming.test.tsx b/tests/src/end-to-end/theming/theming.test.tsx
@@ -37,7 +37,7 @@ beforeEach(async () => {
     removeEventListener: () => {},
     dispatchEvent: () => false,
   })) as typeof window.matchMedia;
-  render(<App />);
+  await render(<App />);
   await waitForSelector(EDITOR_SELECTOR);
 });
 
diff --git a/tests/src/utils/editor.ts b/tests/src/utils/editor.ts
diff --git a/tests/src/utils/mouse.ts b/tests/src/utils/mouse.ts

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ async function doubleClickElement(element: Element) {`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`beforeEach(async () => {`
`21`		`- render(<App />);`
	`21`	`+ await render(<App />);`
`22`	`22`	`await waitForSelector(EDITOR_SELECTOR);`
`23`	`23`	`});`
`24`	`24`