Frontend Test Generation & Code Review MCP Server
fe-testgen-mcp
Ein auf dem MCP-Protokoll basierender Dienst zur Generierung von Frontend-Unit-Tests, der sich auf KI-Analyse und Code-Generierung konzentriert. Die MCP-Tools werden über HTTP-Streaming bereitgestellt und können in Clients wie n8n, Cursor oder Claude integriert werden.
Kernfunktionen
Testmatrix-Analyse: Analysiert Code-Änderungen und generiert Funktionslisten sowie Testszenarien
Testcode-Generierung: Generiert vollständigen Unit-Test-Code basierend auf der Matrix
Multi-Framework-Unterstützung: Unterstützt Vitest und Jest
Abdeckung verschiedener Szenarien: Happy-Path, Edge-Case, Error-Path, State-Change
Related MCP server: Phabricator MCP Server
Schnellstart
# 安装依赖
pnpm install
# 构建
pnpm build
# 启动服务
pnpm startDer Dienst lauscht standardmäßig auf http://localhost:3000/mcp
Umgebungskonfiguration
Kopieren Sie env.example nach .env und füllen Sie die erforderlichen Konfigurationen aus:
# 必需:OpenAI API 密钥
OPENAI_API_KEY=your_api_key
# 可选:自定义模型
OPENAI_MODEL=gpt-4
# 可选:服务配置
HTTP_PORT=3000
HTTP_HOST=0.0.0.0 # 允许外部访问MCP-Tools
analyze-test-matrix
Analysiert Code-Änderungen und generiert eine Testmatrix.
Parameter:
Parameter | Typ | Erforderlich | Beschreibung |
rawDiff | string | ✅ | Text im Unified-Diff-Format |
identifier | string | Eindeutiger Bezeichner (MR ID, Commit-Hash) | |
rules | string | Inhalt von test-strategy.md | |
framework | string | Test-Framework (vitest/jest) |
Rückgabe: Funktionsliste, Testszenarien, Statistiken
generate-tests
Generiert Unit-Test-Code.
Parameter:
Parameter | Typ | Erforderlich | Beschreibung |
rawDiff | string | ✅ | Text im Unified-Diff-Format |
identifier | string | Eindeutiger Bezeichner | |
rules | string | Inhalt von test-strategy.md | |
framework | string | Test-Framework | |
scenarios | string[] | Spezifizierte Szenariotypen | |
maxTests | number | Maximale Anzahl an Tests |
Rückgabe: Array von Testfällen (enthält Dateipfad, Code, Szenariotyp)
n8n-Integration
Workflow-Beispiel
GitLab/Phabricator Webhook
│
▼
读取 diff + rules 文件
│
▼
调用 MCP generate-tests
│
▼
写入测试文件 + 创建 MR
│
▼
发送通知(企微/飞书)HTTP-Aufrufbeispiel
curl -X POST http://localhost:3000/mcp \
-H "Content-Type: application/json" \
-d '{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "generate-tests",
"arguments": {
"rawDiff": "diff --git a/src/utils.ts ...",
"framework": "vitest"
}
}
}'rules-Dateiformat
Erstellen Sie im Projekt .cursor/rules/test-strategy.md:
# 测试生成规则
## 测试框架配置
- **测试框架**:vitest
- **测试文件模式**:**/*.{test,spec}.{ts,tsx}
## Mock 策略
- 使用 vi.fn() 进行函数 mock
- HTTP 请求优先 mock fetch/axiosn8n liest diesen Dateiinhalt und übergibt ihn als rules-Parameter an das MCP.
Docker-Bereitstellung
docker build -t fe-testgen-mcp .
docker run -d -p 3000:3000 \
-e OPENAI_API_KEY=xxx \
fe-testgen-mcpHäufig gestellte Fragen
F: Wie kann die Konsistenz der Ergebnisse verbessert werden?
A: Der Dienst verwendet standardmäßig temperature=0 und einen festen seed=42, während gleichzeitig ein Antwort-Caching aktiviert ist.
F: Wie lege ich das Test-Framework fest?
A: Priorität: framework-Parameter > Analyse in rules > Standardmäßig vitest
F: Welche Node.js-Version wird benötigt?
A: Node.js 18+ (20+ empfohlen)
This server cannot be deployed
Maintenance
Related MCP Connectors
Approved test intent, reviewed Playwright automation and run evidence, inside your editor.
Code review that knows what depends on your change — before commit or on every PR.
Direct access to Cypress tests results and accessibility reports in your AI workflow.
Risk-scan a diff, flag AI-generated-code tells, find secrets. 5 of 7 tools need no account.
Related MCP Servers
- AlicenseDqualityDmaintenanceProvides tools for frontend testing including code analysis, test generation, test execution, and React component testing for Jest and Cypress frameworks.426MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to interact with Phabricator for task management and code review workflows, including viewing and commenting on tasks, managing differential revisions, and providing intelligent review analysis with code context.7MIT
- AlicenseNot gradedqualityDmaintenanceAnalyzes React component changes by performing structural analysis and generating visual diffs to identify pixel-level differences. It integrates with Figma to validate implementation compliance against design specifications and automates component reviews across git branches.MIT
- FlicenseAqualityDmaintenanceProvides AI assistants with frontend development tools including component scaffolding, bundle analysis, accessibility checks, and responsive design guidance. Enables automated generation of React components with tests and stories, bundle optimization recommendations, and WCAG compliance fixes.6-