Frontend Testing (Jest & Cypress)

🚀 MCP フロントエンドテストサーバー

このMCPサーバーは、フロントエンドのテストツールを提供します。具体的には、コード分析、テスト生成、テスト実行、およびコンポーネントテストなどの機能を備えています。

🚀 クイックスタート

📦 インストール

1. リポジトリをクローンする: git clone <repository-url> mcp-frontend-testing
2. プロジェクトディレクトリに移動する: cd mcp-frontend-testing
3. 依存関係をインストールする: npm install

サーバーを起動する

HTTP伝送

# サーバーをビルドする
npm run build

# HTTP伝送でサーバーを起動する
npm run start:http

Stdio伝送

# サーバーをビルドする
npm run build

# Stdio伝送でサーバーを起動する
npm run start:stdio

✨ 主な機能

ツール

• analyzeCode：コードを分析し、分析結果を返します。

  • パラメータ:
    • code (文字列、必須)：分析対象のソースコード。
    • language (列挙型、オプション)：コードの言語（javascript | typescript | jsx | tsx、デフォルト：javascript）。

• generateTest：ソースコードとフレームワークに基づいてテストコードを生成します。

  • パラメータ:
    • code (文字列、必須)：テストを生成する対象のソースコード。
    • framework (列挙型、必須)：テストフレームワーク（jest | cypress）。
    • type (列挙型、必須)：テストのタイプ（unit | component | e2e）。
    • language (列挙型、オプション)：コードの言語（javascript | typescript | jsx | tsx、デフォルト：javascript）。
    • description (文字列、オプション)：テストケースの説明。

• runTest：テストを実行し、結果を返します。

  • パラメータ:
    • sourceCode (文字列、必須)：テスト対象のソースコード。
    • testCode (文字列、必須)：実行するテストコード。
    • framework (列挙型、必須)：テストフレームワーク（jest | cypress）。
    • type (列挙型、必須)：テストのタイプ（unit | component | e2e）。
    • config (レコード、オプション)：テスト実行の設定オブジェクト。

• testReactComponent：Reactコンポーネントのコンポーネントテストを実行するための専用ツールです。

  • パラメータ:
    • componentCode (文字列、必須)：テスト対象のReactコンポーネントのコード。
    • testCode (文字列、オプション)：テストコード（デフォルト値はundefined）。

📚 ドキュメント

テンプレート

• パス: src/components/templates/
  • ListTemplate：リストビューのテンプレート。
  • CardTemplate：カードビューのテンプレート。

ドキュメント

• ドキュメントの位置: /docs/

アイコン

• アイコンの位置: /icons/

🔧 技術詳細

Dockerデプロイ

環境要件

Dockerコマンド

# Dockerイメージをビルドする
docker build -t mcp-frontend-test-server .

# Dockerコンテナを実行する
docker run -p ${PORT}:80 --env NODE_ENV=${NODE_ENV} mcp-frontend-test-server

クラウドサービスデプロイ

AWS

1. 手順:

   • AWS Elastic Beanstalkを使用して新しい環境を作成します。
   • 環境変数（NODE_ENV と PORT）を設定します。

2. コマンド:

   • コードをS3にアップロードし、AWS CLIを使用してデプロイします。

     aws elasticbeanstalk create-environment --environment-name mcp-frontend-test-env --configuration-template arn:aws:elasticbeanstalk:region:accountid:configuration-template/mypythonconfig