fix(browser): string formatting bug when including placeholders in console.log (fix #9030) (#9131)

Co-authored-by: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>

Author: michael-debs

packages/browser/src/client/tester/logger.ts

@@ -1,4 +1,4 @@
-import { format, stringify } from 'vitest/internal/browser'
+import { browserFormat } from 'vitest/internal/browser'
 import { getConfig } from '../utils'
 import { rpc } from './rpc'
 import { getBrowserRunner } from './runner'
@@ -30,7 +30,7 @@ export function setupConsoleLogSpy(): void {
 
   console.dir = (item, options) => {
     dir(item, options)
-    sendLog('stdout', formatInput(item))
+    sendLog('stdout', browserFormat(item))
   }
 
   console.dirxml = (...args) => {
@@ -113,18 +113,8 @@ function stderr(base: (...args: unknown[]) => void) {
   }
 }
 
-function formatInput(input: unknown) {
-  if (typeof input === 'object') {
-    return stringify(input, undefined, {
-      printBasicPrototype: false,
-      escapeString: false,
-    })
-  }
-  return format(input)
-}
-
 function processLog(args: unknown[]) {
-  return args.map(formatInput).join(' ')
+  return browserFormat(...args)
 }
 
 function sendLog(

packages/utils/src/display.ts

@@ -80,11 +80,25 @@ export function stringify(
 
 export const formatRegExp: RegExp = /%[sdjifoOc%]/g
 
-export function format(...args: unknown[]): string {
+interface FormatOptions {
+  prettifyObject?: boolean
+}
+
+function baseFormat(args: unknown[], options: FormatOptions = {}): string {
+  const formatArg = (item: unknown, inspecOptions?: LoupeOptions) => {
+    if (options.prettifyObject) {
+      return stringify(item, undefined, {
+        printBasicPrototype: false,
+        escapeString: false,
+      })
+    }
+    return inspect(item, inspecOptions)
+  }
+
   if (typeof args[0] !== 'string') {
     const objects = []
     for (let i = 0; i < args.length; i++) {
-      objects.push(inspect(args[i], { depth: 0, colors: false }))
+      objects.push(formatArg(args[i], { depth: 0, colors: false }))
     }
     return objects.join(' ')
   }
@@ -112,7 +126,7 @@ export function format(...args: unknown[]): string {
           if (typeof value.toString === 'function' && value.toString !== Object.prototype.toString) {
             return value.toString()
           }
-          return inspect(value, { depth: 0, colors: false })
+          return formatArg(value, { depth: 0, colors: false })
         }
         return String(value)
       }
@@ -133,9 +147,9 @@ export function format(...args: unknown[]): string {
       case '%f':
         return Number.parseFloat(String(args[i++])).toString()
       case '%o':
-        return inspect(args[i++], { showHidden: true, showProxy: true })
+        return formatArg(args[i++], { showHidden: true, showProxy: true })
       case '%O':
-        return inspect(args[i++])
+        return formatArg(args[i++])
       case '%c': {
         i++
         return ''
@@ -168,12 +182,20 @@ export function format(...args: unknown[]): string {
       str += ` ${x}`
     }
     else {
-      str += ` ${inspect(x)}`
+      str += ` ${formatArg(x)}`
     }
   }
   return str
 }
 
+export function format(...args: unknown[]): string {
+  return baseFormat(args)
+}
+
+export function browserFormat(...args: unknown[]): string {
+  return baseFormat(args, { prettifyObject: true })
+}
+
 export function inspect(obj: unknown, options: LoupeOptions = {}): string {
   if (options.truncate === 0) {
     options.truncate = Number.POSITIVE_INFINITY

packages/vitest/src/public/browser.ts

@@ -12,6 +12,7 @@ export { collectTests, startTests } from '@vitest/runner'
 export * as SpyModule from '@vitest/spy'
 export type { LoupeOptions, ParsedStack, StringifyOptions } from '@vitest/utils'
 export {
+  browserFormat,
   format,
   inspect,
   stringify,

test/browser/fixtures/print-logs/test/logs.test.ts

@@ -68,3 +68,8 @@ test('console.time', async () => {
   await new Promise(r => setTimeout(r, 500))
   console.timeEnd('[console-time-fake]')
 })
+
+test('log with placeholders', () => {
+  console.log('hello from %s', "one")
+  console.log('hello from %s', "two", { hello: 'object' })
+})

test/browser/specs/runner.test.ts

@@ -128,6 +128,10 @@ describe('console logging tests', async () => {
     expect(stdout).toMatch(/time: [\d.]+ ms/)
     expect(stdout).toMatch(/\[console-time-fake\]: [\d.]+ ms/)
     expect(stdout).not.toContain('[console-time-fake]: 0 ms')
+    expect(stdout).toContain('hello from one')
+    expect(stdout).toContain(`hello from two {
+  "hello": "object",
+}`)
   })
 
   test('logs are redirected to stderr', () => {

test/core/test/exports.test.ts

@@ -231,6 +231,7 @@ it('exports snapshot', async ({ skip, task }) => {
             "DecodedMap": "function",
             "SpyModule": "object",
             "__INTERNAL": "object",
+            "browserFormat": "function",
             "collectTests": "function",
             "format": "function",
             "getOriginalPosition": "function",