Use vitest browser mode (#167)

* chore: config file を統合する

* chore: nodejs の型定義が抜けていた

* ci: use vitest browser mode instead of jsdom

* opt in to browser mode

* chore(deps): add node types

* ci: setup browser

* ci: split browser test job

* too much escape

* fix eslint rule

* ci: cache on main

Author: sushichan044

.github/workflows/ci.yml

@@ -45,4 +45,48 @@ jobs:
         run: pnpm run typecheck
 
       - name: Run Vitest
-        run: pnpm run test
+        run: pnpm run test:node
+
+  browser-test:
+    name: Run browser tests
+    runs-on: ubuntu-24.04
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node.js and pnpm
+        uses: ./.github/workflows/composite/setup
+
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "version=$(pnpm exec playwright --version | grep -oE '[0-9]+\.[0-9]+\.[0-9]+')" >> "$GITHUB_OUTPUT"
+
+      - name: Restore Playwright Browser Cache
+        uses: actions/cache/restore@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: '${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}'
+          restore-keys: ${{ runner.os }}-playwright-
+
+      - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install --with-deps
+
+      - name: Install Playwright system dependencies
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+
+      - name: Save Playwright Browser Cache if main branch
+        if: github.ref_name == 'main'
+        id: save-pnpm-cache
+        uses: actions/cache/save@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ steps.playwright-cache.outputs.cache-primary-key }}
+
+      - name: Run test
+        run: pnpm run test:browser

app/components/input/DateRangePicker.test.tsx renamed to app/components/input/DateRangePicker.browser.test.tsx

@@ -1,8 +1,8 @@
 import { getFormProps, useForm } from "@conform-to/react";
+import { userEvent } from "@vitest/browser/context";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
-import { render, screen } from "../../../test/test-react";
-import { userEvent } from "../../../test/vitest-setup";
+import { render } from "../../../test/test-react";
 import { DateRangePicker } from "./DateRangePicker";
 
 type Form = {
@@ -22,8 +22,6 @@ type PageProps = {
 
 beforeEach(() => {
   vi.useFakeTimers({ shouldAdvanceTime: true });
-  // GitHub Actions では TZ が UTC になっているため、テスト時の TZ も UTC に設定する
-  process.env.TZ = "UTC";
 });
 
 afterEach(() => {
@@ -60,7 +58,7 @@ describe("DateRangePicker", () => {
   test("convert で指定した処理を用いて UI の値をフォームに反映できる", async () => {
     // 確実に 2025 年 1 月のカレンダーを表示するため、システム時刻を固定する
     vi.setSystemTime(new Date("2025-01-15T00:00:00Z"));
-    render(<Page defaultValue={{ start: null, end: null }} />);
+    const screen = render(<Page defaultValue={{ start: null, end: null }} />);
 
     const button = screen.getByRole("button", { name: "Date Range" });
     await userEvent.click(button);
@@ -80,7 +78,7 @@ describe("DateRangePicker", () => {
   });
 
   test("convert で指定した処理を用いてフォームの値を UI に反映できる", () => {
-    render(
+    const screen = render(
       <Page
         defaultValue={{
           start: "2025-01-09T15:00:00.000Z",

eslint.config.ts

@@ -147,24 +147,18 @@ const config = [
     },
   },
   {
-    files: ["**/*.{test,spec}.{js,jsx,ts,tsx}"],
+    files: ["**/*.browser.test.{js,jsx,ts,tsx}"],
     rules: {
       "@typescript-eslint/no-restricted-imports": [
         "error",
         {
           paths: [
             {
               allowTypeImports: true,
-              name: "@testing-library/react",
+              name: "vitest-browser-react",
+              importNames: ["render"],
               message:
-                "Please import from '~/test/test-react' instead of '@testing-library/react'.",
-            },
-            {
-              allowTypeImports: true,
-              name: "@testing-library/user-event",
-              importNames: ["default"],
-              message:
-                "Please import 'userEvent' from '~/test/test-react' instead of '@testing-library/user-event'.",
+                "Please import from '<root>/test/test-react' instead of 'vitest-browser-react'.",
             },
           ],
         },

package.json

@@ -14,9 +14,10 @@
     "typecheck": "pnpm run typegen && tsc --noEmit",
     "typegen": "react-router typegen",
     "orval": "orval",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "check": "pnpm typecheck && pnpm build && pnpm lint && pnpm format:ci  && pnpm test:run"
+    "test": "TZ=UTC vitest --run",
+    "test:node": "pnpm run test --project node",
+    "test:browser": "pnpm run test --project browser",
+    "check": "pnpm typecheck && pnpm build && pnpm lint && pnpm format:ci && pnpm test"
   },
   "dependencies": {
     "@conform-to/dom": "1.5.1",
@@ -52,14 +53,12 @@
     "@react-router/fs-routes": "7.6.0",
     "@svgr/core": "8.1.0",
     "@svgr/plugin-jsx": "8.1.0",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.3.0",
-    "@testing-library/user-event": "14.6.1",
     "@types/eslint-plugin-jsx-a11y": "6.10.0",
+    "@types/node": "22.17.0",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.4.1",
+    "@vitest/browser": "3.2.4",
     "autoprefixer": "10.4.21",
     "eslint": "9.26.0",
     "eslint-config-flat-gitignore": "2.1.0",
@@ -71,9 +70,9 @@
     "eslint-typegen": "2.1.0",
     "globals": "16.1.0",
     "jiti": "2.4.2",
-    "jsdom": "26.1.0",
     "msw": "2.8.2",
     "orval": "7.9.0",
+    "playwright": "1.54.2",
     "pnpm": "10.10.0",
     "postcss": "8.5.3",
     "postcss-preset-mantine": "1.17.0",
@@ -86,7 +85,8 @@
     "unplugin-icons": "22.1.0",
     "vite": "6.3.5",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.1.3"
+    "vitest": "3.2.4",
+    "vitest-browser-react": "1.0.1"
   },
   "engines": {
     "node": "^22.0.0"