Replace Happy DOM with Vitest Browser Mode (#250)

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/src/Clock.spec.tsx

@@ -150,19 +150,32 @@ describe('Clock', () => {
   const secondMillisecondAngle = secondAngle / 1000;
 
   function getDeg(transform: string) {
-    const match = transform.match(/rotate\(([0-9.]*)deg\)/);
+    const match = transform.match(
+      /matrix\((-?[\d.]+), (-?[\d.]+), (-?[\d.]+), (-?[\d.]+), (-?[\d.]+), (-?[\d.]+)\)/,
+    );
 
     if (!match) {
       throw new Error('Could not parse transform');
     }
 
-    const deg = match[1];
+    const [_, ...rawNumbers] = match;
 
-    if (!deg) {
+    const numbers = rawNumbers.map(Number.parseFloat);
+
+    const a = numbers[0];
+    const b = numbers[1];
+
+    if (typeof a !== 'number' || typeof b !== 'number') {
       throw new Error('Could not parse transform');
     }
 
-    return Number.parseFloat(deg);
+    const radians = Math.atan2(b, a);
+    const degrees = radians * (180 / Math.PI);
+
+    // Normalize to [0, 360)
+    const normalized = ((degrees % 360) + 360) % 360;
+
+    return normalized;
   }
 
   function getAngle(hand: HTMLElement) {

packages/react-clock/src/Hand.spec.tsx

@@ -19,15 +19,15 @@ describe('Hand', () => {
 
     const hand = container.querySelector('.react-clock__hand');
 
-    expect(hand).toHaveStyle('transform: rotate(0deg)');
+    expect(hand).toHaveStyle('transform: matrix(1, 0, 0, 1, 0, 0)'); // rotate(0deg)
   });
 
   it('renders properly angled hand given angle prop', () => {
     const { container } = render(<Hand angle={15} name="minute" />);
 
     const hand = container.querySelector('.react-clock__hand');
 
-    expect(hand).toHaveStyle('transform: rotate(15deg)');
+    expect(hand).toHaveStyle('transform: matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0)'); // rotate(15deg)
   });
 
   it('renders hand with 100% length by default', () => {

packages/react-clock/src/Mark.spec.tsx

@@ -19,15 +19,15 @@ describe('Mark', () => {
 
     const mark = container.querySelector('.react-clock__mark');
 
-    expect(mark).toHaveStyle('transform: rotate(0deg)');
+    expect(mark).toHaveStyle('transform: matrix(1, 0, 0, 1, 0, 0)'); // rotate(0deg)
   });
 
   it('renders properly angled mark given angle prop', () => {
     const { container } = render(<Mark angle={15} name="minute" />);
 
     const mark = container.querySelector('.react-clock__mark');
 
-    expect(mark).toHaveStyle('transform: rotate(15deg)');
+    expect(mark).toHaveStyle('transform: matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0)'); // rotate(15deg)
   });
 
   it('renders mark with 10% length by default', () => {

packages/react-clock/src/MarkNumber.spec.tsx

@@ -17,14 +17,16 @@ describe('MarkNumber', () => {
 
     const markNumber = container.querySelector('.react-clock__mark__number');
 
-    expect(markNumber).toHaveStyle('transform: rotate(-0deg)');
+    expect(markNumber).toHaveStyle('transform: matrix(1, 0, 0, 1, 0, 0)'); // rotate(0deg)
   });
 
   it('renders properly angled mark given angle prop', () => {
     const { container } = render(<MarkNumber angle={15} name="minute" number={1} />);
 
     const markNumber = container.querySelector('.react-clock__mark__number');
 
-    expect(markNumber).toHaveStyle('transform: rotate(-15deg)');
+    expect(markNumber).toHaveStyle(
+      'transform: matrix(0.965926, -0.258819, 0.258819, 0.965926, 0, 0)',
+    ); // rotate(-15deg)
   });
 });

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,
   },