Frontend Testing (Jest & Cypress)

🚀 MCP Front - end Testing Server

This MCP server provides front - end testing tools, including:

• Code Analysis: Analyze JavaScript/TypeScript code to determine appropriate testing strategies.
• Test Generation: Generate unit tests and component tests for Jest and Cypress.
• Test Execution: Run tests using Jest and Cypress and return results.
• Component Testing: Provide tools specifically for testing React components.

🚀 Quick Start

📦 Installation

1. Clone the repository: git clone <repository-url> mcp-frontend-testing
2. Navigate to the project directory: cd mcp-frontend-testing
3. Install dependencies: npm install

Run the Server

HTTP Transport

# Build the server
npm run build

# Start the server using HTTP transport
npm run start:http

Stdio Transport

# Build the server
npm run build

# Start the server using Stdio transport
npm run start:stdio

💻 Usage Examples

Tools

• analyzeCode: Analyze the code and return the analysis results.

  • Parameters:
    • code (string, required): The source code to be analyzed.
    • language (enum, optional): The code language (javascript | typescript | jsx | tsx, default: javascript).

• generateTest: Generate test code based on the source code and framework.

  • Parameters:
    • code (string, required): The source code for which to generate tests.
    • framework (enum, required): The testing framework (jest | cypress).
    • type (enum, required): The test type (unit | component | e2e).
    • language (enum, optional): The code language (javascript | typescript | jsx | tsx, default: javascript).
    • description (string, optional): The test case description.

• runTest: Run the tests and return the results.

  • Parameters:
    • sourceCode (string, required): The source code to be tested.
    • testCode (string, required): The test code to be executed.
    • framework (enum, required): The testing framework (jest | cypress).
    • type (enum, required): The test type (unit | component | e2e).
    • config (record, optional): The test execution configuration object.

• testReactComponent: Specifically used to run component tests for React components.

  • Parameters:
    • componentCode (string, required): The React component code to be tested.
    • testCode (string, optional): The test code (default value is undefined).

📚 Documentation

Templates

• Path: src/components/templates/
  • ListTemplate: List view template.
  • CardTemplate: Card view template.

Documentation

• Documentation Location: /docs/

Icons

• Icon Location: /icons/

🔧 Technical Details

Docker Deployment

Environment Requirements

Docker Commands

# Build the Docker image
docker build -t mcp-frontend-test-server .

# Run the Docker container
docker run -p ${PORT}:80 --env NODE_ENV=${NODE_ENV} mcp-frontend-test-server

Cloud Service Deployment

AWS

1. Steps:
   • Create a new environment using AWS Elastic Beanstalk.
   • Configure environment variables (NODE_ENV and PORT).
2. Commands:
   • Upload the code to S3 and deploy using AWS CLI:

     aws elasticbeanstalk create-environment --environment-name mcp-frontend-test-env --configuration-template arn:aws:elasticbeanstalk:region:accountid:configuration-template/mypythonconfig