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

@@ -109,17 +109,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-date-picker/src/DateInput.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 DateInput from './DateInput.js';
 
@@ -25,13 +25,6 @@ describe('DateInput', () => {
     className: 'react-date-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(<DateInput {...defaultProps} />);
 
@@ -310,7 +303,7 @@ describe('DateInput', () => {
     const monthInput = customInputs[0] as HTMLInputElement;
     const dayInput = customInputs[1];
 
-    await user.type(monthInput, '{arrowright}');
+    await userEvent.type(monthInput, '{arrowright}');
 
     expect(dayInput).toHaveFocus();
   });
@@ -327,7 +320,7 @@ describe('DateInput', () => {
     ) as HTMLSpanElement;
     const separatorKey = separator.textContent as string;
 
-    await user.type(monthInput, separatorKey);
+    await userEvent.type(monthInput, separatorKey);
 
     expect(dayInput).toHaveFocus();
   });
@@ -338,7 +331,7 @@ describe('DateInput', () => {
     const customInputs = container.querySelectorAll('input[data-input]');
     const yearInput = customInputs[2] as HTMLInputElement;
 
-    await user.type(yearInput, '{arrowright}');
+    await userEvent.type(yearInput, '{arrowright}');
 
     expect(yearInput).toHaveFocus();
   });
@@ -350,7 +343,7 @@ describe('DateInput', () => {
     const monthInput = customInputs[0];
     const dayInput = customInputs[1] as HTMLInputElement;
 
-    await user.type(dayInput, '{arrowleft}');
+    await userEvent.type(dayInput, '{arrowleft}');
 
     expect(monthInput).toHaveFocus();
   });
@@ -361,7 +354,7 @@ describe('DateInput', () => {
     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();
   });
@@ -373,7 +366,7 @@ describe('DateInput', () => {
     const monthInput = customInputs[0] as HTMLInputElement;
     const dayInput = customInputs[1];
 
-    await user.type(monthInput, '4');
+    await userEvent.type(monthInput, '4');
 
     expect(dayInput).toHaveFocus();
   });
@@ -385,7 +378,7 @@ describe('DateInput', () => {
     const monthInput = customInputs[0] as HTMLInputElement;
     const dayInput = customInputs[1];
 
-    await user.type(monthInput, '03');
+    await userEvent.type(monthInput, '03');
 
     expect(dayInput).toHaveFocus();
   });
@@ -433,7 +426,7 @@ describe('DateInput', () => {
     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-date-picker/src/DatePicker.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 DatePicker from './DatePicker.js';
 
@@ -407,7 +407,7 @@ describe('DatePicker', () => {
   it('closes Calendar component when clicked outside', async () => {
     const { container } = render(<DatePicker isOpen />);
 
-    userEvent.click(document.body);
+    await userEvent.click(document.body);
 
     await waitForElementToBeRemovedOrHidden(() =>
       container.querySelector('.react-date-picker__calendar'),

packages/react-date-picker/tsconfig.json

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

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