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 | Description | 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);