Frontend Testing (Jest & Cypress)

🚀 MCP 前端測試服務器

MCP 前端測試服務器為前端開發提供了一系列測試工具，可對 JavaScript/TypeScript 代碼進行分析、生成測試用例、執行測試，還能專門針對 React 組件進行測試，有效提升前端測試效率。

🚀 快速開始

📦 安裝指南

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

✨ 主要特性

此 MCP 服務器提供的前端測試工具包括：

• 代碼分析：分析 JavaScript/TypeScript 代碼以確定適當的測試策略。
• 測試生成：為 Jest 和 Cypress 生成單元測試和組件測試。
• 測試執行：使用 Jest 和 Cypress 運行測試並返回結果。
• 組件測試：提供專門用於測試 React 組件的工具。

💻 使用示例

工具

• 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