feat: use reporters in the test results panel #707

GermanJablo · 2026-01-06T13:37:16Z

Problem

Prior to this pull request, the test results panel only displayed the console.logs that occurred during the test.
Clicking on the test instance in the right panel displays the expected and actual values in separate boxes, along with a series of traces. However, this format is divided into different terminals, making it difficult to copy and paste, or even to read (for both humans and AI).

Solution

With this PR, two things are displayed:

The first line shows the command to replicate in the CLI.
Then, the complete test output, as defined in the user configuration's reporters.

Before:

After:

Changes

1. `runner.ts` - Preserve ANSI colors & clean output

Remove stripVTControlCharacters(): VS Code's Test Results panel supports ANSI escape codes for colors
Delay TestRun cleanup: Prevents premature closure of the output stream while async results are still arriving
Clean output: Automatically strips Vitest's watch mode prompts ("Watching for file changes...") to keep the log focused on results
Show CLI command: Displays the equivalent command for easy reproducibility from the terminal
Skip duplicate console.logs: Avoids double-printing logs that reporters already handles

2. `rpc.ts` - Add persistent `onProcessLog` handler

Create and preserve handler: Output from worker arrives via RPC. If the handler is cleared between runs, subsequent executions have nowhere to send stdout/stderr

3. `child_process.ts` - Connect RPC to stdout callbacks

Forward onProcessLog to callbacks: The worker sends output via WebSocket/RPC, not Node's native stdout. This bridges RPC events to the stdout callback system

4. `worker/index.ts` - Enable DefaultReporter

Add 'default' reporter: Run Vitest's DefaultReporter alongside VSCodeReporter to get CLI-style output
Respect user reporters: If user has custom reporters configured (e.g., reporters: ['verbose']), those are used instead of 'default'

Minor Formatting Differences

Due to the way Vitest's detects terminal environments, there are small formatting differences compared to CLI output:

Extension (without TTY): No suite hierarchy (e.g., ❯ addition (9) not shown)
columns/separators: the number of columns available in the terminal, used for example in separators, is not calculated.

GermanJablo · 2026-01-08T12:28:45Z

packages/extension/src/runner.ts

+
+    // Show the equivalent CLI command for debugging/reproducibility
+    const fileList = files.map(f => this.relative(f)).join(' ')
+    const pattern = formatTestPattern(request.include || [])
+    let vitestCmd = 'vitest'
+    if (fileList) {
+      vitestCmd += ` ${fileList}`
+    }
+    if (pattern) {
+      vitestCmd += ` -t "${pattern}"`
+    }
+    run.appendOutput(`\x1B[36m\x1B[1m[command]\x1B[0m ${vitestCmd}\r\n\r\n`)
+


A nice to have in the first line:

Inspired by this Jest extension

This is not how the extension works, we don't create a new process for every test run. Even more, I am planning to change to the new project.createSpecification API that supports test ids, making this line useless

GermanJablo · 2026-01-08T12:29:59Z

packages/extension/src/runner.ts


 function formatTestOutput(output: string) {
-  return stripVTControlCharacters(output.replace(/(?<!\r)\n/g, '\r\n'))
+  return output.replace(/(?<!\r)\n/g, '\r\n')


Test results panel in VSCode / Cursor supports colors. No need to remove them.

Colors are not supported in inline view, at least

sheremet-va

These changes seems to break things rather than fix them. Please open an issue with the desired functionality, it needs to be discussed first

sheremet-va · 2026-01-09T20:51:16Z

packages/extension/src/runner.ts

    // run the next test when this one finished, or cancell or test runs if they were cancelled
    this.testRunDefer.promise = this.testRunDefer.promise.finally(() => {
      run.end()
+      this.testRun = undefined


sheremet-va · 2026-01-09T20:51:24Z

packages/extension/src/api/rpc.ts

      clearListeners() {
-        for (const name in handlers)
-          handlers[name as 'onCollected']?.clear()
+        // Clear all handlers except onProcessLog, which needs to persist


why do this? the handlers are not cleaned after the test run, they are cleaned when the fork is destroyed, onProcessLog needs to be cleaned

sheremet-va · 2026-01-09T20:51:40Z

packages/extension/src/api/child_process.ts

-          stdoutCallbacks.clear()
-        }
+
+        // Forward RPC process logs to the same stdout callbacks


sheremet-va · 2026-01-09T20:51:49Z

packages/extension/src/runner.ts

    })

+    // Skip individual console logs since DefaultReporter already includes them
+    // api.onConsoleLog((consoleLog) => { ... }


What is this?

sheremet-va · 2026-01-09T20:52:54Z

packages/worker/src/index.ts

-      stderr,
-      stdout,
-    },
  )


