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-datetime-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-datetime-picker/package.json

@@ -75,18 +75,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-datetime-picker/src/DateTimeInput.spec.tsx

@@ -1,6 +1,6 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { userEvent } from '@vitest/browser/context';
+import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
 
 import DateTimeInput from './DateTimeInput.js';
 
@@ -25,13 +25,6 @@ describe('DateTimeInput', () => {
     className: 'react-datetime-picker__inputGroup',
   };
 
-  let user: ReturnType<typeof userEvent.setup>;
-  beforeEach(() => {
-    user = userEvent.setup({
-      advanceTimers: vi.advanceTimersByTime.bind(vi),
-    });
-  });
-
   it('renders a native input and custom inputs', () => {
     const { container } = render(<DateTimeInput {...defaultProps} />);
 
@@ -496,7 +489,7 @@ describe('DateTimeInput', () => {
     const monthInput = customInputs[0] as HTMLInputElement;
     const dayInput = customInputs[1];
 
-    await user.type(monthInput, '{arrowright}');
+    await userEvent.type(monthInput, '{arrowright}');
 
     expect(dayInput).toHaveFocus();
   });
@@ -514,7 +507,7 @@ describe('DateTimeInput', () => {
       .filter((el) => el.trim());
     const separatorKey = separatorsTexts[0] as string;
 
-    await user.type(monthInput, separatorKey);
+    await userEvent.type(monthInput, separatorKey);
 
     expect(dayInput).toHaveFocus();
   });
@@ -532,7 +525,7 @@ describe('DateTimeInput', () => {
       .filter((el) => el.trim());
     const separatorKey = separatorsTexts[separatorsTexts.length - 1] as string;
 
-    await user.type(monthInput, separatorKey);
+    await userEvent.type(monthInput, separatorKey);
 
     expect(dayInput).toHaveFocus();
   });
@@ -543,7 +536,7 @@ describe('DateTimeInput', () => {
 
     const select = container.querySelector('select') as HTMLSelectElement;
 
-    await user.type(select, '{arrowright}');
+    await userEvent.type(select, '{arrowright}');
 
     expect(select).toHaveFocus();
   });
@@ -555,7 +548,7 @@ describe('DateTimeInput', () => {
     const monthInput = customInputs[0];
     const dayInput = customInputs[1] as HTMLInputElement;
 
-    await user.type(dayInput, '{arrowleft}');
+    await userEvent.type(dayInput, '{arrowleft}');
 
     expect(monthInput).toHaveFocus();
   });
@@ -566,7 +559,7 @@ describe('DateTimeInput', () => {
     const customInputs = container.querySelectorAll('input[data-input]');
     const monthInput = customInputs[0] as HTMLInputElement;
 
-    await user.type(monthInput, '{arrowleft}');
+    await userEvent.type(monthInput, '{arrowleft}');
 
     expect(monthInput).toHaveFocus();
   });
@@ -578,7 +571,7 @@ describe('DateTimeInput', () => {
     const monthInput = customInputs[0] as HTMLInputElement;
     const dayInput = customInputs[1];
 
-    await user.type(monthInput, '4');
+    await userEvent.type(monthInput, '4');
 
     expect(dayInput).toHaveFocus();
   });
@@ -590,7 +583,7 @@ describe('DateTimeInput', () => {
     const monthInput = customInputs[0] as HTMLInputElement;
     const dayInput = customInputs[1];
 
-    await user.type(monthInput, '03');
+    await userEvent.type(monthInput, '03');
 
     expect(dayInput).toHaveFocus();
   });
@@ -638,7 +631,7 @@ describe('DateTimeInput', () => {
     const customInputs = container.querySelectorAll('input[data-input]');
     const monthInput = customInputs[0] as HTMLInputElement;
 
-    await user.type(monthInput, '1');
+    await userEvent.type(monthInput, '1');
 
     expect(monthInput).toHaveFocus();
   });

packages/react-datetime-picker/src/DateTimePicker.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 DateTimePicker from './DateTimePicker.js';
 
@@ -563,7 +563,7 @@ describe('DateTimePicker', () => {
   it('closes Calendar component when clicked outside', async () => {
     const { container } = render(<DateTimePicker isCalendarOpen />);
 
-    userEvent.click(document.body);
+    await userEvent.click(document.body);
 
     await waitForElementToBeRemovedOrHidden(() =>
       container.querySelector('.react-datetime-picker__calendar'),
@@ -593,7 +593,7 @@ describe('DateTimePicker', () => {
   it('closes Clock component when clicked outside', async () => {
     const { container } = render(<DateTimePicker isClockOpen />);
 
-    userEvent.click(document.body);
+    await userEvent.click(document.body);
 
     await waitForElementToBeRemovedOrHidden(() =>
       container.querySelector('.react-datetime-picker__clock'),

packages/react-datetime-picker/tsconfig.json

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

packages/react-datetime-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-datetime-picker/vitest.setup.ts

@@ -1,14 +1,6 @@
-import { afterEach, beforeEach } from 'vitest';
+import { afterEach } from 'vitest';
 import { cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-import 'vitest-canvas-mock';
-
-// Workaround for a bug in Vitest 3 or happy-dom
-const IntlNumberFormat = Intl.NumberFormat;
-
-beforeEach(() => {
-  Intl.NumberFormat = IntlNumberFormat;
-});
 
 afterEach(() => {
   cleanup();