金大哥 - Frontend Testing (Jest & Cypress) MCP 详情

article

README

🚀 MCP 前端测试服务器

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

🚀 快速开始

📦 安装指南

克隆仓库：

git clone <repository-url> mcp-frontend-testing

进入项目目录：
```
cd mcp-frontend-testing
```
安装依赖项：
```
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 部署

环境要求

| 属性 | 详情 | |------|------| | NODE_ENV | 环境模式（development 或 production） | | PORT | 应用程序端口 |

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

步骤：
- 使用 AWS Elastic Beanstalk 创建新环境。
- 配置环境变量（NODE_ENV 和 PORT）。

命令：

上传代码到 S3 并使用 AWS CLI 部署：

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

Frontend Testing (Jest & Cypress)