#!/usr/bin/env node
/**
* Test script for React analysis tools
*/
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
async function testReactTools() {
console.log("🧪 Testing React Analysis Tools...\n");
// Create MCP client
const transport = new StdioClientTransport({
command: "node",
args: ["dist/index.js"]
});
const client = new Client({
name: "react-test-client",
version: "1.0.0"
}, {
capabilities: {}
});
try {
await client.connect(transport);
console.log("✅ Connected to MCP server\n");
// Test 1: Analyze React Component
console.log("🔍 Test 1: Analyzing React Component...");
try {
const componentAnalysis = await client.callTool({
name: "analyze-react-component",
arguments: {
filePath: "test-react-component.tsx"
}
});
console.log("📊 Component Analysis Results:");
const analysis = JSON.parse(componentAnalysis.content[0].text);
console.log(`- Found ${analysis.components.length} components`);
console.log(`- Found ${analysis.issues.length} issues`);
console.log(`- Performance metrics: ${analysis.performance.heavyComponents.length} heavy components`);
if (analysis.components.length > 0) {
console.log("\n📋 Components found:");
analysis.components.forEach(comp => {
console.log(` • ${comp.name} (${comp.type}) - Complexity: ${comp.renderComplexity}`);
});
}
if (analysis.issues.length > 0) {
console.log("\n⚠️ Issues found:");
analysis.issues.slice(0, 3).forEach(issue => {
console.log(` • ${issue.severity.toUpperCase()}: ${issue.message}`);
});
if (analysis.issues.length > 3) {
console.log(` ... and ${analysis.issues.length - 3} more issues`);
}
}
console.log("✅ Component analysis completed\n");
} catch (error) {
console.error("❌ Component analysis failed:", error.message);
}
// Test 2: Monitor React Hooks
console.log("🪝 Test 2: Monitoring React Hooks...");
try {
const hookAnalysis = await client.callTool({
name: "monitor-react-hooks",
arguments: {
filePath: "test-react-component.tsx",
hookType: "all"
}
});
console.log("📊 Hook Analysis Results:");
const hooks = JSON.parse(hookAnalysis.content[0].text);
console.log(`- Found ${hooks.hooks.length} hook usages`);
console.log(`- Found ${hooks.violations.length} rule violations`);
console.log(`- Found ${hooks.performance.length} performance issues`);
console.log(`- Found ${hooks.dependencies.length} dependency analyses`);
if (hooks.violations.length > 0) {
console.log("\n🚨 Hook Violations:");
hooks.violations.slice(0, 3).forEach(violation => {
console.log(` • ${violation.severity.toUpperCase()}: ${violation.message}`);
});
if (hooks.violations.length > 3) {
console.log(` ... and ${hooks.violations.length - 3} more violations`);
}
}
if (hooks.performance.length > 0) {
console.log("\n⚡ Performance Issues:");
hooks.performance.slice(0, 3).forEach(perf => {
console.log(` • ${perf.severity.toUpperCase()}: ${perf.message}`);
});
}
console.log("✅ Hook analysis completed\n");
} catch (error) {
console.error("❌ Hook analysis failed:", error.message);
}
// Test 3: Get React Performance Metrics
console.log("📈 Test 3: Getting React Performance Metrics...");
try {
const performanceMetrics = await client.callTool({
name: "get-react-performance",
arguments: {
timeframe: "1h"
}
});
console.log("📊 Performance Metrics:");
const metrics = JSON.parse(performanceMetrics.content[0].text);
console.log(`- Total renders: ${metrics.renderMetrics.totalRenders}`);
console.log(`- Heavy components: ${metrics.renderMetrics.heavyComponents.length}`);
console.log(`- Unnecessary re-renders: ${metrics.unnecessaryRerenders.length}`);
console.log(`- Props drilling issues: ${metrics.propsDrilling.length}`);
console.log(`- Optimization suggestions: ${metrics.componentOptimizations.length}`);
if (metrics.componentOptimizations.length > 0) {
console.log("\n💡 Optimization Suggestions:");
metrics.componentOptimizations.slice(0, 3).forEach(suggestion => {
console.log(` • ${suggestion}`);
});
}
console.log("✅ Performance metrics retrieved\n");
} catch (error) {
console.error("❌ Performance metrics failed:", error.message);
}
// Test 4: Detect React Issues
console.log("🔍 Test 4: Detecting React Issues...");
try {
const issueDetection = await client.callTool({
name: "detect-react-issues",
arguments: {
filePath: "test-react-component.tsx",
issueType: "all"
}
});
console.log("📊 Issue Detection Results:");
const issues = JSON.parse(issueDetection.content[0].text);
console.log(`- Props drilling issues: ${issues.propsDrilling.length}`);
console.log(`- Unnecessary re-renders: ${issues.unnecessaryRerenders.length}`);
console.log(`- Hook violations: ${issues.hookViolations.length}`);
console.log(`- Performance issues: ${issues.performanceIssues.length}`);
console.log(`- Total issues: ${issues.summary.totalIssues}`);
console.log(`- Critical issues: ${issues.summary.criticalIssues}`);
if (issues.summary.suggestions.length > 0) {
console.log("\n💡 Top Suggestions:");
issues.summary.suggestions.slice(0, 5).forEach(suggestion => {
console.log(` • ${suggestion}`);
});
}
console.log("✅ Issue detection completed\n");
} catch (error) {
console.error("❌ Issue detection failed:", error.message);
}
// Test 5: Test with specific component
console.log("🎯 Test 5: Analyzing Specific Component...");
try {
const specificAnalysis = await client.callTool({
name: "analyze-react-component",
arguments: {
filePath: "test-react-component.tsx",
componentName: "UserList"
}
});
console.log("📊 Specific Component Analysis:");
const analysis = JSON.parse(specificAnalysis.content[0].text);
console.log(`- Analyzed component: UserList`);
console.log(`- Found ${analysis.components.length} matching components`);
console.log(`- Found ${analysis.issues.length} component-specific issues`);
if (analysis.components.length > 0) {
const comp = analysis.components[0];
console.log(`- Render complexity: ${comp.renderComplexity}`);
console.log(`- Props: ${comp.props.length}`);
console.log(`- Hooks: ${comp.hooks.length}`);
}
console.log("✅ Specific component analysis completed\n");
} catch (error) {
console.error("❌ Specific component analysis failed:", error.message);
}
console.log("🎉 All React analysis tests completed!");
} catch (error) {
console.error("❌ Failed to connect to MCP server:", error);
} finally {
await client.close();
}
}
// Run the tests
testReactTools().catch(console.error);
