SvelteKit Remote Functionsのアプリに、分離した並列E2Eテストを入れてみた

Transcript

1. SvelteKit Remote Functionsのアプリに、 分離した並列E2Eテストを入れてみた Wong Chun Nam
2. 自己紹介 Wong Chun Nam （ウォン　チュンナム） 香港出身 ソフトウェアエンジニア （フロントエンドが多い） メイン言語：TypeScript と Swift Svelte歴：2年
3. よくある2つのアプローチ 1) レスポンスのモック付き統合テスト メリット 速い 実行は安定 デメリット モックが実装と乖離しやすい モックを管理する手間
4. よくある2つのアプローチ 2) 共有環境のフル E2E メリット 信頼度は最大 テストのコードを独立で管理 デメリット 遅い フレークが多め テストが書き込んだ状態が他のテストに影響しやすい 並列化が難しい 途中で落ちると中途半端なデータが残る リトライしても前回の副作用が残って再現性が落ちる
5. 求めていた要件 依然として E2E（ユーザー行動ベースでアサート） 最低限のモックデータ（レスポンス除く） フレーク時に簡単にリトライ可能 実バックエンド + 実 DB（本物のコードパス） 実行の速さを求めて、ローカルで動く 並列でも干渉ゼロ
6. コアアイデア ワーカーごとに Postgres コンテナ 1つ ワーカーごとにアプリ（production build）1つ テスト単位では状態だけリセット ベースライン DB スナップショットを1回取る 各テスト後にスナップショットへ復元 Playwright ワーカー単位で環境を分離
7. コアアイデア Playwright: Global SetupでアプリのDockerイメージをビルドする ↓ 各ワーカー: アプリとPostgresコンテナ起動（ローカルサーバー） → DB最初の準備 → DBスナップショット保存 ↓ Worker 0: App + Postgres ─┐ テスト#1を実行 → DBスナップショット復元 Worker 1: App + Postgres ─┼─ テスト#2を実行 → DBスナップショット復元 Worker 2: App + Postgres ─┘ テスト#3を実行 → DBスナップショット復元 ↓ ワーカーごとにローカルサーバーを停止して、コンテナを捨てる
8. コアアイデア（詳しく） 予めDockerfileを用意 1回だけアプリのDockerfileでDockerイメージをビルド（global setup） ワーカー単位フィクスチャ： Testcontainers: Docker network、アプリとPostgresのコンテナを起動し、お互い接続する schema + seedをPostgresのコンテナに入れる ベースライン snapshot をとる DB に接続したアプリコンテナへのURLを取得 テスト単位フィクスチャ： protocol ヘッダ注入（後で説明します） テスト後に snapshot 復元 必要なもの：
9. 落とし穴：protocol / origin チェック production build が HTTPS 前提で判定（または HTTP ヘッダから推論） E2E を plain HTTP で回すと、Remote Functions が origin/protocol チェックで落ちることがある 問題：
10. 回避策 Playwright 側でリクエストごとに注入： [PROTOCOL_HEADERという環境変数に指定されたヘッダ名]: http https://github.com/sveltejs/kit/issues/14352#issuecomment-3705210391 テスト用の回避策： // .env PROTOCOL_HEADER=REQUEST-PROTOCOL // beforeEach や fixture など await page.route(`${appUrl}/**`, async (route) => { const request = route.request(); await route.continue({ headers: { ...request.headers(), 'REQUEST-PROTOCOL': 'http', }, }); });
11. 回避策
12. テストが “きれい” になる 画面操作 アサート だけになる フィクスチャが整うと、テストは： e2e('handles username conflicts', async ({ page, base: { appUrl } }) => { await page.goto(`${appUrl}/users/register`); // Try to pick the same username in the seed data await page.getByRole('textbox', { name: 'Username' }).fill('user'); await page.getByRole('textbox', { name: 'Password' }).fill('123456'); await page.getByRole('button', { name: 'Register' }).click(); await expect(page.getByText('Username has been taken.')).toBeVisible(); });
13. CI（GitHub Actions） ubuntu runner で Docker build 可能 Bun + deps + Playwright ブラウザを入れる テスト実行 - uses: actions/checkout@v4 - uses: oven-sh/setup-bun@v2 - run: bun install - run: bunx playwright install --with-deps - run: bun run test
14. デモアプリ（最小構成） Home: User Count: X を表示 Register: ユーザー登録フォーム E2E 3ケース: 1. ユーザー数が表示される 2. ユーザー名重複でエラー表示 3. 登録後にユーザー数が増える
15. デモアプリ（最小構成）
16. デモアプリ（最小構成）
17. デモアプリ（最小構成）
18. デモアプリ（最小構成）
19. トレードオフ & 注意点 モックより重い（Docker + CPU） “モックデータ”がゼロになるわけではない ベースラインの DB seed（最小） は必要 ただし API レスポンスのモックは不要 Remote Functions は experimental（仕様変更に備える）
20. まとめ（Takeaway） ✅ ワーカー単位で分離 ✅ テスト単位で DB 状態を snapshot 復元 共有環境のフレークを避けつつ E2E の信頼度を得るなら：
21. ご清聴ありがとうございました 個人HP/ブログ：chunnamwong.com 英語記事：https://chunnamwong.com/blog/sveltekit-remote-functions-parallel-e2e-tests/ GitHub: @chunnamwong デモアプリ：https://github.com/chunnamwong/sveltekit-remote-functions-parallel-e2e-tests X: @chunnam_wong Bluesky: @chunnamwong.com 個人HPへ ↑