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

@@ -117,17 +117,17 @@
     "@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",
     "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-time-picker/src/TimeInput.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 TimeInput from './TimeInput.js';
 
@@ -25,13 +25,6 @@ describe('TimeInput', () => {
     className: 'react-time-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(<TimeInput {...defaultProps} />);
 
@@ -316,7 +309,7 @@ describe('TimeInput', () => {
     const hourInput = customInputs[0] as HTMLInputElement;
     const minuteInput = customInputs[1];
 
-    await user.type(hourInput, '{arrowright}');
+    await userEvent.type(hourInput, '{arrowright}');
 
     expect(minuteInput).toHaveFocus();
   });
@@ -333,7 +326,7 @@ describe('TimeInput', () => {
     ) as HTMLSpanElement;
     const separatorKey = separator.textContent as string;
 
-    await user.type(hourInput, separatorKey);
+    await userEvent.type(hourInput, separatorKey);
 
     expect(minuteInput).toHaveFocus();
   });
@@ -344,7 +337,7 @@ describe('TimeInput', () => {
 
     const select = container.querySelector('select') as HTMLSelectElement;
 
-    await user.type(select, '{arrowright}');
+    await userEvent.type(select, '{arrowright}');
 
     expect(select).toHaveFocus();
   });
@@ -356,7 +349,7 @@ describe('TimeInput', () => {
     const hourInput = customInputs[0];
     const minuteInput = customInputs[1] as HTMLInputElement;
 
-    await user.type(minuteInput, '{arrowleft}');
+    await userEvent.type(minuteInput, '{arrowleft}');
 
     expect(hourInput).toHaveFocus();
   });
@@ -367,7 +360,7 @@ describe('TimeInput', () => {
     const customInputs = container.querySelectorAll('input[data-input]');
     const hourInput = customInputs[0] as HTMLInputElement;
 
-    await user.type(hourInput, '{arrowleft}');
+    await userEvent.type(hourInput, '{arrowleft}');
 
     expect(hourInput).toHaveFocus();
   });
@@ -379,7 +372,7 @@ describe('TimeInput', () => {
     const hourInput = customInputs[0] as HTMLInputElement;
     const minuteInput = customInputs[1];
 
-    await user.type(hourInput, '4');
+    await userEvent.type(hourInput, '4');
 
     expect(minuteInput).toHaveFocus();
   });
@@ -391,7 +384,7 @@ describe('TimeInput', () => {
     const hourInput = customInputs[0] as HTMLInputElement;
     const minuteInput = customInputs[1];
 
-    await user.type(hourInput, '03');
+    await userEvent.type(hourInput, '03');
 
     expect(minuteInput).toHaveFocus();
   });
@@ -439,7 +432,7 @@ describe('TimeInput', () => {
     const customInputs = container.querySelectorAll('input[data-input]');
     const hourInput = customInputs[0] as HTMLInputElement;
 
-    await user.type(hourInput, '1');
+    await userEvent.type(hourInput, '1');
 
     expect(hourInput).toHaveFocus();
   });

packages/react-time-picker/src/TimePicker.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 TimePicker from './TimePicker.js';
 
@@ -410,19 +410,19 @@ describe('TimePicker', () => {
   it('closes Clock component when clicked outside', async () => {
     const { container } = render(<TimePicker isOpen />);
 
-    userEvent.click(document.body);
+    await userEvent.click(document.body);
 
     await waitForElementToBeRemovedOrHidden(() =>
       container.querySelector('.react-time-picker__clock'),
     );
   });
 
-  it('does not close Clock clicked outside with shouldCloseClock function returning false', () => {
+  it('does not close Clock clicked outside with shouldCloseClock function returning false', async () => {
     const shouldCloseClock = () => false;
 
     const { container } = render(<TimePicker isOpen shouldCloseClock={shouldCloseClock} />);
 
-    userEvent.click(document.body);
+    await userEvent.click(document.body);
 
     const clock = container.querySelector('.react-clock');
 

packages/react-time-picker/tsconfig.json

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

packages/react-time-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-time-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();