test: setup e2e

.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: ci
+"on":
+  - push
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - run: corepack enable
+      - run: pnpm i
+      - run: pnpm lint-check
+      - run: pnpm tsc
+      - run: pnpm build
+      - run: npx playwright install chromium
+      - run: pnpm -C examples/react-ssr test-e2e
+      - run: pnpm -C examples/react-ssr build
+      - run: pnpm -C examples/react-ssr test-e2e-preview
+      - run: pnpm -C examples/react-server test-e2e
+      - run: pnpm -C examples/react-server build
+      - run: pnpm -C examples/react-server test-e2e-preview

examples/react-server/e2e/basic.test.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("basic", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("#root")).toContainText("hydrated: true");
+  await expect(page.locator("#root")).toContainText("Count: 0");
+  await page.getByRole("button", { name: "+" }).click();
+  await expect(page.locator("#root")).toContainText("Count: 1");
+});

examples/react-server/package.json

@@ -6,6 +6,8 @@
     "dev": "vite",
     "build": "vite build --all",
     "preview": "vite preview",
+    "test-e2e": "playwright test",
+    "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
     "cf-build": "SERVER_ENTRY=/src/adapters/cloudflare-workers.ts pnpm build && bash misc/cloudflare-workers/build.sh",
     "cf-preview": "cd misc/cloudflare-workers && wrangler dev",
     "cf-release": "cd misc/cloudflare-workers && wrangler deploy"

examples/react-server/playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const port = Number(process.env["E2E_PORT"] || 6174);
+const isPreview = Boolean(process.env["E2E_PREVIEW"]);
+const command = isPreview
+  ? `pnpm preview --port ${port} --strict-port`
+  : `pnpm dev --port ${port} --strict-port`;
+
+export default defineConfig({
+  testDir: "e2e",
+  use: {
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: devices["Desktop Chrome"],
+    },
+  ],
+  webServer: {
+    command,
+    port,
+  },
+  grepInvert: isPreview ? /@dev/ : /@build/,
+  forbidOnly: !!process.env["CI"],
+  retries: process.env["CI"] ? 2 : 0,
+  reporter: "list",
+});

examples/react-server/tsconfig.json

@@ -3,7 +3,9 @@
   "include": [
     "src",
     "vite.config.ts",
-    "vite-plugin-environment-optimize-deps.ts"
+    "vite-plugin-environment-optimize-deps.ts",
+    "e2e",
+    "playwright.config.ts"
   ],
   "compilerOptions": {
     "noUncheckedIndexedAccess": false,

examples/react-ssr/e2e/basic.test.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("basic", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("#root")).toContainText("hydrated: true");
+  await expect(page.locator("#root")).toContainText("Count: 0");
+  await page.getByRole("button", { name: "+" }).click();
+  await expect(page.locator("#root")).toContainText("Count: 1");
+});

examples/react-ssr/package.json

@@ -6,6 +6,8 @@
     "dev": "vite",
     "build": "vite build --all",
     "preview": "vite preview",
+    "test-e2e": "playwright test",
+    "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
     "vc-build": "SERVER_ENTRY=/src/adapters/vercel-edge.ts pnpm build && bash misc/vercel-edge/build.sh",
     "vc-release": "vercel deploy --prebuilt misc/vercel-edge --prod"
   },

examples/react-ssr/playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const port = Number(process.env["E2E_PORT"] || 6174);
+const isPreview = Boolean(process.env["E2E_PREVIEW"]);
+const command = isPreview
+  ? `pnpm preview --port ${port} --strict-port`
+  : `pnpm dev --port ${port} --strict-port`;
+
+export default defineConfig({
+  testDir: "e2e",
+  use: {
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: devices["Desktop Chrome"],
+    },
+  ],
+  webServer: {
+    command,
+    port,
+  },
+  grepInvert: isPreview ? /@dev/ : /@build/,
+  forbidOnly: !!process.env["CI"],
+  retries: process.env["CI"] ? 2 : 0,
+  reporter: "list",
+});

examples/react-ssr/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@tsconfig/strictest/tsconfig.json",
-  "include": ["src", "vite.config.ts"],
+  "include": ["src", "vite.config.ts", "e2e", "playwright.config.ts"],
   "compilerOptions": {
     "exactOptionalPropertyTypes": false,
     "verbatimModuleSyntax": true,

package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "@hattip/adapter-node": "^0.0.44",
     "@hiogawa/utils": "1.6.4-pre.1",
+    "@playwright/test": "^1.42.1",
     "@tsconfig/strictest": "^2.0.4",
     "@types/node": "^20.11.30",
     "@vitejs/plugin-react": "^4.2.1",