Vitest 3 optimizing

.github/workflows/unit-test.yml

@@ -17,11 +17,11 @@ jobs:
             - name: "Install Node"
               uses: actions/setup-node@v4
               with:
-                  node-version: "21.x"
+                  node-version: "22.x"
             - name: "Install Deps"
               run: npm install
             - name: "Test"
-              run: npx vitest --coverage.enabled true
+              run: npm run test:coverage
             - name: "Report Coverage"
               # Set if: always() to also generate the report if tests are failing
               # Only works if you set `reportOnFailure: true` in your vite config as specified above

.gitignore

@@ -138,5 +138,9 @@ temp/
 
 .DS_Store
 
+# Test results and profiling reports
+test-results.json
+junit.xml
+test-profile-report.json
 
 # End of https://www.toptal.com/developers/gitignore/api/node,web,vscode

package.json

@@ -25,7 +25,8 @@
     "sideEffects": false,
     "scripts": {
         "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
-        "test": "vitest",
+        "test": "vitest --run",
+        "test:watch": "vitest",
         "test:once": "vitest run",
         "test:coverage": "vitest --coverage",
         "dev": "NODE_OPTIONS='--max-old-space-size=16384' tsup --watch",
@@ -57,8 +58,8 @@
         "@types/react": "^18.2.57",
         "@types/react-dom": "^18.2.19",
         "@types/uuid": "^8.3.1",
-        "@vitest/coverage-v8": "^2.1.2",
-        "@vitest/ui": "^2.1.2",
+        "@vitest/coverage-v8": "^3.2.4",
+        "@vitest/ui": "^3.2.4",
         "auto-changelog": "^2.5.0",
         "esbuild-plugin-file-path-extensions": "^2.1.0",
         "eslint": "^8.57.1",
@@ -77,7 +78,7 @@
         "typedoc": "^0.25.13",
         "typescript": "^5.4.5",
         "typescript-eslint": "^8.5.0",
-        "vitest": "^2.1.0"
+        "vitest": "^3.2.4"
     },
     "repository": {
         "type": "git",

src/__test__/utils.test.ts

@@ -0,0 +1,48 @@
+import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
+import { waitForHoverOutline } from "./utils";
+
+describe("waitForHoverOutline", () => {
+    beforeEach(() => {
+        // Clear DOM before each test
+        document.body.innerHTML = "";
+    });
+
+    afterEach(() => {
+        // Clean up after each test
+        document.body.innerHTML = "";
+        vi.clearAllMocks();
+    });
+
+    test("should resolve when hover outline exists with style attribute", async () => {
+        // Create hover outline element with style
+        const hoverOutline = document.createElement("div");
+        hoverOutline.setAttribute("data-testid", "visual-builder__hover-outline");
+        hoverOutline.setAttribute("style", "top: 10px; left: 10px; width: 100px; height: 50px;");
+        document.body.appendChild(hoverOutline);
+
+        // Should resolve immediately since element exists with style
+        await expect(waitForHoverOutline()).resolves.not.toThrow();
+    });
+
+    test("should wait for hover outline to appear", async () => {
+        // Initially no element
+        const promise = waitForHoverOutline();
+
+        // Add element after a short delay
+        setTimeout(() => {
+            const hoverOutline = document.createElement("div");
+            hoverOutline.setAttribute("data-testid", "visual-builder__hover-outline");
+            hoverOutline.setAttribute("style", "top: 10px; left: 10px;");
+            document.body.appendChild(hoverOutline);
+        }, 100);
+
+        // Should resolve once element appears
+        await expect(promise).resolves.not.toThrow();
+    });
+
+    test("should timeout if element does not exist", async () => {
+        // No element created - should timeout after default waitFor timeout
+        await expect(waitForHoverOutline()).rejects.toThrow();
+    }, 10000);
+});
+

src/livePreview/__test__/live-preview.test.ts

@@ -5,7 +5,6 @@
 import { act, fireEvent, waitFor } from "@testing-library/preact";
 import crypto from "crypto";
 import { vi } from "vitest";
-import { sleep } from "../../__test__/utils";
 import { getDefaultConfig } from "../../configManager/config.default";
 import Config from "../../configManager/configManager";
 import { PublicLogger } from "../../logger/logger";
@@ -349,13 +348,27 @@ describe("incoming postMessage", () => {
         });
 
         livePreviewPostMessage?.destroy({ soft: true });
+
+        // Track when INIT completes
+        let initCompleted = false;
         livePreviewPostMessage?.on(
             LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,
-            mockLivePreviewInitEventListener
+            () => {
+                const result = mockLivePreviewInitEventListener();
+                initCompleted = true;
+                return result;
+            }
         );
 
         const livePreview = new LivePreview();
-        await sleep();
+
+        // Wait for INIT event to complete and event listeners to be registered
+        await waitFor(
+            () => {
+                expect(initCompleted).toBe(true);
+            },
+            { timeout: 3000 }
+        );
 
         // set user onChange function
         const userOnChange = vi.fn();
@@ -386,7 +399,13 @@ describe("incoming postMessage", () => {
         }
 
         new LivePreview();
-        await sleep();
+
+        // Wait for async init event to be processed
+        await waitFor(() => {
+            expect(Config.get().stackDetails.contentTypeUid).toBe(
+                "contentTypeUid"
+            );
+        });
 
         expect(Config.get().stackDetails).toMatchObject({
             apiKey: "",
@@ -397,35 +416,51 @@ describe("incoming postMessage", () => {
     });
 
     test("should navigate forward, backward and reload page on history call", async () => {
+        // Track when INIT completes
+        let initCompleted = false;
+        livePreviewPostMessage?.destroy({ soft: true });
+        livePreviewPostMessage?.on(
+            LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,
+            () => {
+                const result = mockLivePreviewInitEventListener();
+                initCompleted = true;
+                return result;
+            }
+        );
+
         new LivePreview();
-        await sleep();
+
+        // Wait for INIT to complete and event listeners to be registered
+        await waitFor(
+            () => {
+                expect(initCompleted).toBe(true);
+            },
+            { timeout: 3000 }
+        );
 
         vi.spyOn(window.history, "forward");
         vi.spyOn(window.history, "back");
         vi.spyOn(window.history, "go").mockImplementation(() => {});
 
         // for forward
-        livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
+        await livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
             type: "forward",
         } as HistoryLivePreviewPostMessageEventData);
-        await sleep(0);
 
         expect(window.history.forward).toHaveBeenCalled();
 
         // for back
-        livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
+        await livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
             type: "backward",
         } as HistoryLivePreviewPostMessageEventData);
 
-        await sleep(0);
         expect(window.history.back).toHaveBeenCalled();
 
         // for reload
-        livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
+        await livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
             type: "reload",
         } as HistoryLivePreviewPostMessageEventData);
 
-        await sleep(0);
         expect(window.history.go).toHaveBeenCalled();
     });
 });