Remove JSDOM from last two test cases using it in favor of happy-dom. The test cases need work to pass but are in line for refactoring to web components, so work is delayed.

Author: webstackdev

package-lock.json

@@ -30,7 +30,7 @@
     "build:dev": "cross-env NODE_ENV=development npx astro build",
     "check": "npx astro check",
     "clean": "npx rimraf dist && npx rimraf .astro",
-    "dev": "npm run sync && cross-env NODE_ENV=development npx vercel dev",
+    "dev": "npm run sync && cross-env NODE_ENV=development npx astro dev",
     "format": "npm run format:json && npm run format:code && npm run format:style",
     "format:code": "npx prettier --write \"@types/**/*.{js,ts}\" \"scripts/**/*.{js,ts}\" \"src/**/*.{js,ts,tsx,astro}\" --plugin=prettier-plugin-astro",
     "format:json": "npx prettier --write '**/*.json' --cache --ignore-path .gitignore",
@@ -50,28 +50,28 @@
   },
   "dependencies": {
     "@astrojs/check": "0.9.5",
-    "@astrojs/mdx": "4.3.10",
+    "@astrojs/mdx": "4.3.11",
     "@astrojs/preact": "4.1.3",
     "@astrojs/rss": "4.0.13",
     "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/vercel": "^9.0.0",
+    "@astrojs/vercel": "^9.0.1",
     "@axe-core/playwright": "^4.11.0",
     "@glidejs/glide": "^3.7.1",
     "@nanostores/lit": "^0.2.3",
     "@nanostores/persistent": "^1.2.0",
-    "@sentry/astro": "^10.22.0",
-    "@sentry/browser": "^10.22.0",
-    "@shikijs/transformers": "^3.14.0",
-    "@supabase/supabase-js": "^2.81.0",
+    "@sentry/astro": "^10.25.0",
+    "@sentry/browser": "^10.25.0",
+    "@shikijs/transformers": "^3.15.0",
+    "@supabase/supabase-js": "^2.81.1",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/typography": "0.5.19",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.17",
     "@types/hast": "^3.0.4",
     "@types/pubsub-js": "^1.8.6",
     "@upstash/ratelimit": "^2.0.7",
     "@upstash/redis": "^1.35.6",
     "@vite-pwa/astro": "^1.1.1",
-    "astro": "5.15.7",
+    "astro": "5.15.9",
     "astro-icon": "^1.1.5",
     "astro-vtbot": "^2.1.9",
     "cross-env": "^10.1.0",
@@ -96,14 +96,14 @@
     "remark-emoji": "^5.0.2",
     "remark-linkify-regex": "^1.2.1",
     "remark-toc": "^9.0.0",
-    "resend": "^6.4.0",
-    "sharp": "^0.34.4",
+    "resend": "^6.4.2",
+    "sharp": "^0.34.5",
     "svg-sprite": "2.0.4",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "title-case": "4.3.2",
     "to-ico": "1.1.5",
     "uuid": "^13.0.0",
-    "vite": "^7.1.12",
+    "vite": "^7.2.2",
     "workbox-build": "7.3.0",
     "zod": "4.1.12"
   },
@@ -122,16 +122,16 @@
     "@types/glidejs__glide": "^3.6.6",
     "@types/js-cookie": "^3.0.6",
     "@types/jsdom": "27.0.0",
-    "@types/node": "^24.10.0",
+    "@types/node": "^24.10.1",
     "@types/nodemailer": "^7.0.3",
-    "@types/react": "^19.2.2",
+    "@types/react": "^19.2.5",
     "@types/svg-sprite": "0.0.39",
     "@types/to-ico": "1.1.3",
     "@types/uuid": "^11.0.0",
     "@types/yargs": "17.0.35",
-    "@typescript-eslint/eslint-plugin": "8.46.4",
-    "@typescript-eslint/parser": "8.46.4",
-    "@vitest/coverage-v8": "^4.0.6",
+    "@typescript-eslint/eslint-plugin": "8.47.0",
+    "@typescript-eslint/parser": "8.47.0",
+    "@vitest/coverage-v8": "^4.0.10",
     "confusing-browser-globals": "1.0.11",
     "cross-spawn": "7.0.6",
     "dedent": "^1.7.0",
@@ -147,7 +147,6 @@
     "html-element-attributes": "^3.5.0",
     "husky": "^9.1.7",
     "is-whitespace-character": "^2.0.1",
-    "jsdom": "^27.1.0",
     "md-attr-parser": "^1.3.0",
     "prettier": "3.6.2",
     "prettier-plugin-astro": "0.14.1",
@@ -162,17 +161,17 @@
     "stylelint-config-standard": "^39.0.1",
     "stylelint-declaration-block-no-ignored-properties": "2.8.0",
     "stylelint-order": "7.0.0",
-    "supabase": "^2.54.11",
+    "supabase": "^2.58.5",
     "temp-dir": "3.0.0",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.46.4",
+    "typescript-eslint": "8.47.0",
     "unist-util-inspect": "^8.1.0",
     "unist-util-visit": "^5.0.0",
-    "vitest": "4.0.9",
+    "vitest": "4.0.10",
     "vitest-axe": "0.1.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.40.1"
