mcp-frontend-testing

The MCP Frontend Testing Server provides tools to analyze frontend code and generate or run tests for JavaScript/TypeScript projects. It exposes utilities for code analysis, test generation for Jest and Cypress, and test execution, along with a dedicated component testing tool for React components. This enables LLM-powered workflows to inspect code, propose appropriate tests, generate concrete test code, and execute tests to obtain results, all through a unified MCP interface. Use the server to feed source code and receive analysis results, or to generate ready-to-run test suites that are tailored to your chosen framework and test type.

Within this server, you can access the following tools:

• analyzeCode: Accepts source code and (optionally) language to return an analysis indicating recommended testing strategies.
• generateTest: Generates test code based on the provided source code, framework (jest or cypress), test type (unit, component, or e2e), and optional language and description.
• runTest: Executes a given test suite by supplying source code, test code, framework, test type, and optional configuration, returning the test results.
• testReactComponent: Runs component tests specifically for React components, with options for framework, props, and automatic test generation when not provided. These tools are designed to integrate into an MCP client workflow so that an LLM can orchestrate testing tasks end-to-end for frontend projects.

Prerequisites:

• Node.js and npm installed on your machine (Node.js 14+ recommended).
• Access to the repository (clone or download).

Installation steps:

1. Clone the repository: git clone <repository-url> mcp-frontend-testing
2. Navigate into the project: cd mcp-frontend-testing
3. Install dependencies: npm install
4. Build the server (if applicable in this project): npm run build
5. Run the server (choose transport as needed):
   • For HTTP transport: npm run start:http
   • For Stdio transport: npm run start:stdio Notes:

• If you publish this package to npm under the name mcp-frontend-testing, you can also start it via npx or npm/yarn scripts provided by the package.

Tips and common considerations:

• If you encounter port conflicts, adjust the port in the start scripts or environment variables as needed.
• The tools assume the project structure aligns with typical frontend projects (JS/TS, with Jest/Cypress support). If your project uses alternative configurations, you may need to adapt the test templates or templates/docs references.
• Environment variables and configuration options for test execution (e.g., timeouts, parallelism) can be provided via the config parameter of runTest; refer to the generated docs for supported fields.
• Ensure you have network access when using npx to install the package on demand, or install locally first for faster startup.
• The templates and docs resources mentioned in the README (templates://{framework}/{type} and docs://{topic}) provide quick references for common test templates and documentation topics (jest, cypress, react-testing-library).