MCP工具

Installation

Install dependencies and build the project before launching the MCP server or consuming the client helper.

```bash npm install -D testing-mcp

6. Can I put `connect()` in a test setup file instead of each test?

Yes, if your tests don't automatically clear the DOM between tests.

By placing connect() in an afterEach hook in your setup file, you can make testing completely non-invasive and easier for automated test writing.

Example Jest setup file(setupFilesAfterEnv)

// jest.setup.ts
import { screen, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { connect } from "testing-mcp";

const timeout = 10 * 60 * 1000;

if (process.env.TESTING_MCP) {
  jest.setTimeout(timeout);
}

afterEach(async () => {
  if (!process.env.TESTING_MCP) return;
  const state = expect.getState();
  await connect({
    filePath: state.testPath,
    context: {
      userEvent,
      screen,
      fireEvent,
    },
  });
}, timeout);

Example Vitest setup file(setupFiles):

// vitest.setup.ts
import { beforeEach, afterEach, expect } from "vitest";
import { screen, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { connect } from "testing-mcp";

const timeout = 10 * 60 * 1000;

beforeEach((context) => {
  if (!process.env.TESTING_MCP) return;
  Object.assign(context.task, {
    timeout,
  });
});

afterEach(async () => {
  if (!process.env.TESTING_MCP) return;
  const state = expect.getState();
  await connect({
    filePath: state.testPath,
    context: {
      userEvent,
      screen,
      expect,
      fireEvent,
    },
  });
}, timeout);

Important: This approach only works if your afterEach hooks don't automatically remove the DOM (e.g., you're not calling cleanup() before connect()).

Quick Start

Step 1: Install

npm install -D testing-mcp

Step 2: Configure Model Context Protocol (MCP) server (e.g., in Claude Desktop config):

{
  "testing-mcp": {
    "command": "npx",
    "args": ["-y", "testing-mcp@latest"]
  }
}

Step 3: Connect from your test:

import { render, screen, fireEvent } from "@testing-library/react";
import { connect } from "testing-mcp";

it("your test", async () => {
  render(<YourComponent />);
  await connect({
    context: { screen, fireEvent },
  });
}, 600000); // 10 minute timeout for AI interaction

Step 4: Run with MCP enabled:

Prompt:

Please run the persistent test in the `examples/react-jest` directory:

`TESTING_MCP=true RTL_SKIP_AUTO_CLEANUP=true npm test test/App.test.tsx`

Then, use the `testing-mcp` tool to write the test by following these steps:

1. Click the button displaying "count is 0".
2. Verify that the button text changes to "count is 1".
3. Write the test code to a file.

Now your AI assistant can see the page structure, execute code in the test, and help you write assertions.

Basic Usage

await connect({
  context: {
    screen, // React Testing Library queries
    fireEvent, // DOM event triggering
    userEvent, // User interaction simulation
    waitFor, // Async waiting utility
  },
});

Examples

```bash

Configure MCP Server

Add the MCP server to your AI assistant's configuration (e.g., Claude Desktop, VSCode, etc.):

{
  "testing-mcp": {
    "command": "npx",
    "args": ["-y", "testing-mcp@latest"]
  }
}

The server automatically discovers and connects to the bridge daemon, which manages WebSocket connections on dynamically assigned ports.

Manual Daemon Management (Optional)

The daemon starts automatically when needed. For manual control:

```bash

Run as MCP server (for MCP client configuration)

testing-mcp

Environment Variables

• TESTING_MCP: When set to true, enables the WebSocket bridge to the MCP server. Leave unset to disable (automatically disabled in CI environments).
• TESTING_MCP_PORT: Overrides the WebSocket port for test clients. In most cases, this is not needed as ports are auto-discovered from the daemon registry.
• TESTING_MCP_TOKEN: Authentication token to use with an explicit TESTING_MCP_PORT or connect({ port }) override.
• TESTING_MCP_DATA_DIR: Overrides the daemon registry directory. Use this to isolate multiple workspaces or exploratory testing sessions.

Context and Available APIs

Inject testing utilities so AI knows what's available:

The connect() function accepts a context object that exposes APIs to the test execution environment. This allows AI assistants to know exactly what APIs are available when generating code.

CLI Commands

testing-mcp [command] [options]

Commands:
  serve          Run as MCP adapter via stdio (default)
  bridge         Start the bridge daemon
  bridge stop    Stop the running daemon
  bridge status  Show daemon status
  bridge doctor  Diagnose daemon registry and connectivity

Options:
  --help, -h     Show this help message
  --version, -v  Show version number

Components

Key Components

FAQ