Replace Happy DOM with Vitest Browser Mode

Author: wojtekmaj

.github/workflows/ci.yml

@@ -52,6 +52,8 @@ jobs:
 
       - name: Install dependencies
         run: yarn --immutable
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: true
 
       - name: Build package
         run: yarn build
@@ -91,6 +93,15 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-${{ env.cache-name }}
 
+      - name: Cache ~/.cache/ms-playwright
+        id: playwright-cache
+        uses: actions/cache@v4
+        env:
+          cache-name: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
@@ -102,5 +113,9 @@ jobs:
       - name: Install dependencies
         run: yarn --immutable
 
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: yarn workspace react-clock playwright install chromium-headless-shell
+
       - name: Run tests
         run: yarn unit

.gitignore

@@ -18,6 +18,7 @@
 !**/.yarn/versions
 
 # Project-generated directories and files
+__screenshots__
 coverage
 dist
 node_modules

.yarnrc.yml

@@ -1,3 +1,5 @@
+enableScripts: false
+
 logFilters:
   - code: YN0076
     level: discard

packages/react-clock/package.json

@@ -57,12 +57,14 @@
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
+    "@vitest/browser": "^3.2.3",
     "cpy-cli": "^5.0.0",
-    "happy-dom": "^15.10.2",
+    "playwright": "^1.51.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.5.2",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.3",
+    "vitest-browser-react": "^1.0.1"
   },
   "peerDependencies": {
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

packages/react-clock/tsconfig.json

@@ -13,6 +13,7 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "es2018",
+    "types": ["@vitest/browser/matchers"],
     "verbatimModuleSyntax": true
   },
   "exclude": ["dist"]

packages/react-clock/vitest.config.ts

@@ -2,7 +2,12 @@ import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   test: {
-    environment: 'happy-dom',
+    browser: {
+      enabled: true,
+      headless: true,
+      instances: [{ browser: 'chromium' }],
+      provider: 'playwright',
+    },
     setupFiles: 'vitest.setup.ts',
     watch: false,
   },