feat: show browser console in the terminal

packages/browser/src/client/main.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import type { VitestClient } from '@vitest/ws-client'
 import { createClient } from '@vitest/ws-client'
 // eslint-disable-next-line no-restricted-imports
@@ -48,6 +49,41 @@ async function loadConfig() {
   throw new Error('cannot load configuration after 5 retries')
 }
 
+const { Date } = globalThis
+
+const interceptLog = (client: VitestClient) => {
+  // TODO: add support for more console methods
+  const { log, info, error } = console
+  const processLog = (args: unknown[]) => {
+    // TODO: make better log, use concordance(?)
+    return args.map(String).join(' ')
+  }
+  const sendLog = (type: 'stdout' | 'stderr', args: unknown[]) => {
+    const content = processLog(args)
+    const unknownTestId = '__vitest__unknown_test__'
+    // @ts-expect-error untyped global
+    const taskId = globalThis.__vitest_worker__?.current?.id ?? unknownTestId
+    client.rpc.sendLog({
+      content,
+      time: Date.now(),
+      taskId,
+      type,
+      size: content.length,
+    })
+  }
+  const stdout = (base: (...args: unknown[]) => void) => (...args: unknown[]) => {
+    sendLog('stdout', args)
+    return base(...args)
+  }
+  console.log = stdout(log)
+  console.info = stdout(info)
+
+  console.error = (...args) => {
+    sendLog('stderr', args)
+    return error(...args)
+  }
+}
+
 ws.addEventListener('open', async () => {
   await loadConfig()
 
@@ -66,6 +102,7 @@ ws.addEventListener('open', async () => {
   const iFrame = document.getElementById('vitest-ui') as HTMLIFrameElement
   iFrame.setAttribute('src', '/__vitest__/')
 
+  interceptLog(client)
   await runTests(paths, config, client)
 })
 

packages/vitest/src/api/setup.ts

@@ -52,6 +52,9 @@ export function setup(ctx: Vitest, server?: ViteDevServer) {
         getPaths() {
           return ctx.state.getPaths()
         },
+        sendLog(log) {
+          return ctx.report('onUserConsoleLog', log)
+        },
         resolveSnapshotPath(testPath) {
           return ctx.snapshot.resolvePath(testPath)
         },

packages/vitest/src/api/types.ts

@@ -1,5 +1,5 @@
 import type { TransformResult } from 'vite'
-import type { File, ModuleGraphData, Reporter, ResolvedConfig, SnapshotResult, TaskResultPack } from '../types'
+import type { File, ModuleGraphData, Reporter, ResolvedConfig, SnapshotResult, TaskResultPack, UserConsoleLog } from '../types'
 
 export interface TransformResultWithSource extends TransformResult {
   source?: string
@@ -9,6 +9,7 @@ export interface WebSocketHandlers {
   onCollected(files?: File[]): Promise<void>
   onTaskUpdate(packs: TaskResultPack[]): void
   onDone(name: string): void
+  sendLog(log: UserConsoleLog): void
   getFiles(): File[]
   getPaths(): string[]
   getConfig(): ResolvedConfig

test/browser/test/dom.test.ts

@@ -4,5 +4,9 @@ test('render div', async () => {
   const div = document.createElement('div')
   div.textContent = 'Hello World'
   document.body.appendChild(div)
+  // TODO: test console
+  // eslint-disable-next-line no-console
+  console.log('hello world')
+  console.error('error world')
   expect(div.textContent).toBe('Hello World')
 })