replace jsdom with vitest browser mode (#176)

* Swap from jsdom to browser

* Create clever-toys-travel.md

* Add missing packages

* Attempt more test fixes

* Update testing matrix

* Update test.yml

* Update test.yml

Author: haydenbleasel

.changeset/clever-toys-travel.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+replace jsdom with Vitest Browser Mode

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20, 22]
+        node-version: [20, 22, 24]
 
     steps:
       - name: Checkout Repo
@@ -32,5 +32,8 @@ jobs:
       - name: Install Dependencies
         run: pnpm i
 
+      - name: Install Playwright Browsers
+        run: pnpm --filter @repo/elements exec playwright install --with-deps chromium
+
       - name: Run Tests
         run: pnpm test

.gitignore

@@ -14,6 +14,7 @@ node_modules
 
 # Testing
 coverage
+**/__screenshots__
 
 # Turbo
 .turbo

package.json

@@ -15,13 +15,16 @@
   "devDependencies": {
     "@biomejs/biome": "2.3.1",
     "@changesets/cli": "^2.29.7",
+    "@vitest/browser-playwright": "^4.0.4",
+    "@vitest/browser-preview": "^4.0.4",
     "turbo": "^2.5.8",
     "typescript": "5.9.3",
-    "ultracite": "6.0.4"
+    "ultracite": "6.0.4",
+    "vitest": "^4.0.4"
   },
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=18"
+    "node": ">=20.12"
   },
   "pnpm": {
     "overrides": {

packages/elements/__tests__/code-block.test.tsx

@@ -3,13 +3,6 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { CodeBlock, CodeBlockCopyButton } from "../src/code-block";
 
-// Mock clipboard API
-Object.assign(navigator, {
-  clipboard: {
-    writeText: vi.fn(() => Promise.resolve()),
-  },
-});
-
 describe("CodeBlock", () => {
   it("renders code content", async () => {
     const { container } = render(

packages/elements/__tests__/connection.test.tsx

@@ -1,9 +1,12 @@
 import { render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { Connection } from "../src/connection";
 
 describe("Connection", () => {
   it("renders with basic props", () => {
+    // Mock console.error to suppress React SVG warnings from @xyflow/react
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+
     const props = {
       fromX: 0,
       fromY: 0,
@@ -20,6 +23,8 @@ describe("Connection", () => {
 
     expect(path).toBeInTheDocument();
     expect(circle).toBeInTheDocument();
+
+    consoleError.mockRestore();
   });
 
   it("renders path with correct coordinates", () => {

packages/elements/__tests__/prompt-input.test.tsx

@@ -26,13 +26,13 @@ import {
 
 // Mock URL.createObjectURL and URL.revokeObjectURL for tests
 beforeEach(() => {
-  global.URL.createObjectURL = vi.fn(
+  window.URL.createObjectURL = vi.fn(
     (blob) => `blob:mock-url-${Math.random()}`
   );
-  global.URL.revokeObjectURL = vi.fn();
+  window.URL.revokeObjectURL = vi.fn();
 
   // Mock fetch for blob URL conversion
-  global.fetch = vi.fn((url: string) => {
+  window.fetch = vi.fn((url: string) => {
     if (url.startsWith("blob:")) {
       const blob = new Blob(["test content"], { type: "text/plain" });
       return Promise.resolve({
@@ -43,7 +43,7 @@ beforeEach(() => {
   });
 
   // Mock FileReader
-  global.FileReader = vi.fn(function (this: FileReader) {
+  window.FileReader = vi.fn(function (this: FileReader) {
     this.readAsDataURL = vi.fn(function (this: FileReader, blob: Blob) {
       // Simulate async file reading
       setTimeout(() => {
@@ -1069,16 +1069,16 @@ describe("PromptInputSpeechButton", () => {
     };
 
     // @ts-expect-error - Mocking browser API
-    global.window.SpeechRecognition = function () {
+    window.SpeechRecognition = function () {
       return mockRecognition;
     };
   });
 
   afterEach(() => {
     // @ts-expect-error - Cleaning up mock
-    delete global.window.SpeechRecognition;
+    delete window.SpeechRecognition;
     // @ts-expect-error - Cleaning up mock
-    delete global.window.webkitSpeechRecognition;
+    delete window.webkitSpeechRecognition;
   });
 
   it("renders button component", () => {
@@ -1185,9 +1185,9 @@ describe("PromptInputSpeechButton", () => {
 
   it("is disabled when speech recognition not available", () => {
     // @ts-expect-error - Removing mock
-    delete global.window.SpeechRecognition;
+    delete window.SpeechRecognition;
 
-    const { container } = render(<PromptInputSpeechButton />);
+    const { container} = render(<PromptInputSpeechButton />);
     const button = container.querySelector("button");
 
     expect(button).toBeDisabled();

packages/elements/__tests__/setup.ts

@@ -3,74 +3,15 @@ import { cleanup } from "@testing-library/react";
 import { afterEach, vi } from "vitest";
 import failOnConsole from "vitest-fail-on-console";
 
-// Mock CSS imports
-vi.mock("*.css", () => ({}));
-vi.mock("katex/dist/katex.min.css", () => ({}));
-
-// Mock ResizeObserver
-global.ResizeObserver = vi.fn(function (this: ResizeObserver) {
-  this.observe = vi.fn();
-  this.unobserve = vi.fn();
-  this.disconnect = vi.fn();
-  return this;
-}) as unknown as typeof ResizeObserver;
-
-// Mock IntersectionObserver
-global.IntersectionObserver = vi.fn(function (this: IntersectionObserver) {
-  this.observe = vi.fn();
-  this.unobserve = vi.fn();
-  this.disconnect = vi.fn();
-  this.root = null;
-  this.rootMargin = "";
-  this.thresholds = [];
-  this.takeRecords = vi.fn(() => []);
-  return this;
-}) as unknown as typeof IntersectionObserver;
-
-// Mock matchMedia
-Object.defineProperty(window, "matchMedia", {
+// Mock clipboard API for browser environment
+Object.defineProperty(navigator, "clipboard", {
+  value: {
+    writeText: vi.fn(() => Promise.resolve()),
+  },
   writable: true,
-  value: vi.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
+  configurable: true,
 });
 
-// Patch createElement to handle SVG elements properly in jsdom
-const SVG_TAGS = new Set([
-  "svg",
-  "path",
-  "circle",
-  "g",
-  "rect",
-  "line",
-  "polyline",
-  "polygon",
-  "ellipse",
-  "text",
-  "tspan",
-  "defs",
-  "clipPath",
-]);
-
-const originalCreateElement = document.createElement.bind(document);
-// @ts-expect-error - Overriding createElement signature for test environment
-document.createElement = (
-  tagName: string,
-  options?: ElementCreationOptions
-) => {
-  if (SVG_TAGS.has(tagName.toLowerCase())) {
-    return document.createElementNS("http://www.w3.org/2000/svg", tagName);
-  }
-  return originalCreateElement(tagName, options);
-};
-
 // Fail the test if there are any console logs during test execution
 failOnConsole({
   shouldFailOnAssert: true,

packages/elements/package.json

@@ -21,6 +21,7 @@
     "motion": "^12.23.24",
     "nanoid": "^5.1.6",
     "react": "19.2.0",
+    "react-dom": "19.2.0",
     "shiki": "3.14.0",
     "streamdown": "^1.4.0",
     "tokenlens": "^1.3.1",
@@ -34,8 +35,10 @@
     "@types/hast": "^3.0.4",
     "@types/react": "19.2.2",
     "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/browser": "^4.0.4",
+    "@vitest/browser-playwright": "^4.0.4",
     "@vitest/coverage-v8": "^4.0.4",
-    "jsdom": "^26.0.0",
+    "playwright": "^1.56.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.4",
     "vitest-fail-on-console": "^0.10.1"

packages/elements/vitest.config.mts

@@ -1,12 +1,18 @@
+import path from "node:path";
 import react from "@vitejs/plugin-react";
-import path from "path";
+import { playwright } from "@vitest/browser-playwright";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   plugins: [react()],
   test: {
     globals: true,
-    environment: "jsdom",
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      headless: true,
+      instances: [{ browser: "chromium" }],
+    },
     setupFiles: ["./__tests__/setup.ts"],
     include: ["__tests__/**/*.test.{ts,tsx}"],
     server: {