Merge pull request #586 from contentstack/VP-1829-upgrade-uuid-and-fix-audit

chore: update vitest from v3 to v4 and its related dependencies

Author: hitesh-shetty-cstk

package-lock.json

@@ -47,19 +47,19 @@
     "devDependencies": {
         "@commitlint/cli": "^20.2.0",
         "@commitlint/config-conventional": "^16.2.4",
-        "@contentstack/advanced-post-message": "^0.0.2",
+        "@contentstack/advanced-post-message": "^0.0.5",
         "@eslint/js": "^9.10.0",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/preact": "^3.2.4",
         "@testing-library/user-event": "^14.5.2",
         "@types/jsdom": "^21.1.6",
         "@types/lodash-es": "^4.17.12",
         "@types/mustache": "^4.2.2",
+        "@types/node": "^25.6.0",
         "@types/react": "^18.2.57",
         "@types/react-dom": "^18.2.19",
-        "@types/uuid": "^8.3.1",
-        "@vitest/coverage-v8": "^3.2.4",
-        "@vitest/ui": "^3.2.4",
+        "@vitest/coverage-v8": "^4.1.5",
+        "@vitest/ui": "^4.1.5",
         "auto-changelog": "^2.5.0",
         "esbuild-plugin-file-path-extensions": "^2.1.0",
         "eslint": "^8.57.1",
@@ -78,7 +78,7 @@
         "typedoc": "^0.25.13",
         "typescript": "^5.4.5",
         "typescript-eslint": "^8.5.0",
-        "vitest": "^3.2.4"
+        "vitest": "^4.1.5"
     },
     "repository": {
         "type": "git",
@@ -97,7 +97,7 @@
         "lodash-es": "^4.18.1",
         "mustache": "^4.2.0",
         "preact": "^10.28.2",
-        "uuid": "^11.0.3"
+        "uuid": "^14.0.0"
     },
     "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "4.9.5"

package.json

@@ -0,0 +1,32 @@
+import { vi } from "vitest";
+
+/**
+ * Vitest 4 requires globals used with `new` to be constructible (class or `function`);
+ * `vi.fn().mockImplementation(() => ({ ... }))` is not a constructor and throws.
+ */
+class MockResizeObserver {
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+
+    constructor(_: ResizeObserverCallback) {}
+}
+
+class MockMutationObserver {
+    observe = vi.fn();
+    disconnect = vi.fn();
+    takeRecords = vi.fn((): MutationRecord[] => []);
+
+    constructor(_: MutationCallback) {}
+}
+
+export const constructibleResizeObserver =
+    MockResizeObserver as unknown as typeof ResizeObserver;
+
+export const constructibleMutationObserver =
+    MockMutationObserver as unknown as typeof MutationObserver;
+
+export function installGlobalObserverMocks() {
+    global.ResizeObserver = constructibleResizeObserver;
+    global.MutationObserver = constructibleMutationObserver;
+}

src/__test__/domObserverMocks.ts

@@ -60,7 +60,7 @@ class LightLivePreviewHoC {
     }
 
     static getSdkVersion(): string {
-        return process?.env?.PACKAGE_VERSION!;
+        return (typeof process !== "undefined" ? process?.env?.PACKAGE_VERSION : undefined) ?? "";
     }
 }
 

src/light-sdk.ts

@@ -6,9 +6,11 @@ import { vi } from "vitest";
 import { EventManager } from "@contentstack/advanced-post-message";
 import { LIVE_PREVIEW_CHANNEL_ID } from "../livePreviewEventManager.constant";
 
