MCP Frontend Testing Server

Implementation Reference

• src/tools/analyzer.ts:11-30 (handler)

  The async handler function that performs the core logic of the analyzeCode tool: analyzes the provided code using performCodeAnalysis and returns structured JSON analysis or an error response.

  async ({ code, language }) => {
    try {
      // Analyze code to determine what kind of tests would be appropriate
      const analysis = performCodeAnalysis(code, language);
      return {
        content: [{ 
          type: 'text', 
          text: JSON.stringify(analysis, null, 2),
        }],
      };
    } catch (error) {
      return {
        isError: true,
        content: [{ 
          type: 'text', 
          text: `Error analyzing code: ${String(error)}`,
        }],
      };
    }
  }

• src/tools/analyzer.ts:7-10 (schema)

  Zod schema defining the input parameters for the analyzeCode tool: 'code' (string) and 'language' (enum with default).

  { 
    code: z.string(),
    language: z.enum(['javascript', 'typescript', 'jsx', 'tsx']).default('javascript')
  },

• src/tools/analyzer.ts:4-32 (registration)

  The registerAnalyzerTool function that registers the 'analyzeCode' tool on the MCP server, including name, input schema, and handler.

  export function registerAnalyzerTool(server: McpServer): void {
    server.tool(
      'analyzeCode',
      { 
        code: z.string(),
        language: z.enum(['javascript', 'typescript', 'jsx', 'tsx']).default('javascript')
      },
      async ({ code, language }) => {
        try {
          // Analyze code to determine what kind of tests would be appropriate
          const analysis = performCodeAnalysis(code, language);
          return {
            content: [{ 
              type: 'text', 
              text: JSON.stringify(analysis, null, 2),
            }],
          };
        } catch (error) {
          return {
            isError: true,
            content: [{ 
              type: 'text', 
              text: `Error analyzing code: ${String(error)}`,
            }],
          };
        }
      }
    );
  }

• src/tools/analyzer.ts:34-128 (helper)

  Helper function performCodeAnalysis that statically analyzes the code to detect React components, hooks, events, async ops, and recommends test types/frameworks.

  // Helper function to analyze code
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  export function performCodeAnalysis(code: string, language: string): any {
    const analysisResult: any = {
      codeType: {},
      complexity: {},
      recommendations: {}
    };
  
    try {    
      // Determine if the code is a React component
      const isReactComponent = code.includes('import React') ||
                            code.includes('from "react"') ||
                            code.includes("from 'react'") ||
                            code.includes('extends Component') ||
                            code.includes('React.Component') ||
                            ((code.includes('export') && code.includes('return')) &&
                             (code.includes('JSX.') || code.includes('<div') || code.includes('<>')));
  
      // Check if it's a function or class
      const isClass = code.includes('class ') && code.includes('extends ');
      const isFunction = code.includes('function ') || code.includes('=>');
      
      // Check if it uses hooks
      const usesHooks = code.includes('useState') || 
                      code.includes('useEffect') || 
                      code.includes('useContext') ||
                      code.includes('useReducer') ||
                      code.includes('useCallback') ||
                      code.includes('useMemo');
      
      // Count imports to determine complexity
      const importMatches = code.match(/import .+ from .+/g);
      const imports = importMatches ? importMatches.length : 0;
      
      // Look for event handlers
      const hasEvents = code.includes('onClick') || 
                      code.includes('onChange') || 
                      code.includes('onSubmit') ||
                      code.includes('addEventListener');
      
      // Look for async operations
      const hasAsync = code.includes('async ') || 
                      code.includes('await ') || 
                      code.includes('Promise') ||
                      code.includes('.then(') ||
                      code.includes('fetch(');
      
      const recommendedTestTypes: string[] = [];
      if (isReactComponent) {
        recommendedTestTypes.push('component');
        if (hasEvents || hasAsync) {
          recommendedTestTypes.push('e2e');
        } else {
          recommendedTestTypes.push('unit');
        }
      } else {
        recommendedTestTypes.push('unit');
      }
    
      // Recommend testing frameworks
      const recommendedFrameworks: string[] = [];
      if (isReactComponent) {
        recommendedFrameworks.push('jest');
        if (hasEvents) {
          recommendedFrameworks.push('cypress');
        } else {
          recommendedFrameworks.push('jest');
        }
      } else {
        recommendedFrameworks.push('jest');
      }
  
      analysisResult.codeType = {
        isReactComponent,
        isClass,
        isFunction,
        usesHooks,
      };
      analysisResult.complexity = {
        imports,
        hasEvents,
        hasAsync
      };
      analysisResult.recommendations = {
        testTypes: recommendedTestTypes,
        frameworks: recommendedFrameworks,
        priority: hasAsync ? 'high' : 'medium'
      };
    } catch (error: any) {
      console.error(`Error during code analysis: ${error.message}`);
    }
    
    return analysisResult;
  }

• src/server.ts:29-29 (registration)

  Top-level registration of the analyzer tool during MCP server creation in createServer function.

  registerAnalyzerTool(server);