+    "@rollup/rollup-linux-x64-gnu": "^4.53.2"
   }
 }

package.json

@@ -1,5 +1,5 @@
+// @vitest-environment happy-dom
 import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
-import { JSDOM } from 'jsdom'
 import { readFileSync } from 'fs'
 import { resolve } from 'path'
 import { HeroLoader } from '@components/Hero/client'
@@ -37,9 +37,6 @@ describe('HeroLoader', () => {
   let timelineMock: any
 
   beforeEach(() => {
-    const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>')
-    global.document = dom.window.document
-    global.window = dom.window as unknown as Window & typeof globalThis
     vi.clearAllMocks()
     gsapMock = gsap
     timelineMock = {

src/components/Hero/__tests__/client.spec.ts

@@ -1,4 +1,3 @@
-// @vitest-environment happy-dom
 /**
  * Tests for navigation menu script using Container API pattern with happy-dom
  */
@@ -8,7 +7,6 @@ import { getNavToggleBtnElement } from '@components/Navigation/selectors'
 import { Navigation } from '@components/Navigation/client'
 import TestNavigationComponent from '@components/Navigation/__tests__/TestNavigation.astro'
 
-// Mock focus-trap to work in jsdom environment
 vi.mock('focus-trap', () => {
   return {
     createFocusTrap: () => ({

src/components/Navigation/__tests__/navigation.spec.ts

@@ -1,17 +1,14 @@
 /* eslint-disable jsdoc/escape-inline-tags */
-// @vitest-environment node
+// @vitest-environment happy-dom
 /**
  * ✅ WORKING Container API Reference Implementation
  *
  * This demonstrates the successful pattern for using Astro's Container API
  * with proper Vitest configuration using getViteConfig() from 'astro/config'.
- *
- * IMPORTANT: Container API requires @vitest-environment node due to esbuild issues in jsdom.
- * For DOM testing, use JSDOM manually within the node environment.
  */
 import { describe, it, expect, beforeEach } from 'vitest'
+import { Window } from 'happy-dom'
 import { experimental_AstroContainer as AstroContainer } from 'astro/container'
-import { JSDOM } from 'jsdom'
 import ContainerComponent from '@components/Test/container.astro'
 
 describe('Container API Reference Implementation', () => {
@@ -50,14 +47,14 @@ describe('Container API Reference Implementation', () => {
       },
     })
 
-    // Create JSDOM instance for DOM testing in node environment
-    const dom = new JSDOM(result)
-    const document = dom.window.document
+    const window = new Window()
+    const domParser = new window.DOMParser()
+    const doc = domParser.parseFromString(result, 'text/html')
 
     // Test DOM elements from actual Astro component
-    const titleElement = document.querySelector('h2.test-title')
-    const messageElement = document.querySelector('p.test-message')
-    const buttonElement = document.querySelector('button.test-button')
+    const titleElement = doc.querySelector('h2.test-title')
+    const messageElement = doc.querySelector('p.test-message')
+    const buttonElement = doc.querySelector('button.test-button')
 
     expect(titleElement).toBeTruthy()
     expect(titleElement?.textContent).toBe('Interactive Test')
@@ -69,14 +66,4 @@ describe('Container API Reference Implementation', () => {
     expect(buttonElement?.textContent?.trim()).toBe('Test Button')
     expect(buttonElement?.id).toBe('test-btn')
   })
-
-  it('should demonstrate the Container API advantage over manual HTML', () => {
-    // ✅ GOOD: Using Container API with actual Astro component
-    // - Always in sync with template changes
-    // - Includes proper CSS classes and attributes
-    // - Validates props and component logic
-    // - Includes Astro's development attributes for debugging
-
-    expect(true).toBe(true) // This test documents the approach
-  })
 })

src/components/Test/__tests__/container.spec.ts

@@ -135,6 +135,6 @@ Uses `@testing-library/preact` (not React) to match the project's Preact configu
 - `vitest` - Test runner
 - `@testing-library/preact` - Component rendering
 - `vitest-axe` - Accessibility testing
-- `jsdom` - DOM environment
+- `happy-dom` - DOM environment
 
 All dependencies were already present in the project.

src/lib/markdown/__tests__/e2e/README.md

@@ -6,11 +6,11 @@ This directory contains reusable mock implementations for testing.
 
 ### `focus-trap.ts`
 
-Mock implementation of the `focus-trap` library for testing in jsdom environments.
+Mock implementation of the `focus-trap` library for testing in DOM test environments.
 
 **Why this mock is needed:**
 
-- The real `focus-trap` library uses tabbable element detection that doesn't work properly in jsdom
+- The real `focus-trap` library uses tabbable element detection that doesn't work properly in test environments
 - Tests fail with "Your focus-trap must have at least one container with at least one tabbable node" errors
 - This mock provides simplified focus-trap behavior that works reliably in test environments
 

test/__mocks__/README.md

@@ -1,7 +1,7 @@
 /**
  * Mock implementation of focus-trap for testing
  *
- * This mock provides a simplified version of focus-trap that works in jsdom environments
+ * This mock provides a simplified version of focus-trap that works in test environments
  * where the library's tabbable element detection doesn't work properly.
  *
  * **Reusability:**