testReactComponent

Test React components by validating component code, generating or executing test cases, and analyzing results using Jest or Cypress frameworks. Simplifies frontend testing workflows on the MCP Frontend Testing Server.

Input Schema

TableJSON Schema

Name	Required	Default
`autoGenerateTest`	No
`componentCode`	Yes
`framework`	No	jest
`props`	No
`testCode`	No

Implementation Reference

src/tools/component-tester.ts:21-79 (handler)

The main handler function implementing the 'testReactComponent' tool. Determines language, generates test code if needed, sets up temporary test directory, installs deps, runs tests with jest or cypress, returns results or error, and cleans up.

async ({ componentCode, testCode, framework, props, autoGenerateTest }) => {
  try {
    // Determine language based on code
    const language = componentCode.includes('tsx') || componentCode.includes(':') ? 
      'tsx' : (componentCode.includes('jsx') ? 'jsx' : 'javascript');
    
    // Generate test if not provided
    let finalTestCode = testCode;
    if (!finalTestCode && autoGenerateTest) {
      finalTestCode = await generateTestCode(
        componentCode, 
        framework, 
        'component', 
        language
      );
    }
    
    if (!finalTestCode) {
      throw new Error('No test code provided or generated');
    }
    
    // Create temporary test environment
    const testId = crypto.randomUUID();
    const testDir = path.join(os.tmpdir(), 'mcp-test-server', testId);
    
    // Set up files for component testing
    await setupTestEnvironment(testDir, componentCode, finalTestCode, framework, 'component', props);
    
    // Install dependencies
    await executeCommand('npm install', testDir);
    
    try {
      // Run the test
      const results = await executeTest(testDir, framework, 'component');
      
      return {
        content: [{ 
          type: 'text', 
          text: JSON.stringify(results, null, 2),
        }],
      };
    } finally {
      // Clean up
      try {
        await rm(testDir, { recursive: true, force: true });
      } catch (error) {
        console.error('Error cleaning up test environment:', error);
      }
    }
  } catch (error) {
    return {
      isError: true,
      content: [{ 
        type: 'text', 
        text: `Error testing component: ${String(error)}`,
      }],
    };
  }
}

src/tools/component-tester.ts:14-20 (schema)

Input schema using Zod for validating parameters: required component code, optional test code/framework/props/auto-generate flag.

{
  componentCode: z.string(),
  testCode: z.string().optional(),
  framework: z.enum(['jest', 'cypress']).default('jest'),
  props: z.record(z.any()).optional(),
  autoGenerateTest: z.boolean().default(true)
},

src/tools/component-tester.ts:11-81 (registration)

Registration function that defines and registers the 'testReactComponent' tool on the MCP server, including schema and handler.

export function registerComponentTesterTool(server: McpServer): void {
  server.tool(
    'testReactComponent',
    {
      componentCode: z.string(),
      testCode: z.string().optional(),
      framework: z.enum(['jest', 'cypress']).default('jest'),
      props: z.record(z.any()).optional(),
      autoGenerateTest: z.boolean().default(true)
    },
    async ({ componentCode, testCode, framework, props, autoGenerateTest }) => {
      try {
        // Determine language based on code
        const language = componentCode.includes('tsx') || componentCode.includes(':') ? 
          'tsx' : (componentCode.includes('jsx') ? 'jsx' : 'javascript');
        
        // Generate test if not provided
        let finalTestCode = testCode;
        if (!finalTestCode && autoGenerateTest) {
          finalTestCode = await generateTestCode(
            componentCode, 
            framework, 
            'component', 
            language
          );
        }
        
        if (!finalTestCode) {
          throw new Error('No test code provided or generated');
        }
        
        // Create temporary test environment
        const testId = crypto.randomUUID();
        const testDir = path.join(os.tmpdir(), 'mcp-test-server', testId);
        
        // Set up files for component testing
        await setupTestEnvironment(testDir, componentCode, finalTestCode, framework, 'component', props);
        
        // Install dependencies
        await executeCommand('npm install', testDir);
        
        try {
          // Run the test
          const results = await executeTest(testDir, framework, 'component');
          
          return {
            content: [{ 
              type: 'text', 
              text: JSON.stringify(results, null, 2),
            }],
          };
        } finally {
          // Clean up
          try {
            await rm(testDir, { recursive: true, force: true });
          } catch (error) {
            console.error('Error cleaning up test environment:', error);
          }
        }
      } catch (error) {
        return {
          isError: true,
          content: [{ 
            type: 'text', 
            text: `Error testing component: ${String(error)}`,
          }],
        };
      }
    }
  );
}

src/server.ts:32-32 (registration)
Invocation of the registration function in the main server creation, adding the tool to the MCP server.
```
registerComponentTesterTool(server);
```

MCP Frontend Testing Server