MCP Frontend Testing Server

Implementation Reference

• src/tools/generator.ts:15-33 (handler)

  Handler function for the 'generateTest' tool. It calls the generateTestCode helper with provided parameters and returns the generated test code in MCP format, or an error if generation fails.

  async ({ code, framework, type, language, description }) => {
    try {
      const testCode = generateTestCode(code, framework, type, language, description);
      return {
        content: [{ 
          type: 'text', 
          text: testCode,
        }],
      };
    } catch (error) {
      return {
        isError: true,
        content: [{ 
          type: 'text', 
          text: `Error generating test: ${String(error)}`,
        }],
      };
    }
  }

• src/tools/generator.ts:8-14 (schema)

  Input schema for the 'generateTest' tool using Zod, validating code snippet, testing framework, test type, language, and optional description.

  {
    code: z.string(),
    framework: z.enum(['jest', 'cypress']),
    type: z.enum(['unit', 'component', 'e2e']),
    language: z.enum(['javascript', 'typescript', 'jsx', 'tsx']).default('javascript'),
    description: z.string().optional()
  },

• src/tools/generator.ts:6-34 (registration)

  The server.tool call that registers the 'generateTest' tool, including its schema and handler implementation.

  server.tool(
    'generateTest',
    {
      code: z.string(),
      framework: z.enum(['jest', 'cypress']),
      type: z.enum(['unit', 'component', 'e2e']),
      language: z.enum(['javascript', 'typescript', 'jsx', 'tsx']).default('javascript'),
      description: z.string().optional()
    },
    async ({ code, framework, type, language, description }) => {
      try {
        const testCode = generateTestCode(code, framework, type, language, description);
        return {
          content: [{ 
            type: 'text', 
            text: testCode,
          }],
        };
      } catch (error) {
        return {
          isError: true,
          content: [{ 
            type: 'text', 
            text: `Error generating test: ${String(error)}`,
          }],
        };
      }
    }
  );

• src/tools/generator.ts:39-182 (helper)

  Primary helper function that implements the test generation logic. Analyzes source code, extracts name, generates imports and test suites tailored to framework (Jest/Cypress) and type (unit/component/e2e), incorporating analysis results.

  export function generateTestCode(
    sourceCode: string, 
    framework: string,
    testType: string,
    language: string,
    description?: string
  ): string {
    // Analyze the code to better understand its structure
    const analysis = performCodeAnalysis(sourceCode, language);
    
    // Extract component or function name
    const nameMatch = sourceCode.match(/(?:function|class|const)\s+(\w+)/);
    const name = nameMatch ? nameMatch[1] : 'Component';
    
    // Generate appropriate import statements based on framework and test type
    let imports = '';
    let testCode = '';
    
    if (framework === 'jest') {
      if (testType === 'unit') {
        imports = `// Import the module to test\n${language.includes('typescript') ? `import { ${name} } from './${name}';` : `const ${name} = require('./${name}');`}`;
        testCode = `describe('${name}', () => {
    test('${description || 'should work correctly'}', () => {
      // Arrange
      ${(analysis as any)?.codeType?.isFunction ? `
      // Example test input
      const input = 'test';
      
      // Act
      const result = ${name}(input);
      
      // Assert
      expect(result).toBeDefined();` : `
      // Setup any required state
      
      // Act - perform the action
      
      // Assert - check the result
      expect(true).toBe(true);`}
    });
  ${(analysis as any)?.complexity?.hasAsync ? `
    test('handles async operations', async () => {
      // Arrange
      
      // Act
      const result = await ${name}();
      
      // Assert
      expect(result).toBeDefined();
    });` : ''}
  });`;
      } else if (testType === 'component') {
        imports = `import { render, screen${(analysis as any)?.complexity?.hasEvents ? ', fireEvent' : ''} } from '@testing-library/react';\n${(analysis as any)?.complexity?.hasEvents ? `import userEvent from '@testing-library/user-event';` : ''}\n${language.includes('typescript') ? `import { ${name} } from './${name}';` : `import  { default as ${name} } from './${name}';`}`;
        testCode = `describe('${name}', () => {
    test('renders correctly', () => {
      // Arrange
      render(<${name} />);
      
      // Assert
      expect(screen.getByText(/content/i)).toBeInTheDocument();
    });
  ${(analysis as any).complexity?.hasEvents ? `
    test('handles user interaction', async () => {
      // Arrange
      render(<${name} />);
      
      // Act
      await userEvent.click(screen.getByRole('button'));
      
      // Assert
      expect(screen.getByText(/result/i)).toBeInTheDocument();
    });` : ''}
  ${(analysis as any)?.complexity?.hasAsync ? `
    test('loads data asynchronously', async () => {
      // Arrange
      render(<${name} />);
      
      // Act - wait for async operation
      await screen.findByText(/loaded/i);
      
      // Assert
      expect(screen.getByText(/loaded/i)).toBeInTheDocument();
    });` : ''}
  });`;
      }
    } else if (framework === 'cypress') {
      if (testType === 'component') {
        imports = `${language.includes('typescript') ? `import { ${name} } from './${name}';` : `import  Component from './Component';`}`;
        testCode = `describe('${name}', () => {
    it('renders correctly', () => {
      // Arrange
      cy.mount(<${name} />);
      
      // Assert
      cy.contains(/content/i).should('be.visible');
    });
  ${(analysis as any)?.complexity?.hasEvents ? `
    it('handles user interaction', () => {
      // Arrange
      cy.mount(<${name} />);
      
      // Act
      cy.get('button').click();
      
      // Assert
      cy.contains(/result/i).should('be.visible');
    });` : ''}
  ${(analysis as any)?.complexity?.hasAsync ? `
    it('loads data asynchronously', () => {
      // Arrange
      cy.mount(<${name} />);
      
      // Assert - wait for async operation
      cy.contains(/loaded/i, { timeout: 10000 }).should('be.visible');
    });` : ''}
  });`;
      } else if (testType === 'e2e') {
        imports = '// No imports needed for Cypress E2E tests';
        testCode = `describe('${name} E2E Test', () => {
    beforeEach(() => {
      // Visit the page containing the component
      cy.visit('/');
    });
  
    it('${description || 'works correctly'}', () => {
      // Assert the component is rendered
      cy.contains(/content/i).should('be.visible');
  ${(analysis as any)?.complexity?.hasEvents ? `
      // Act - interact with the component
      cy.get('button').click();
      
      // Assert the interaction worked
      cy.contains(/result/i).should('be.visible');` : ''}
  ${(analysis as any)?.complexity?.hasAsync ? `
      // Assert async data loads correctly
      cy.contains(/loaded/i, { timeout: 10000 }).should('be.visible');` : ''}
    });
  });`;
      }
    }
    
    // Combine imports and test code
    return `${imports}\n${testCode}`;
  }

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

  Supporting helper function called by generateTestCode to statically analyze the source code, detecting React components, functions, hooks, events, async operations, and providing test recommendations.

  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;
  }