frontend-testingスキルでDifyフロントエンドのテストを生成する方法

フロントエンドのテストコードを一から書くのは手間がかかります。テスト対象のコンポーネントの複雑度に応じて、適切なテスト戦略を選択する必要もあります。

この記事では、DifyリポジトリのVitestとReact Testing Libraryを使ったfrontend-testingスキルで、テストを効率的に生成する方法を解説します。

このスキルは何をしてくれるのか

frontend-testingは、Difyフロントエンドコンポーネントのテスト生成をガイドするスキルです：

Vitest 4.0 + React Testing Library 16.0によるテスト生成
コンポーネント複雑度の分析（pnpm analyze-component）
AAAパターン（Arrange-Act-Assert）に基づくテスト構造
ブラックボックステスト（実装ではなく振る舞いをテスト）
インクリメンタルワークフロー（単純→複雑の順に1ファイルずつ処理）

Difyフロントエンドのテストカバレッジを向上させたい開発者に向いています。

インストール方法

前提条件

Claude Codeがインストール済みであること
Difyプロジェクトのソースコード

インストールコマンド

claude mcp add github.com/langgenius/dify/tree/main/.claude/skills/frontend-testing

使い方

テストの実行

pnpm test                          # 全テスト実行
pnpm test path/to/file.spec.tsx    # 個別ファイル
pnpm test:coverage                 # カバレッジレポート

コンポーネントの複雑度を分析

pnpm analyze-component src/components/Button.tsx
pnpm analyze-component src/components/Button.tsx --review

複雑度スコアにより戦略が変わります：0-25（そのままテスト可）、26-50（軽微なリファクタリング検討）、51以上（リファクタリング推奨）。

テスト構造

テストはAAAパターンで記述します：

describe('ComponentName', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  describe('Rendering', () => { /* 必須 */ })
  describe('Props', () => { /* 必須 */ })
  describe('User Interactions', () => { /* 条件付き */ })
  describe('Edge Cases', () => { /* 必須 */ })
})

カバレッジ目標

関数・ステートメント100%、ブランチ・行95%以上を目標とします。

知っておくべき注意点

インクリメンタルに処理する

複数ファイルを一度に処理しないでください。1ファイルのテストを書く→実行→修正→次のファイル、の順序で進めます。現在のファイルが通過するまで次に進みません。

APIのみモック、コンポーネントはリアル

統合テストを優先します。コンポーネントは実際のものをインポートし、モックするのはAPI（nock 14.0を使用）のみです。

セマンティックなテスト名

テスト名はshould <behavior> when <condition>の形式で記述します。「テストが何を検証しているか」がテスト名だけで分かるようにします。

まとめ

frontend-testingスキルを使うと、Difyフロントエンドのテストを複雑度分析に基づいたインクリメンタルワークフローで効率的に生成できます。ブラックボックステストとAAAパターンにより、保守性の高いテストコードを作成できます。