feat!: use "concordance" package to display diff instead of using custom diff (#2828)

Author: sheremet-va

docs/config/index.md

@@ -449,58 +449,24 @@ Custom reporters for output. Reporters can be [a Reporter instance](https://gith
   - `'hanging-process'` - displays a list of hanging processes, if Vitest cannot exit process safely. This might be a heavy operation, enable it only if Vitest consistently cannot exit process
   - path of a custom reporter (e.g. `'./path/to/reporter.ts'`, `'@scope/reporter'`)
 
-### outputTruncateLength
-
-- **Type:** `number`
-- **Default:** `stdout.columns || 80`
-- **CLI:** `--outputTruncateLength=<length>`, `--output-truncate-length=<length>`
-
-Truncate the size of diff line up to `stdout.columns` or `80` number of characters. You may wish to tune this, depending on your terminal window width. Vitest includes `+-` characters and spaces for this. For example, you might see this diff, if you set this to `6`:
-
-```diff
-// actual line: "Text that seems correct"
-- Text...
-+ Test...
-```
-
-### outputDiffLines
-
-- **Type:** `number`
-- **Default:** `15`
-- **CLI:** `--outputDiffLines=<lines>`, `--output-diff-lines=<lines>`
-
-Limit the number of single output diff lines up to `15`. Vitest counts all `+-` lines when determining when to stop. For example, you might see diff like this, if you set this property to `3`:
-
-```diff
-- test: 1,
-+ test: 2,
-- obj: '1',
-...
-- test2: 1,
-+ test2: 1,
-- obj2: '2',
-...
-```
-
-### outputDiffMaxLines
-
-- **Type:** `number`
-- **Default:** `50`
-- **CLI:** `--outputDiffMaxLines=<lines>`, `--output-diff-max-lines=<lines>`
-- **Version:** Since Vitest 0.26.0
-
-The maximum number of lines to display in diff window. Beware that if you have a large object with many small diffs, you might not see all of them at once.
-
-### outputDiffMaxSize
-
-- **Type:** `number`
-- **Default:** `10000`
-- **CLI:** `--outputDiffMaxSize=<length>`, `--output-diff-max-size=<length>`
-- **Version:** Since Vitest 0.26.0
-
-The maximum length of the stringified object before the diff happens. Vitest tries to stringify an object before doing a diff, but if the object is too large, it will reduce the depth of the object to fit within this limit. Because of this, if the object is too big or nested, you might not see the diff.
-
-Increasing this limit can increase the duration of diffing.
+ ### outputDiffLines
+
+ - **Type:** `number`
+ - **Default:** `15`
+ - **CLI:** `--outputDiffLines=<lines>`, `--output-diff-lines=<lines>`
+
+ Limit the number of single output diff lines up to `15`. Vitest counts all `+-` lines when determining when to stop. For example, you might see diff like this, if you set this property to `3`:
+
+ ```diff
+ - test: 1,
+ + test: 2,
+ - obj: '1',
+ ...
+ - test2: 1,
+ + test2: 1,
+ - obj2: '2',
+ ...
+ ```
 
 ### outputFile
 

docs/guide/cli.md

@@ -73,9 +73,6 @@ Run only [benchmark](https://vitest.dev/guide/features.html#benchmarking-experim
 | `--silent` | Silent console output from tests |
 | `--isolate` | Isolate environment for each test file (default: `true`) |
 | `--reporter <name>` | Select reporter: `default`, `verbose`, `dot`, `junit`, `json`, or a path to a custom reporter |
-| `--outputDiffMaxSize <length>` | Object diff output max size (default: 10000) |
-| `--outputDiffMaxLines <lines>` | Max lines in diff output window (default: 50) |
-| `--outputTruncateLength <length>` | Truncate output diff lines up to `<length>` number of characters. |
 | `--outputDiffLines <lines>` | Limit number of output diff lines up to `<lines>`. |
 | `--outputFile <filename/-s>` | Write test results to a file when the `--reporter=json` or `--reporter=junit` option is also specified <br /> Via [cac's dot notation] you can specify individual outputs for multiple reporters |
 | `--coverage` | Enable coverage report |

packages/expect/src/jest-matcher-utils.ts

@@ -104,11 +104,7 @@ export function getMatcherUtils() {
 
 // TODO: do something with options
 export function diff(a: any, b: any, options?: DiffOptions) {
-  const c = getColors()
-  return unifiedDiff(stringify(b), stringify(a), {
-    colorDim: c.dim,
-    colorSuccess: c.green,
-    colorError: c.red,
+  return unifiedDiff(b, a, {
     showLegend: options?.showLegend,
   })
 }

packages/runner/package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@vitest/utils": "workspace:*",
+    "concordance": "^5.0.4",
     "p-limit": "^4.0.0",
     "pathe": "^1.1.0"
   }

packages/runner/rollup.config.js

@@ -8,6 +8,7 @@ const external = [
   ...builtinModules,
   ...Object.keys(pkg.dependencies || {}),
   ...Object.keys(pkg.peerDependencies || {}),
+  '@vitest/utils/diff',
 ]
 
 const entries = {

packages/runner/src/run.ts

@@ -150,15 +150,15 @@ export async function runTest(test: Test, runner: VitestRunner) {
       test.result.state = 'pass'
     }
     catch (e) {
-      failTask(test.result, e)
+      failTask(test.result, e, runner)
     }
 
     try {
       await callSuiteHook(test.suite, test, 'afterEach', runner, [test.context, test.suite])
       await callCleanupHooks(beforeEachCleanups)
     }
     catch (e) {
-      failTask(test.result, e)
+      failTask(test.result, e, runner)
     }
 
     if (test.result.state === 'pass')
@@ -195,9 +195,9 @@ export async function runTest(test: Test, runner: VitestRunner) {
   updateTask(test, runner)
 }
 
-function failTask(result: TaskResult, err: unknown) {
+function failTask(result: TaskResult, err: unknown, runner: VitestRunner) {
   result.state = 'fail'
-  const error = processError(err)
+  const error = processError(err, runner.config)
   result.error = error
   result.errors ??= []
   result.errors.push(error)
@@ -268,15 +268,15 @@ export async function runSuite(suite: Suite, runner: VitestRunner) {
       }
     }
     catch (e) {
-      failTask(suite.result, e)
+      failTask(suite.result, e, runner)
     }
 
     try {
       await callSuiteHook(suite, suite, 'afterAll', runner, [suite])
       await callCleanupHooks(beforeAllCleanups)
     }
     catch (e) {
-      failTask(suite.result, e)
+      failTask(suite.result, e, runner)
     }
   }
 

packages/runner/src/types/runner.ts

@@ -13,6 +13,7 @@ export interface VitestRunnerConfig {
     hooks: SequenceHooks
     setupFiles: SequenceSetupFiles
   }
+  outputDiffLines?: number
   maxConcurrency: number
   testTimeout: number
   hookTimeout: number

packages/runner/src/utils/error.ts

@@ -1,4 +1,6 @@
 import { deepClone, format, getOwnProperties, getType, stringify } from '@vitest/utils'
+import type { DiffOptions } from '@vitest/utils/diff'
+import { unifiedDiff } from '@vitest/utils/diff'
 
 export interface ParsedStack {
   method: string
@@ -14,6 +16,7 @@ export interface ErrorWithDiff extends Error {
   stackStr?: string
   stacks?: ParsedStack[]
   showDiff?: boolean
+  diff?: string
   actual?: any
   expected?: any
   operator?: string
@@ -102,11 +105,7 @@ function normalizeErrorMessage(message: string) {
   return message.replace(/__vite_ssr_import_\d+__\./g, '')
 }
 
-interface ProcessErrorOptions {
-  outputDiffMaxSize?: number
-}
-
-export function processError(err: any, options: ProcessErrorOptions = {}) {
+export function processError(err: any, options: DiffOptions = {}) {
   if (!err || typeof err !== 'object')
     return err
   // stack is not serialized in worker communication
@@ -121,15 +120,13 @@ export function processError(err: any, options: ProcessErrorOptions = {}) {
 
   const { replacedActual, replacedExpected } = replaceAsymmetricMatcher(clonedActual, clonedExpected)
 
-  err.actual = replacedActual
-  err.expected = replacedExpected
-
-  const maxDiffSize = options.outputDiffMaxSize ?? 10000
+  if (err.showDiff || (err.showDiff === undefined && err.expected !== undefined && err.actual !== undefined))
+    err.diff = unifiedDiff(replacedActual, replacedExpected, options)
 
   if (typeof err.expected !== 'string')
-    err.expected = stringify(err.expected, 10, { maxLength: maxDiffSize })
+    err.expected = stringify(err.expected, 10)
   if (typeof err.actual !== 'string')
-    err.actual = stringify(err.actual, 10, { maxLength: maxDiffSize })
+    err.actual = stringify(err.actual, 10)
 
   // some Error implementations don't allow rewriting message
   try {

packages/ui/client/components/views/ViewReportError.vue

@@ -20,9 +20,7 @@ const isDiffShowable = computed(() => {
 })
 
 function diff() {
-  return unifiedDiff(props.error.actual, props.error.expected, {
-    outputTruncateLength: 80,
-  })
+  return unifiedDiff(props.error.actual, props.error.expected)
 }
 </script>
 

packages/ui/client/composables/diff.ts

@@ -1,96 +1 @@
-import * as diff from 'diff'
-
-export interface DiffOptions {
-  outputTruncateLength?: number
-  outputDiffLines?: number
-  showLegend?: boolean
-}
-
-function formatLine(line: string, maxWidth: number) {
-  return line.slice(0, maxWidth) + (line.length > maxWidth ? '…' : '')
-}
-
-export function unifiedDiff(actual: string, expected: string, options: DiffOptions = {}) {
-  if (actual === expected)
-    return ''
-
-  const { outputTruncateLength = 80, outputDiffLines, showLegend = true } = options
-
-  const indent = '  '
-  const diffLimit = outputDiffLines || 15
-
-  const counts = {
-    '+': 0,
-    '-': 0,
-  }
-  let previousState: '-' | '+' | null = null
-  let previousCount = 0
-  function preprocess(line: string) {
-    if (!line || line.match(/\\ No newline/))
-      return
-
-    const char = line[0] as '+' | '-'
-    if ('-+'.includes(char)) {
-      if (previousState !== char) {
-        previousState = char
-        previousCount = 0
-      }
-      previousCount++
-      counts[char]++
-      if (previousCount === diffLimit)
-        return `${char} ...`
-      else if (previousCount > diffLimit)
-        return
-    }
-    return line
-  }
-
-  const msg = diff.createPatch('string', expected, actual)
-  const lines = msg.split('\n').slice(5).map(preprocess).filter(Boolean) as string[]
-  const isCompact = counts['+'] === 1 && counts['-'] === 1 && lines.length === 2
-
-  let formatted = lines.map((line: string) => {
-    line = line.replace(/\\"/g, '"')
-    if (line[0] === '-') {
-      line = formatLine(line.slice(1), outputTruncateLength)
-      if (isCompact)
-        return line
-      return `- ${formatLine(line, outputTruncateLength)}`
-    }
-    if (line[0] === '+') {
-      line = formatLine(line.slice(1), outputTruncateLength)
-      if (isCompact)
-        return line
-      return `+ ${formatLine(line, outputTruncateLength)}`
-    }
-    if (line.match(/@@/))
-      return '--'
-    return ` ${line}`
-  })
-
-  if (showLegend) {
-    // Compact mode
-    if (isCompact) {
-      formatted = [
-        `- Expected   ${formatted[0]}`,
-        `+ Received   ${formatted[1]}`,
-      ]
-    }
-    else {
-      if (formatted[0].includes('"'))
-        formatted[0] = formatted[0].replace('"', '')
-
-      const last = formatted.length - 1
-      if (formatted[last].endsWith('"'))
-        formatted[last] = formatted[last].slice(0, formatted[last].length - 1)
-
-      formatted.unshift(
-        `- Expected  - ${counts['-']}`,
-        `+ Received  + ${counts['+']}`,
-        '',
-      )
-    }
-  }
-
-  return formatted.map(i => indent + i).join('\n')
-}
+export { unifiedDiff } from '@vitest/utils/diff'

packages/ui/package.json

@@ -39,6 +39,7 @@
     "prepublishOnly": "pnpm build"
   },
   "dependencies": {
+    "@vitest/utils": "workspace:*",
     "fast-glob": "^3.2.12",
     "flatted": "^3.2.7",
     "pathe": "^1.1.0",
@@ -64,7 +65,6 @@
     "codemirror-theme-vars": "^0.1.1",
     "cypress": "^12.3.0",
     "d3-graph-controller": "^2.5.1",
-    "diff": "^5.1.0",
     "floating-vue": "^2.0.0-y.0",
     "rollup": "^2.79.1",
     "splitpanes": "^3.1.5",

packages/utils/package.json

@@ -37,12 +37,8 @@
     "prepublishOnly": "pnpm build"
   },
   "dependencies": {
-    "cli-truncate": "^3.1.0",
-    "diff": "^5.1.0",
+    "concordance": "^5.0.4",
     "loupe": "^2.3.6",
     "pretty-format": "^27.5.1"
-  },
-  "devDependencies": {
-    "@types/diff": "^5.0.2"
   }
 }

packages/utils/src/colors.ts

@@ -29,7 +29,11 @@ const colorsMap = {
 
 type ColorName = keyof typeof colorsMap
 type ColorsMethods = {
-  [Key in ColorName]: (input: unknown) => string
+  [Key in ColorName]: {
+    (input: unknown): string
+    open: string
+    close: string
+  }
 }
 
 type Colors = ColorsMethods & {

packages/utils/src/descriptors.ts

@@ -0,0 +1,93 @@
+import concordance, { type DisplayOptions } from 'concordance'
+import { getColors } from './colors'
+
+export const getConcordanceTheme = () => {
+  const c = getColors()
+
+  // this theme is taken from ava: https://github.com/avajs/ava/blob/main/lib/concordance-options.js
+  // no adjustments were made so far except for the diff padding
+  return {
+    boolean: c.yellow,
+    circular: c.gray('[Circular]'),
+    date: {
+      invalid: c.red('invalid'),
+      value: c.blue,
+    },
+    diffGutters: {
+      actual: `  ${c.red('-')} `,
+      expected: `  ${c.green('+')} `,
+      padding: '    ',
+    },
+    error: {
+      ctor: { open: `${c.gray.open}(`, close: `)${c.gray.close}` },
+      name: c.magenta,
+    },
+    function: {
+      name: c.blue,
+      stringTag: c.magenta,
+    },
+    global: c.magenta,
+    item: { after: c.gray(',') },
+    list: { openBracket: c.gray('['), closeBracket: c.gray(']') },
+    mapEntry: { after: c.gray(',') },
+    maxDepth: c.gray('…'),
+    null: c.yellow,
+    number: c.yellow,
+    object: {
+      openBracket: c.gray('{'),
+      closeBracket: c.gray('}'),
+      ctor: c.magenta,
+      stringTag: { open: `${c.magenta.open}@`, close: c.magenta.close },
+      secondaryStringTag: { open: `${c.gray.open}@`, close: c.gray.close },
+    },
+    property: {
+      after: c.gray(','),
+      keyBracket: { open: c.gray('['), close: c.gray(']') },
+      valueFallback: c.gray('…'),
+    },
+    regexp: {
+      source: { open: `${c.blue.open}/`, close: `/${c.blue.close}` },
+      flags: c.yellow,
+    },
+    stats: { separator: c.gray('---') },
+    string: {
+      open: c.blue.open,
+      close: c.blue.close,
+      line: { open: c.blue('\''), close: c.blue('\'') },
+      multiline: { start: c.blue('`'), end: c.blue('`') },
+      controlPicture: c.gray,
+      diff: {
+        insert: {
+          open: c.bgGreen.open + c.black.open,
+          close: c.black.close + c.bgGreen.close,
+        },
+        delete: {
+          open: c.bgRed.open + c.black.open,
+          close: c.black.close + c.bgRed.close,
+        },
+        equal: c.blue,
+        insertLine: {
+          open: c.green.open,
+          close: c.green.close,
+        },
+        deleteLine: {
+          open: c.red.open,
+          close: c.red.close,
+        },
+      },
+    },
+    symbol: c.yellow,
+    typedArray: {
+      bytes: c.yellow,
+    },
+    undefined: c.yellow,
+  }
+}
+
+export function diffDescriptors(actual: unknown, expected: unknown, options: DisplayOptions) {
+  return concordance.diff(expected, actual, options)
+}
+
+export function formatDescriptor(value: unknown, options: DisplayOptions) {
+  return concordance.formatDescriptor(value, options)
+}

packages/utils/src/diff.ts

@@ -1,21 +1,9 @@
-import * as diff from 'diff'
-import cliTruncate from 'cli-truncate'
-
-export function formatLine(line: string, outputTruncateLength?: number) {
-  return cliTruncate(line, (outputTruncateLength ?? (process.stdout?.columns || 80)) - 4)
-}
-
-type Color = (str: string) => string
+import { getColors } from './colors'
+import { diffDescriptors, getConcordanceTheme } from './descriptors'
 
 export interface DiffOptions {
-  outputDiffMaxLines?: number
-  outputTruncateLength?: number
-  outputDiffLines?: number
   showLegend?: boolean
-
-  colorSuccess?: Color
-  colorError?: Color
-  colorDim?: Color
+  outputDiffLines?: number
 }
 
 /**
@@ -26,107 +14,60 @@ export interface DiffOptions {
 * @param {String} expected
 * @return {string} The diff.
 */
+export function unifiedDiff(actual: unknown, expected: unknown, options: DiffOptions = {}) {
+  const theme = getConcordanceTheme()
+  const diff = diffDescriptors(actual, expected, { theme })
 
-export function unifiedDiff(actual: string, expected: string, options: DiffOptions = {}) {
-  if (actual === expected)
-    return ''
-
-  const { outputTruncateLength, outputDiffLines, outputDiffMaxLines, showLegend = true } = options
-
-  const indent = '  '
-  const diffLimit = outputDiffLines || 15
-  const diffMaxLines = outputDiffMaxLines || 50
+  const { showLegend = true, outputDiffLines = 15 } = options
 
   const counts = {
     '+': 0,
     '-': 0,
   }
-  let previousState: '-' | '+' | null = null
-  let previousCount = 0
-
-  const str = (str: string) => str
-  const dim = options.colorDim || str
-  const green = options.colorSuccess || str
-  const red = options.colorError || str
-  function preprocess(line: string) {
-    if (!line || line.match(/\\ No newline/))
-      return
-
-    const char = line[0] as '+' | '-'
-    if ('-+'.includes(char)) {
-      if (previousState !== char) {
-        previousState = char
-        previousCount = 0
-      }
-      previousCount++
-      counts[char]++
-      if (previousCount === diffLimit)
-        return dim(`${char} ...`)
-      else if (previousCount > diffLimit)
-        return
+  const c = getColors()
+  const plus = theme.diffGutters.actual
+  const minus = `  ${c.green('+')}`
+
+  const lines = diff.split(/\r?\n/g)
+  let firstErrorLine: number | null = null
+  lines.forEach((line, index) => {
+    if (line.startsWith(plus)) {
+      firstErrorLine ??= index
+      counts['+']++
     }
-    return line
-  }
-
-  const msg = diff.createPatch('string', expected, actual)
-  let lines = msg.split('\n').slice(5).map(preprocess).filter(Boolean) as string[]
-  let moreLines = 0
-  const isCompact = counts['+'] === 1 && counts['-'] === 1 && lines.length === 2
-
-  if (lines.length > diffMaxLines) {
-    const firstDiff = lines.findIndex(line => line[0] === '-' || line[0] === '+')
-    const displayLines = lines.slice(firstDiff - 2, diffMaxLines)
-    const lastDisplayedIndex = firstDiff - 2 + diffMaxLines
-    if (lastDisplayedIndex < lines.length)
-      moreLines = lines.length - lastDisplayedIndex
-    lines = displayLines
-  }
-
-  let formatted = lines.map((line: string) => {
-    line = line.replace(/\\"/g, '"')
-    if (line[0] === '-') {
-      line = formatLine(line.slice(1), outputTruncateLength)
-      if (isCompact)
-        return green(line)
-      return green(`- ${formatLine(line, outputTruncateLength)}`)
-    }
-    if (line[0] === '+') {
-      line = formatLine(line.slice(1), outputTruncateLength)
-      if (isCompact)
-        return red(line)
-      return red(`+ ${formatLine(line, outputTruncateLength)}`)
+    else if (line.startsWith(minus)) {
+      firstErrorLine ??= index
+      counts['-']++
     }
-    if (line.match(/@@/))
-      return '--'
-    return ` ${line}`
   })
+  const isCompact = counts['+'] === 1 && counts['-'] === 1 && lines.length === 2
 
-  if (moreLines)
-    formatted.push(dim(`... ${moreLines} more lines`))
+  let legend = ''
 
   if (showLegend) {
-    // Compact mode
-    if (isCompact) {
-      formatted = [
-        `${green('- Expected')}   ${formatted[0]}`,
-        `${red('+ Received')}   ${formatted[1]}`,
-      ]
+    if (!isCompact) {
+      legend = `  ${c.green(`- Expected  - ${counts['-']}`)}
+  ${c.red(`+ Received  + ${counts['+']}`)}
+
+`
     }
     else {
-      if (formatted[0].includes('"'))
-        formatted[0] = formatted[0].replace('"', '')
+      legend = '  Difference:\n\n'
+    }
+  }
 
-      const last = formatted.length - 1
-      if (formatted[last].endsWith('"'))
-        formatted[last] = formatted[last].slice(0, formatted[last].length - 1)
+  if (firstErrorLine != null && outputDiffLines) {
+    const start = Math.max(0, firstErrorLine - 1)
+    const end = Math.min(lines.length, firstErrorLine + outputDiffLines)
+    const linesAfterCount = lines.length - end
 
-      formatted.unshift(
-        green(`- Expected  - ${counts['-']}`),
-        red(`+ Received  + ${counts['+']}`),
-        '',
-      )
-    }
+    const linesBefore = start ? `  ${c.gray(`... ${start} more line${start > 1 ? 's' : ''}\n`)}` : ''
+    const linesAfter = linesAfterCount ? `\n  ${c.gray(`... ${linesAfterCount} more line${linesAfterCount > 1 ? 's' : ''}\n`)}` : ''
+    const diffOutput = lines.slice(start, end).map(line => line.replace(/␊\s*$/, '')).join('\n')
+    const helperBunner = linesAfter && (counts['+'] + counts['-'] > outputDiffLines) ? `\n  Use ${c.gray('test.outputDiffLines')} to increase the number of lines shown.` : ''
+
+    return legend + linesBefore + diffOutput + linesAfter + helperBunner
   }
 
-  return formatted.map(i => i ? (indent + i) : i).join('\n')
+  return legend + diff
 }

packages/utils/src/external.d.ts

@@ -0,0 +1,9 @@
+declare module 'concordance' {
+  interface DisplayOptions {
+    theme?: any
+    maxDepth?: number
+  }
+
+  export function diff(expected: unknown, actual: unknown, options?: DisplayOptions): string
+  export function formatDescriptor(descriptor: unknown, options?: DisplayOptions): string
+}

packages/utils/src/index.ts

@@ -7,3 +7,4 @@ export * from './display'
 export * from './constants'
 export * from './colors'
 export * from './error'
+export * from './descriptors'

packages/vitest/package.json

@@ -145,6 +145,7 @@
     "acorn-walk": "^8.2.0",
     "cac": "^6.7.14",
     "chai": "^4.3.7",
+    "concordance": "^5.0.4",
     "debug": "^4.3.4",
     "local-pkg": "^0.4.2",
     "pathe": "^1.1.0",
@@ -166,15 +167,14 @@
     "@types/diff": "^5.0.2",
     "@types/istanbul-lib-coverage": "^2.0.4",
     "@types/istanbul-reports": "^3.0.1",
-    "@types/jsdom": "^21.1.0",
+    "@types/jsdom": "^20.0.1",
     "@types/micromatch": "^4.0.2",
     "@types/natural-compare": "^1.4.1",
     "@types/prompts": "^2.4.2",
     "@types/sinonjs__fake-timers": "^8.1.2",
     "birpc": "^0.2.3",
     "chai-subset": "^1.6.0",
     "cli-truncate": "^3.1.0",
-    "diff": "^5.1.0",
     "event-target-polyfill": "^0.0.3",
     "execa": "^7.0.0",
     "expect-type": "^0.15.0",

packages/vitest/src/node/cli.ts

@@ -25,9 +25,6 @@ cli
   .option('--silent', 'Silent console output from tests')
   .option('--isolate', 'Isolate environment for each test file (default: true)')
   .option('--reporter <name>', 'Specify reporters')
-  .option('--outputDiffMaxSize <length>', 'Object diff output max size (default: 10000)')
-  .option('--outputDiffMaxLines <length>', 'Max lines in diff output window (default: 50)')
-  .option('--outputTruncateLength <length>', 'Diff output line length (default: 80)')
   .option('--outputDiffLines <lines>', 'Number of lines in single diff (default: 15)')
   .option('--outputFile <filename/-s>', 'Write test results to a file when supporter reporter is also specified, use cac\'s dot notation for individual outputs of multiple reporters')
   .option('--coverage', 'Enable coverage report')

packages/vitest/src/node/error.ts

@@ -3,7 +3,6 @@ import { existsSync, readFileSync } from 'fs'
 import { normalize, relative } from 'pathe'
 import c from 'picocolors'
 import cliTruncate from 'cli-truncate'
-import { type DiffOptions, unifiedDiff } from '@vitest/utils/diff'
 import { stringify } from '@vitest/utils'
 import type { ErrorWithDiff, ParsedStack } from '../types'
 import { lineSplitRE, parseErrorStacktrace, positionToOffset } from '../utils/source-map'
@@ -96,16 +95,8 @@ 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.showDiff || (e.showDiff === undefined && e.actual && e.expected)) {
-    displayDiff(stringify(e.actual), stringify(e.expected), ctx.logger.console, {
-      outputTruncateLength: ctx.config.outputTruncateLength,
-      outputDiffLines: ctx.config.outputDiffLines,
-      outputDiffMaxLines: ctx.config.outputDiffMaxLines,
-      colorDim: c.dim,
-      colorError: c.red,
-      colorSuccess: c.green,
-    })
-  }
+  if (e.diff)
+    displayDiff(e.diff, ctx.logger.console)
 }
 
 function printErrorType(type: string, ctx: Vitest) {
@@ -178,14 +169,8 @@ function handleImportOutsideModuleError(stack: string, ctx: Vitest) {
 }\n`)))
 }
 
-export function displayDiff(actual: string, expected: string, console: Console, options: Omit<DiffOptions, 'showLegend'> = {}) {
-  const diff = unifiedDiff(actual, expected, options)
-  const dim = options.colorDim || ((str: string) => str)
-  const black = options.colorDim ? c.black : (str: string) => str
-  if (diff)
-    console.error(diff + '\n')
-  else if (actual && expected && actual !== '"undefined"' && expected !== '"undefined"')
-    console.error(dim('Could not display diff. It\'s possible objects are too large to compare.\nTry increasing ') + black('--outputDiffMaxSize') + dim(' option.\n'))
+export function displayDiff(diff: string, console: Console) {
+  console.error(diff)
 }
 
 function printErrorMessage(error: ErrorWithDiff, logger: Logger) {

packages/vitest/src/types/config.ts

@@ -206,33 +206,12 @@ export interface InlineConfig {
    */
   reporters?: Arrayable<BuiltinReporters | 'html' | Reporter | Omit<string, BuiltinReporters>>
 
-  /**
-   * Truncates lines in the output to the given length.
-   * @default stdout.columns || 80
-   */
-  outputTruncateLength?: number
-
   /**
    * Maximum number of line to show in a single diff.
    * @default 15
    */
   outputDiffLines?: number
 
-  /**
-   * The maximum number of characters allowed in a single object before doing a diff.
-   * Vitest tries to stringify an object before doing a diff, but if the object is too large,
-   * it will reduce the depth of the object to fit within this limit.
-   * Because of this if object is too big or nested, you might not see the diff.
-   * @default 10000
-   */
-  outputDiffMaxSize?: number
-
-  /**
-   * Maximum number of lines in a diff overall.
-   * @default 50
-   */
-  outputDiffMaxLines?: number
-
   /**
    * Write test results to a file when the --reporter=json` or `--reporter=junit` option is also specified.
    * Also definable individually per reporter by using an object instead.

pnpm-lock.yaml

@@ -6,8 +6,8 @@ exports[`mocked function which fails on toReturnWith > just one call 1`] = `
 Received: 
     1st spy call return:
 
-  1
-  2
+  - 1
+  + 2
 
 
 Number of calls: 1
@@ -20,18 +20,18 @@ exports[`mocked function which fails on toReturnWith > multi calls 1`] = `
 Received: 
     1st spy call return:
 
-  1
-  2
+  - 1
+  + 2
 
     2nd spy call return:
 
-  1
-  2
+  - 1
+  + 2
 
     3rd spy call return:
 
-  1
-  2
+  - 1
+  + 2
 
 
 Number of calls: 3
@@ -44,23 +44,23 @@ exports[`mocked function which fails on toReturnWith > oject type 1`] = `
 Received: 
     1st spy call return:
 
-    Object {
-  -   \\"a\\": \\"1\\",
-  +   \\"a\\": \\"4\\",
+    {
+  -   a: '1',
+  +   a: '4',
     }
 
     2nd spy call return:
 
-    Object {
-  -   \\"a\\": \\"1\\",
-  +   \\"a\\": \\"4\\",
+    {
+  -   a: '1',
+  +   a: '4',
     }
 
     3rd spy call return:
 
-    Object {
-  -   \\"a\\": \\"1\\",
-  +   \\"a\\": \\"4\\",
+    {
+  -   a: '1',
+  +   a: '4',
     }
 
 

test/core/test/__snapshots__/mocked.test.ts.snap

@@ -1,81 +1,54 @@
 import { expect, test, vi } from 'vitest'
-import { stringify } from '@vitest/utils'
+import { getDefaultColors, setupColors } from '@vitest/utils'
 import { displayDiff } from 'vitest/src/node/error'
+import { unifiedDiff } from '@vitest/utils/diff'
 
-test('displays an error for large objects', () => {
-  const objectA = new Array(1000).fill(0).map((_, i) => ({ i, long: 'a'.repeat(i) }))
-  const objectB = new Array(1000).fill(0).map((_, i) => ({ i, long: 'b'.repeat(i) }))
-  const console = { log: vi.fn(), error: vi.fn() }
-  displayDiff(stringify(objectA), stringify(objectB), console as any)
-  expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(`
-    "Could not display diff. It's possible objects are too large to compare.
-    Try increasing --outputDiffMaxSize option.
-    "
-  `)
-})
-
-test('displays an error for large objects', () => {
-  const console = { log: vi.fn(), error: vi.fn() }
-  displayDiff(stringify('undefined'), stringify('undefined'), console as any)
-  expect(console.error).not.toHaveBeenCalled()
-})
-
-test('displays diff', () => {
+test('displays object diff', () => {
   const objectA = { a: 1, b: 2 }
   const objectB = { a: 1, b: 3 }
   const console = { log: vi.fn(), error: vi.fn() }
-  displayDiff(stringify(objectA), stringify(objectB), console as any)
+  setupColors(getDefaultColors())
+  displayDiff(unifiedDiff(objectA, objectB), console as any)
   expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(`
     "  - Expected  - 1
       + Received  + 1
 
-        Object {
-          \\"a\\": 1,
-      -   \\"b\\": 3,
-      +   \\"b\\": 2,
-        }
-    "
+      ... 1 more line
+          a: 1,
+      -   b: 3,
+      +   b: 2,
+        }"
   `)
 })
 
-test('displays long diff', () => {
-  const objectA = { a: 1, b: 2, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, o: 15, p: 16, q: 17, r: 18, s: 19, t: 20, u: 21, v: 22, w: 23, x: 24, y: 25, z: 26 }
-  const objectB = { a: 1, b: 3, k: 11, l: 12, m: 13, n: 14, p: 16, o: 17, r: 18, s: 23, t: 88, u: 21, v: 44, w: 23, x: 24, y: 25, z: 26 }
+test('display one line string diff', () => {
+  const string1 = 'string1'
+  const string2 = 'string2'
   const console = { log: vi.fn(), error: vi.fn() }
-  displayDiff(stringify(objectA), stringify(objectB), console as any, { outputDiffMaxLines: 5 })
+  setupColors(getDefaultColors())
+  displayDiff(unifiedDiff(string1, string2), console as any)
   expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(`
-    "  - Expected  - 5
-      + Received  + 13
+    "  Difference:
 
-        Object {
-          \\"a\\": 1,
-      -   \\"b\\": 3,
-      +   \\"b\\": 2,
-      +   \\"d\\": 4,
-      ... 26 more lines
-    "
+      - 'string2'
+      + 'string1'"
   `)
 })
 
-test('displays truncated diff', () => {
-  const stringA = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Suspendisse viverra sapien ac venenatis lacinia.
-Morbi consectetur arcu nec lorem lacinia tempus.`
-  const objectB = `Quisque hendrerit metus id dapibus pulvinar.
-Quisque pellentesque enim a elit faucibus cursus.
-Sed in tellus aliquet mauris interdum semper a in lacus.`
+test('display multiline line string diff', () => {
+  const string1 = 'string1\nstring2\nstring3'
+  const string2 = 'string2\nstring2\nstring1'
   const console = { log: vi.fn(), error: vi.fn() }
-  displayDiff((stringA), (objectB), console as any, { outputTruncateLength: 14 })
+  setupColors(getDefaultColors())
+  displayDiff(unifiedDiff(string1, string2), console as any)
   expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(`
-    "  - Expected  - 3
-      + Received  + 3
-
-      - Quisque h…
-      - Quisque p…
-      - Sed in te…
-      + Lorem ips…
-      + Suspendis…
-      + Morbi con…
-    "
+    "  - Expected  - 2
+      + Received  + 2
+
+      + string1
+        \`string2
+      - string2
+      - string1\`
+      + string3\`"
   `)
 })

test/core/test/diff.test.ts

@@ -1,3 +1,4 @@
+import { getDefaultColors, setupColors } from '@vitest/utils'
 import { describe, expect, it } from 'vitest'
 
 describe('jest-matcher-utils', () => {
@@ -11,9 +12,11 @@ describe('jest-matcher-utils', () => {
   })
 
   it('diff', () => {
+    setupColors(getDefaultColors())
+
     expect(() => {
       // @ts-expect-error "toBeJestEqual" is a custom matcher we just created
       expect('a').toBeJestEqual('b')
-    }).toThrowError(/Expected.*"b".*Received.*"a"/ms)
+    }).toThrowError(/Difference:.*\- 'b'.*\+ 'a'/ms)
   })
 })

test/core/test/jest-matcher-utils.test.ts

@@ -1,6 +1,7 @@
-import { assert, describe, expect, test, vi, vitest } from 'vitest'
+import { afterEach, assert, beforeEach, describe, expect, test, vi, vitest } from 'vitest'
 // @ts-expect-error not typed module
 import { value as virtualValue } from 'virtual-module'
+import { createColors, getDefaultColors, setupColors } from '@vitest/utils'
 import { two } from '../src/submodule'
 import * as mocked from '../src/mockedA'
 import { mockedB } from '../src/mockedB'
@@ -135,6 +136,13 @@ test('async functions should be mocked', () => {
 })
 
 describe('mocked function which fails on toReturnWith', () => {
+  beforeEach(() => {
+    setupColors(getDefaultColors())
+  })
+  afterEach(() => {
+    setupColors(createColors(true))
+  })
+
   test('zero call', () => {
     const mock = vi.fn(() => 1)
     expect(() => expect(mock).toReturnWith(2)).toThrowErrorMatchingSnapshot()

test/core/test/mocked.test.ts

@@ -1,8 +1,3 @@
-import { getDefaultColors, setupColors } from '@vitest/utils'
-import { beforeEach, vi } from 'vitest'
+import { vi } from 'vitest'
 
 vi.mock('../src/global-mock', () => ({ mocked: true }))
-
-beforeEach(() => {
-  setupColors(getDefaultColors())
-})

test/core/test/setup.ts

@@ -41,6 +41,10 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
             "error": {
               "actual": "2",
               "constructor": "Function<AssertionError>",
+              "diff": "  Difference:
+
+  - 1
+  + 2",
               "expected": "1",
               "message": "expected 2 to deeply equal 1",
               "name": "AssertionError",
@@ -56,6 +60,10 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
               {
                 "actual": "2",
                 "constructor": "Function<AssertionError>",
+                "diff": "  Difference:
+
+  - 1
+  + 2",
                 "expected": "1",
                 "message": "expected 2 to deeply equal 1",
                 "name": "AssertionError",

test/reporters/tests/__snapshots__/html.test.ts.snap

@@ -7,7 +7,6 @@ process.stdin.setRawMode = () => process.stdin
 export default defineConfig({
   test: {
     watch: true,
-    outputTruncateLength: 999,
 
     // This configuration is edited by tests
     reporters: 'verbose',