Why? This makes it so unhandled errors outside of tests are not reporter (failed global setup, for example)

sheremet-va · 2026-01-09T20:53:55Z

packages/worker/src/index.ts

              ['json', { ...jsonReporterOptions, file: meta.finalCoverageFileName }],
            ]
+
+            const rawReporters = testConfig.reporters


We intentionally don't show the report since vscode already has the UI to show everything. It is a waste of resources to duplicate it

The extension also doesn't support the same hooks order, so custom reporters might break

If the intention is to help AI, then it is better to have a custom reporter designed for that (to reduce the amount of tokens, at least) or something like this: #676

sheremet-va · 2026-01-09T21:00:43Z

packages/extension/src/runner.ts

-
-        testRun.appendOutput(
-          formatTestOutput(consoleLog.content) + (consoleLog.browser ? '\r\n' : ''),
-          location,


With this change logs are no longer attributed to tests and are not shown inline in UI

sheremet-va · 2026-01-09T21:01:25Z

packages/extension/src/runner.ts

+      // Signal that the test run is complete, but DON'T set this.testRun to undefined yet
+      // The testRun will be properly ended in the finally block of startTestRun
+      if (!collecting) {
+        this.testRunDefer?.resolve()


why replace this.endTestRun with an incomplete promise resolution?

GermanJablo · 2026-01-09T23:07:04Z

These changes seems to break things rather than fix them. Please open an issue with the desired functionality, it needs to be discussed first

Thanks for the thorough review! You're right, I rushed the PR, and there might be things I'm not addressing correctly.

I've opened this issue hoping we can agree on the "why" before moving on to the "how."

Thank you so much for your time!

GermanJablo added 4 commits January 6, 2026 11:00

don't strip colors from test output (test results panel supports them!)

c80d6b9

feat: use reporters in the test results panel

bcac665

exclude html report and prevent default duplication

6751de7

follow same config as user for printConsoleTrace

4451d63

GermanJablo commented Jan 8, 2026

View reviewed changes

sheremet-va reviewed Jan 9, 2026

View reviewed changes

GermanJablo mentioned this pull request Jan 9, 2026

Proposal: Improve Test Results Output for AI and Manual Debugging #709

Open

4 tasks

Uh oh!

feat: use reporters in the test results panel #707

Are you sure you want to change the base?

feat: use reporters in the test results panel #707

Conversation

GermanJablo commented Jan 6, 2026

Problem

Solution

Before:

After:

Changes

1. runner.ts - Preserve ANSI colors & clean output

2. rpc.ts - Add persistent onProcessLog handler

3. child_process.ts - Connect RPC to stdout callbacks

4. worker/index.ts - Enable DefaultReporter

Minor Formatting Differences

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sheremet-va left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GermanJablo commented Jan 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

1. `runner.ts` - Preserve ANSI colors & clean output

2. `rpc.ts` - Add persistent `onProcessLog` handler

3. `child_process.ts` - Connect RPC to stdout callbacks

4. `worker/index.ts` - Enable DefaultReporter

sheremet-va Jan 9, 2026 •

edited

Loading

sheremet-va Jan 9, 2026 •

edited

Loading

sheremet-va Jan 9, 2026 •

edited

Loading

sheremet-va Jan 9, 2026 •

edited

Loading