test-react-tools.js

#!/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);