LESSON 17 · 約30分

テストして、公開できる状態へ

動いたことを確かめ、使う機能に合う公開先を選びます。

コードを試す前に

基本演習はApp Router・JavaScript/JSX・Cache Components無効で進めます。11の有効化例は独立した発展実験です。01〜04は先に読んで、コードの実行は05の環境構築後に戻って試せます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

開発環境の準備を確認する →

このレッスンでわかること

重要な利用経路をテストできる
静的出力とサーバー実行の違いを理解できる

小さな確認を重ねる

計算や検証は単体テスト、部品はコンポーネントテスト、ページをまたぐ操作はE2Eテストと役割を分けます。最初のE2Eは「一覧から詳細へ進める」など重要な一本道から。正常系の次に入力ミス・404・権限不足を追加します。

本番に近い条件で確認する

開発サーバーだけで安心せず、buildと本番起動を通します。Playwrightも本番コードに対して走らせると挙動を合わせやすくなります。lint、モバイル幅、キーボード操作、環境変数、ログの情報量も確認します。

使う機能から公開方法を選ぶ

Node.jsサーバーやDockerではサーバー機能を使えます。静的exportは生成したファイルを配信できますが、リクエスト時のサーバー処理などに制約があります。Server Actionsを使う構成を、静的ファイル置き場へそのまま公開できるとは限りません。

一覧からの移動を確認するE2E

tests/navigation.spec.js

import { test, expect } from '@playwright/test'

test('ノート一覧から詳細へ進める', async ({ page }) => {
  await page.goto('http://localhost:3000/notes')
  await page.getByRole('link', { name: 'Reactの基礎', exact: true }).click()
  await expect(page).toHaveURL(/\/notes\/react$/)
  await expect(page.getByRole('heading', { level: 1 })).toHaveText('Reactの基礎')
})

Playwrightの導入が必要です。07のapp/lib/notes.js、リンク付きapp/notes/page.jsx、app/notes/[slug]/page.jsxの固定データ版3ファイルを使い、09のAPI一覧は置き換えてから実行します。Cache Componentsは基本構成の無効に戻します。これは本教材サイト自体をテストするコードではありません。

本番条件を確認する

Terminal

npm run lint
npm run build
npm run start
# 別のターミナルで
npx playwright test

lintとPlaywrightは事前に設定します。startは実行したまま、別のターミナルでテストを動かします。

TRY IT YOURSELF

公開前チェックを作る

07の固定データ版3ファイルへ戻し、Reactの基礎というリンクがあることを確認してE2Eを実行する
キーボードのみでフォームを使う
必要なサーバー機能を列挙し、公開先の対応を確認する

できたらOK：どのテストが何を保証し、何を保証しないか説明できる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。