-// Mock dependencies
+// Mock dependencies — must be constructible (`new EventManager()`) (Vitest 4)
 vi.mock("@contentstack/advanced-post-message", () => ({
-    EventManager: vi.fn(),
+    EventManager: vi.fn(function (this: unknown) {
+        return { on: vi.fn(), send: vi.fn() };
+    }),
 }));
 
 vi.mock("../../../common/inIframe", () => ({
@@ -31,7 +33,9 @@ describe("livePreviewEventManager", () => {
             on: vi.fn(),
             send: vi.fn(),
         };
-        (EventManager as any).mockImplementation(() => mockEventManager);
+        (EventManager as any).mockImplementation(function () {
+            return mockEventManager;
+        });
 
         // Store original window
         originalWindow = global.window;
@@ -209,14 +213,21 @@ describe("livePreviewEventManager", () => {
             });
 
             it("should handle when EventManager constructor throws", async () => {
-                (EventManager as any).mockImplementation(() => {
+                (EventManager as any).mockImplementation(function () {
                     throw new Error("EventManager constructor error");
                 });
 
-                // Should not crash the module initialization
-                expect(async () => {
-                    await import("../livePreviewEventManager");
-                }).not.toThrow();
+                // `new EventManager` runs while the module loads, so a throwing constructor
+                // fails module evaluation and `import()` gets a *rejected* promise.
+                //
+                // We use `rejects.toThrow` (and await it), not `expect(() => import).not.toThrow()`:
+                // the latter only catches synchronous throws; async failures become promise
+                // rejections, which the old pattern missed and could surface as unhandled
+                // rejections (e.g. under Vitest 4). This matches actual runtime behavior, not
+                // a reversed expectation: the module does not catch the error internally.
+                await expect(
+                    import("../livePreviewEventManager")
+                ).rejects.toThrow("EventManager constructor error");
             });
         });
     });

src/livePreview/eventManager/__test__/livePreviewEventManager.test.ts

@@ -27,6 +27,7 @@
 
 import { screen, waitFor } from "@testing-library/preact";
 import "@testing-library/jest-dom";
+import { constructibleMutationObserver } from "../../../../__test__/domObserverMocks";
 import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap";
 import Config from "../../../../configManager/configManager";
 import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../../../utils/constants";
@@ -40,10 +41,7 @@ import { triggerAndWaitForClickAction } from "../../../../__test__/utils";
 import { FieldDataType } from "../../../utils/types/index.types";
 import { ALLOWED_MODAL_EDITABLE_FIELD } from "../../../utils/constants";
 
-global.MutationObserver = vi.fn().mockImplementation(() => ({
-    observe: vi.fn(),
-    disconnect: vi.fn(),
-}));
+global.MutationObserver = constructibleMutationObserver;
 
 vi.mock("../../../components/FieldToolbar", () => {
     return {

src/visualBuilder/__test__/click/fields/all-click.test.tsx

@@ -1,4 +1,5 @@
 import { screen, waitFor } from "@testing-library/preact";
+import { constructibleMutationObserver } from "../../../../__test__/domObserverMocks";
 import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap";
 import {
     waitForHoverOutline,
@@ -88,10 +89,7 @@ describe("When an element is hovered in visual builder mode", () => {
             getFieldSchemaMap().all_fields
         );
 
-        global.MutationObserver = vi.fn().mockImplementation(() => ({
-            observe: vi.fn(),
-            disconnect: vi.fn(),
-        }));
+        global.MutationObserver = constructibleMutationObserver;
     });
 
     beforeEach(() => {

src/visualBuilder/__test__/hover/fields/file.test.ts

@@ -22,7 +22,7 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
                     return Promise.resolve({
                         contentTypes,
                     });
-                return Promise.resolve();
+                return Promise.resolve({});
             }),
         },
     };

src/visualBuilder/__test__/hover/fields/group.test.ts

@@ -5,7 +5,9 @@ import { VISUAL_BUILDER_CHANNEL_ID } from "../constants";
 
 vi.mock('@contentstack/advanced-post-message', () => {
     return {
-        EventManager: vi.fn()
+        EventManager: vi.fn(function () {
+            return { on: vi.fn(), send: vi.fn() };
+        }),
     };
 });
 
@@ -27,8 +29,10 @@ describe('visualBuilderPostMessage', () => {
     });
 
     it('should initialize EventManager if window is defined', async () => {
-        const mockEventManagerInstance = {};
-        EventManager.mockImplementation(() => mockEventManagerInstance);
+        const mockEventManagerInstance = { on: vi.fn(), send: vi.fn() };
+        vi.mocked(EventManager).mockImplementation(function () {
+            return mockEventManagerInstance;
+        });
         const module = await import('../visualBuilderPostMessage');
 
         expect(EventManager).toHaveBeenCalledWith(VISUAL_BUILDER_CHANNEL_ID, {

src/visualBuilder/utils/__test__/visualBuilderPostMessage.test.ts

@@ -6,7 +6,7 @@
         "declaration": true ,
         "declarationMap": true ,
         "lib": ["DOM", "DOM.Iterable", "ES2022"],
-        "types": ["vitest/globals"],
+        "types": ["vitest/globals", "node"],
         "sourceMap": true ,
         "outDir": "./dist" ,
         "rootDir": "." ,