fix(cli): improve colors used when erroring

packages/vitest/src/node/error.ts

@@ -57,6 +57,10 @@ export async function printError(error: unknown, ctx: Vitest, options: PrintErro
     printErrorType(type, ctx)
   printErrorMessage(e, ctx.logger)
 
+  // E.g. AssertionError from assert does not set showDiff but has both actual and expected properties
+  if (e.diff)
+    displayDiff(e.diff, ctx.logger.console)
+
   // if the error provide the frame
   if (e.frame) {
     ctx.logger.error(c.yellow(e.frame))
@@ -65,7 +69,7 @@ export async function printError(error: unknown, ctx: Vitest, options: PrintErro
     printStack(ctx, stacks, nearest, errorProperties, (s) => {
       if (showCodeFrame && s === nearest && nearest) {
         const sourceCode = readFileSync(nearest.file, 'utf-8')
-        ctx.logger.error(c.yellow(generateCodeFrame(sourceCode, 4, s.line, s.column)))
+        ctx.logger.error(generateCodeFrame(sourceCode, 4, s.line, s.column))
       }
     })
   }
@@ -93,10 +97,6 @@ export async function printError(error: unknown, ctx: Vitest, options: PrintErro
   }
 
   handleImportOutsideModuleError(e.stack || e.stackStr || '', ctx)
-
-  // E.g. AssertionError from assert does not set showDiff but has both actual and expected properties
-  if (e.diff)
-    displayDiff(e.diff, ctx.logger.console)
 }
 
 function printErrorType(type: string, ctx: Vitest) {
@@ -185,7 +185,7 @@ function printModuleWarningForSourceCode(logger: Logger, path: string) {
 }
 
 export function displayDiff(diff: string, console: Console) {
-  console.error(diff)
+  console.error(`\n${diff}\n`)
 }
 
 function printErrorMessage(error: ErrorWithDiff, logger: Logger) {
@@ -203,10 +203,10 @@ function printStack(
   const logger = ctx.logger
 
   for (const frame of stack) {
-    const color = frame === highlight ? c.yellow : c.gray
+    const color = frame === highlight ? c.cyan : c.gray
     const path = relative(ctx.config.root, frame.file)
 
-    logger.error(color(` ${c.dim(F_POINTER)} ${[frame.method, c.dim(`${path}:${frame.line}:${frame.column}`)].filter(Boolean).join(' ')}`))
+    logger.error(color(` ${c.dim(F_POINTER)} ${[frame.method, `${path}:${c.dim(`${frame.line}:${frame.column}`)}`].filter(Boolean).join(' ')}`))
     onStack?.(frame)
   }
   if (stack.length)

test/core/test/diff.test.ts

@@ -10,14 +10,16 @@ test('displays object diff', () => {
   setupColors(getDefaultColors())
   displayDiff(unifiedDiff(objectA, objectB), console as any)
   expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(`
-    "  - Expected  - 1
+    "
+      - Expected  - 1
       + Received  + 1
 
         {
           a: 1,
       -   b: 3,
       +   b: 2,
-        }"
+        }
+    "
   `)
 })
 
@@ -28,11 +30,13 @@ test('display one line string diff', () => {
   setupColors(getDefaultColors())
   displayDiff(unifiedDiff(string1, string2), console as any)
   expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(`
-    "  - Expected  - 1
+    "
+      - Expected  - 1
       + Received  + 1
 
       - 'string2'
-      + 'string1'"
+      + 'string1'
+    "
   `)
 })
 
@@ -43,13 +47,15 @@ test('display multiline line string diff', () => {
   setupColors(getDefaultColors())
   displayDiff(unifiedDiff(string1, string2), console as any)
   expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(`
-    "  - Expected  - 2
+    "
+      - Expected  - 2
       + Received  + 2
 
       + string1
         \`string2
       - string2
       - string1\`
-      + string3\`"
+      + string3\`
+    "
   `)
 })