add e2e test

Author: yusukebe

examples/node/.gitignore

@@ -1,5 +1,10 @@
 node_modules
 
+test-results
+
 /.cache
 /build
 .env
+.dev.vars
+
+.wrangler

examples/node/e2e.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test'
+
+test('Should return 200 response - /', async ({ page }) => {
+  const response = await page.goto('/')
+  expect(response?.status()).toBe(200)
+
+  const headers = response?.headers() ?? {}
+  expect(headers['x-powered-by']).toBe('Remix and Hono')
+
+  const contentH1 = await page.textContent('h1')
+  expect(contentH1).toBe('Remix and Hono')
+
+  const contentH2 = await page.textContent('h2')
+  expect(contentH2).toMatch(/URL is http:\/\/localhost:\d+/)
+
+  const contentH3 = await page.textContent('h3')
+  expect(contentH3).toBe('Extra is stuff')
+})
+
+test('Should return 200 response - /api', async ({ page }) => {
+  const response = await page.goto('/api')
+  expect(response?.status()).toBe(200)
+  expect(await response?.json()).toEqual({ message: 'Hello' })
+})

examples/node/package.json

@@ -8,6 +8,8 @@
     "dev": "remix vite:dev",
     "start": "remix-serve ./build/server/index.js",
     "start-with-adapter": "tsx main.ts",
+    "test:e2e:vite": "playwright test -c playwright-vite.config.ts e2e.test.ts",
+    "test:e2e:node": "npm run build && playwright test -c playwright-node.config.ts e2e.test.ts",
     "typecheck": "tsc"
   },
   "dependencies": {
@@ -21,10 +23,12 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.48.2",
     "@remix-run/dev": "^2.14.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "autoprefixer": "^10.4.19",
+    "playwright": "^1.47.0",
     "tsx": "^4.19.2",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",

examples/node/playwright-node.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const port = 3010
+
+export default defineConfig({
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  use: {
+    baseURL: `http://localhost:${port.toString()}`,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 5000,
+      retries: 2,
+    },
+  ],
+  webServer: {
+    command: 'npm exec tsx ./main.ts',
+    port,
+    reuseExistingServer: !process.env.CI,
+  },
+})

examples/node/playwright-vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const port = 6173
+
+export default defineConfig({
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  use: {
+    baseURL: `http://localhost:${port.toString()}`,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 5000,
+      retries: 2,
+    },
+  ],
+  webServer: {
+    command: `npm exec vite -- --port ${port.toString()} -c ./vite.config.ts`,
+    port,
+    reuseExistingServer: !process.env.CI,
+  },
+})

examples/node/vite.config.ts

@@ -1,6 +1,8 @@
 import { vitePlugin as remix } from '@remix-run/dev'
+import serverAdapter from 'hono-remix-adapter/vite'
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { getLoadContext } from './load-context'
 
 declare module '@remix-run/node' {
   interface Future {
@@ -19,6 +21,10 @@ export default defineConfig({
         v3_lazyRouteDiscovery: true,
       },
     }),
+    serverAdapter({
+      getLoadContext,
+      entry: './server/index.ts',
+    }),
     tsconfigPaths(),
   ],
 })

package-lock.json

@@ -8,6 +8,7 @@
     "test:e2e:vite": "npm run test:e2e:vite -w example-cloudflare-pages",
     "test:e2e:cloudflare-pages": "npm run test:e2e:pages -w example-cloudflare-pages",
     "test:e2e:cloudflare-workers": "npm run test:e2e:workers -w example-cloudflare-workers",
+    "test:e2e:node": "npm run test:e2e:node -w example-node",
     "build": "tsup",
     "watch": "tsup --watch",
     "lint": "eslint src examples/cloudflare-pages/app examples/cloudflare-pages/server examples/cloudflare-workers/app examples/cloudflare-workers/server",