Skip to content

Vitest導入とサンプルテスト基盤の整備 #110

@konokenj

Description

@konokenj

背景

webapp側にテストフレームワークが含まれておらず、ユーザーがテストを書く際の参考がない。CDK側はJest(ts-jest)でスナップショットテストが存在するが、テストランナーがワークスペース間で統一されていない。

また、現在のサンプルアプリにはテスト対象となるビジネスロジックがほぼ存在しない。Server Actionsは入力をそのままPrismaに渡すだけで、純粋関数として切り出せるロジックがない。テスト基盤を整備するだけでなく、テスト対象となる軽量なロジックもサンプルとして追加する。

Discussion #94 コメント(tmokmss):

単体テスト周りのひな型も整備されてると良い

提案

1. Vitestを全ワークスペース共通のテストランナーとして導入

各ワークスペース(apps/webapp, apps/cdk 等)に vitest.config.ts を配置し、ルートの package.json から一括実行できるようにする。

{
  "scripts": {
    "test:unit": "pnpm -r run test:unit"
  }
}

2. CDK側のJest→Vitest移行

既存のスナップショットテストをVitestに移行する。主な変更点:

  • jest.useFakeTimers()vi.useFakeTimers()
  • jest.config.jsvitest.config.ts
  • カスタムスナップショットシリアライザー(snapshot-plugin.ts): Vitestの snapshotSerializers 設定オプションでそのまま利用可能。test / serialize のインターフェースはJestと互換
  • ts-jest → 不要(VitestはビルトインでTypeScriptをサポート)
  • Jest関連の依存(jest, ts-jest, @types/jest)を削除

3. テスト対象となるサンプルロジックの追加

Todoの説明文からハッシュタグを抽出する純粋関数を追加する。スキーマ変更・ライブラリ追加は不要。

ロジック (lib/todo.ts):

  • extractTags(text: string): string[] — テキストから #tag 形式のタグを抽出し、重複を除去して返す

UI: TodoItem表示でタグ部分をハイライト表示(表示のみ、フィルタリング機能は含めない)

テスト (lib/todo.test.ts):

  • 正常系: "買い物 #work #urgent"["#work", "#urgent"]
  • 空文字・タグなし: "", "タグなし"[]
  • 重複: "#work #work"["#work"]
  • エッジケース: "#" 単体、連続ハッシュ "##tag"

検証方法

  • pnpm run test:unit でwebapp・CDK両方のテストが実行・成功すること
  • CDKスナップショットテストが移行前と同等の結果を返すこと

備考

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions