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 @wojtekmaj/react-datetimerange-picker 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-datetimerange-picker/package.json

@@ -66,18 +66,18 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.0",
     "@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",
     "replace-in-files-cli": "^3.0.0",
     "typescript": "^5.5.2",
     "vitest": "^3.2.3",
-    "vitest-canvas-mock": "^0.2.2"
+    "vitest-browser-react": "^1.0.1"
   },
   "peerDependencies": {
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

packages/react-datetimerange-picker/src/DateTimeRangePicker.spec.tsx

@@ -1,6 +1,6 @@
+import { userEvent } from '@vitest/browser/context';
 import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
 
 import DateTimeRangePicker from './DateTimeRangePicker.js';
 
@@ -638,7 +638,7 @@ describe('DateTimeRangePicker', () => {
   it('closes Calendar component when clicked outside', async () => {
     const { container } = render(<DateTimeRangePicker isCalendarOpen />);
 
-    userEvent.click(document.body);
+    await userEvent.click(document.body);
 
     await waitForElementToBeRemovedOrHidden(() =>
       container.querySelector('.react-datetimerange-picker__calendar'),
@@ -668,7 +668,7 @@ describe('DateTimeRangePicker', () => {
   it('closes Clock component when clicked outside', async () => {
     const { container } = render(<DateTimeRangePicker isClockOpen />);
 
-    userEvent.click(document.body);
+    await userEvent.click(document.body);
 
     await waitForElementToBeRemovedOrHidden(() =>
       container.querySelector('.react-datetimerange-picker__clock'),

packages/react-datetimerange-picker/tsconfig.json

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

packages/react-datetimerange-picker/vitest.config.ts

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

packages/react-datetimerange-picker/vitest.setup.ts

@@ -1,7 +1,6 @@
 import { afterEach } from 'vitest';
 import { cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-import 'vitest-canvas-mock';
 
 afterEach(() => {
   cleanup();