上級
Real Worldの大海原

コンテンツ販売アプリ(拡張)

Playwright でE2Eテストを学びながら、既存のアプリに対しテストを実装します。

コンテンツ販売アプリ(拡張)

概要

このプロジェクトでは、構築済みのアプリに対して、Playwright を用いた E2E テストを追加します。

既存のコードベースに対してテストを書くことで、より実務的な流れを体験します。

学習目標

Next.js/App Router における、フロントエンド E2E テストを学びます。

テスト対象となる「コンテンツ販売アプリ」は、記事や電子書籍を、有料/無料で販売・閲覧できるアプリです。

ログインや、コンテンツの購入(決済)などの機能があるため、
シンプルな UI/ページ遷移のテストから、認証/決済フロー/ルート保護に関する E2E テストを確認します。

推奨技術

E2E テストでは、Playwright の使用をお勧めします

テスト対象となる「コンテンツ販売アプリ」の技術スタック:

  • Auth.js v5 による認証(GitHub ソーシャルログイン)
  • Stripe によるオンライン決済
  • GitHub API によるコンテンツ取得
  • Next.js 15 App Router
  • TypeScript
  • Tailwind CSS
  • shadcn/ui

🎯 お題

  • 全ての「必須テストケース」を、テストコードとして記述し、自動テストを行なってください
  • 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。

必須テストケース

  • 基本的なナビゲーションとレンダリング
    1. トップページが正しくレンダリングされることを確認
    2. 特集コンテンツが正しく表示されることを確認
    3. ナビゲーションバーが全ページで正しく表示されることを確認
    4. 記事の一覧が正しく表示されることを確認
    5. 本の一覧が正しく表示されることを確認
  • 認証機能
    1. ログインボタンのクリックで、GitHub 認証画面に遷移することを確認
    2. ログイン時に、GitHub のアバターが表示される
    3. アバターをクリックするとドロップダウンが開き、ログアウトボタンからログアウトできる
    4. 認証状態が保持されることを確認(ページリロード後も)
  • 有料コンテンツの購入フロー
    1. 未ログイン状態に購入ボタンをクリックしたら、ログインページへリダイレクトされる
    2. ログイン状態で有料コンテンツの購入ボタンをクリックしたら、Stripe チェックアウトページへ遷移する
    3. Stripe のテスト用クレジットカード情報を入力し、決済を完了できる
    4. 購入済みコンテンツの購入ボタンをクリックしたら、コンテンツ詳細ページにリダイレクトされる(決済ページには遷移しない)
  • アクセス制御
    1. 購入済みの有料コンテンツへ、アクセスできることを確認
    2. 未購入の有料記事へのアクセス試行で、記事一覧にリダイレクトされることを確認
    3. 未購入の有料本の章へのアクセス試行で、本の詳細にリダイレクトされることを確認
    4. 未ログイン状態でも、無料のコンテンツには直接アクセスできる
  • 本のナビゲーション
    1. 本の詳細ページから、各章へのリンクが正常に動作することを確認
    2. 章ページの前後ナビゲーションが、正しく機能することを確認
    3. 章ページのサイドバー目次が、各章へのリンクが正常に動作することを確認

追加情報

「コンテンツ販売アプリ」のコードは、最初にこちらからクローン(複製)できます!

また、今回のアプリで使用可能な、テスト用のダミーデータ(リポジトリ)を使用できます:

「コンテンツ販売アプリ」のセットアップ

ソースコードをクローンしたら、
外部サービスと連携するために、環境変数を設定してください!

# Auth.js
AUTH_SECRET=    # `npx auth secret` で自動的に追加されます
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

# 開発環境
NEXT_PUBLIC_BASE_URL=http://localhost:3000

問題なく、ローカルでサーバーが立ち上げることを確認できたら、セットアップは完了です!

チャレンジリソース

チャレンジ情報

トピックE2Eテスト
難易度上級
学習パスReal Worldの大海原

技術タグ

authjs
e2e-tests
nextjs
playwright
stripe
supabase

解説資料を見る

React開発の学習に役立つ記事や技術書をチェックしよう

全てのプロジェクトの解説教材をアンロック

全てのReactプロジェクトの解説資料、毎週のライブセッション、プライベートDiscordコミュニティへ参加してください!

Pro: メンバーシップを見る