Frontend Testing (Jest & Cypress)

🚀 MCP 前端测试服务器

MCP 前端测试服务器为前端开发提供了一系列测试工具，可对 JavaScript/TypeScript 代码进行分析、生成测试用例、执行测试，还能专门针对 React 组件进行测试，有效提升前端测试效率。

🚀 快速开始

📦 安装指南

1. 克隆仓库：

   git clone  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