refactor: replace strip-ansi with stripVTControlCharacters from `…

…node:util` (#6608)

packages/vitest/package.json

@@ -200,7 +200,6 @@
     "micromatch": "^4.0.7",
     "pretty-format": "^29.7.0",
     "prompts": "^2.4.2",
-    "strip-ansi": "^7.1.0",
     "strip-literal": "^2.1.0",
     "tinyglobby": "^0.2.6",
     "ws": "^8.18.0"

packages/vitest/src/node/error.ts

@@ -1,12 +1,12 @@
 /* eslint-disable prefer-template */
 import { existsSync, readFileSync } from 'node:fs'
 import { Writable } from 'node:stream'
+import { stripVTControlCharacters } from 'node:util'
 import { normalize, relative } from 'pathe'
 import c from 'tinyrainbow'
 import cliTruncate from 'cli-truncate'
 import type { ErrorWithDiff, ParsedStack } from '@vitest/utils'
 import { inspect } from '@vitest/utils'
-import stripAnsi from 'strip-ansi'
 import {
   lineSplitRE,
   positionToOffset,
@@ -398,7 +398,7 @@ export function generateCodeFrame(
         const lineLength = lines[j].length
 
         // too long, maybe it's a minified file, skip for codeframe
-        if (stripAnsi(lines[j]).length > 200) {
+        if (stripVTControlCharacters(lines[j]).length > 200) {
           return ''
         }
 

packages/vitest/src/node/reporters/benchmark/table/tableRender.ts

@@ -1,6 +1,6 @@
+import { stripVTControlCharacters } from 'node:util'
 import c from 'tinyrainbow'
 import cliTruncate from 'cli-truncate'
-import stripAnsi from 'strip-ansi'
 import type { Task } from '@vitest/runner'
 import { getTests, notNullish } from '../../../../utils'
 import { F_RIGHT } from '../../../../utils/figures'
@@ -75,7 +75,7 @@ function renderBenchmarkItems(result: BenchmarkResult) {
 function computeColumnWidths(results: BenchmarkResult[]): number[] {
   const rows = [tableHead, ...results.map(v => renderBenchmarkItems(v))]
   return Array.from(tableHead, (_, i) =>
-    Math.max(...rows.map(row => stripAnsi(row[i]).length)))
+    Math.max(...rows.map(row => stripVTControlCharacters(row[i]).length)))
 }
 
 function padRow(row: string[], widths: number[]) {
@@ -215,7 +215,7 @@ export function renderTree(
     if (task.result?.state !== 'pass' && outputMap.get(task) != null) {
       let data: string | undefined = outputMap.get(task)
       if (typeof data === 'string') {
-        data = stripAnsi(data.trim().split('\n').filter(Boolean).pop()!)
+        data = stripVTControlCharacters(data.trim().split('\n').filter(Boolean).pop()!)
         if (data === '') {
           data = undefined
         }

packages/vitest/src/node/reporters/github-actions.ts

@@ -1,5 +1,5 @@
+import { stripVTControlCharacters } from 'node:util'
 import { getTasks } from '@vitest/runner/utils'
-import stripAnsi from 'strip-ansi'
 import type { File } from '@vitest/runner'
 import { getFullName } from '../../utils'
 import { capturePrintError } from '../error'
@@ -64,7 +64,7 @@ export class GithubActionsReporter implements Reporter {
           line: String(stack.line),
           column: String(stack.column),
         },
-        message: stripAnsi(result.output),
+        message: stripVTControlCharacters(result.output),
       })
       this.ctx.logger.log(`\n${formatted}`)
     }

packages/vitest/src/node/reporters/junit.ts

@@ -1,10 +1,10 @@
 import { existsSync, promises as fs } from 'node:fs'
 import { hostname } from 'node:os'
+import { stripVTControlCharacters } from 'node:util'
 import { dirname, relative, resolve } from 'pathe'
 
 import type { Task } from '@vitest/runner'
 import { getSuites } from '@vitest/runner/utils'
-import stripAnsi from 'strip-ansi'
 import type { Vitest } from '../core'
 import type { Reporter } from '../types/reporter'
 import { getOutputFile } from '../../utils/config-helpers'
@@ -233,7 +233,7 @@ export class JUnitReporter implements Reporter {
                     { project: this.ctx.getProjectByTaskId(task.id), task },
                   )
                   await this.baseLog(
-                    escapeXML(stripAnsi(result.output.trim())),
+                    escapeXML(stripVTControlCharacters(result.output.trim())),
                   )
                 },
               )

packages/vitest/src/node/reporters/renderers/listRenderer.ts

@@ -1,6 +1,6 @@
+import { stripVTControlCharacters } from 'node:util'
 import c from 'tinyrainbow'
 import cliTruncate from 'cli-truncate'
-import stripAnsi from 'strip-ansi'
 import type { SuiteHooks, Task } from '@vitest/runner'
 import { getTests, notNullish } from '../../../utils'
 import { F_RIGHT } from '../../../utils/figures'
@@ -183,7 +183,7 @@ function renderTree(
     if (task.result?.state !== 'pass' && outputMap.get(task) != null) {
       let data: string | undefined = outputMap.get(task)
       if (typeof data === 'string') {
-        data = stripAnsi(data.trim().split('\n').filter(Boolean).pop()!)
+        data = stripVTControlCharacters(data.trim().split('\n').filter(Boolean).pop()!)
         if (data === '') {
           data = undefined
         }

packages/vitest/src/node/reporters/renderers/utils.ts

@@ -1,6 +1,6 @@
+import { stripVTControlCharacters } from 'node:util'
 import { basename, dirname, isAbsolute, relative } from 'pathe'
 import c from 'tinyrainbow'
-import stripAnsi from 'strip-ansi'
 import type { SuiteHooks, Task } from '@vitest/runner'
 import type { SnapshotSummary } from '@vitest/snapshot'
 import { slash } from '../../../utils/base'
@@ -37,7 +37,7 @@ export function divider(text?: string, left?: number, right?: number) {
   const cols = getCols()
 
   if (text) {
-    const textLength = stripAnsi(text).length
+    const textLength = stripVTControlCharacters(text).length
     if (left == null && right != null) {
       left = cols - textLength - right
     }

packages/vitest/src/node/watch-filter.ts

@@ -1,7 +1,7 @@
 import readline from 'node:readline'
 import type { Writable } from 'node:stream'
+import { stripVTControlCharacters } from 'node:util'
 import c from 'tinyrainbow'
-import stripAnsi from 'strip-ansi'
 import { createDefer } from '@vitest/utils'
 import { stdout as getStdout } from '../utils'
 
@@ -198,7 +198,7 @@ export class WatchFilter {
       const columns = 'columns' in this.stdout ? this.stdout.columns : 80
 
       // We have to take care of screen width in case of long lines
-      rows += 1 + Math.floor(Math.max(stripAnsi(line).length - 1, 0) / columns)
+      rows += 1 + Math.floor(Math.max(stripVTControlCharacters(line).length - 1, 0) / columns)
     }
 
     this.write(`${ESC}1G`) // move to the beginning of the line

test/browser/package.json

@@ -28,7 +28,6 @@
     "playwright": "^1.41.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "strip-ansi": "^7.1.0",
     "url": "^0.11.3",
     "vitest": "workspace:*",
     "vitest-browser-react": "^0.0.1",

test/browser/test/commands.test.ts

@@ -58,5 +58,7 @@ declare module '@vitest/browser/context' {
       arg1: string
       arg2: string
     }>
+
+    stripVTControlCharacters: (text: string) => Promise<string>
   }
 }

test/browser/test/utils.test.ts

@@ -1,6 +1,6 @@
 import { inspect } from 'vitest/utils'
 import { afterEach, expect, it, test } from 'vitest'
-import stripAnsi from 'strip-ansi'
+import { commands } from '@vitest/browser/context'
 
 import { prettyDOM } from '@vitest/browser/utils'
 
@@ -12,28 +12,28 @@ it('utils package correctly uses loupe', async () => {
   expect(inspect({ test: 1 })).toBe('{ test: 1 }')
 })
 
-test('prints default document', () => {
-  expect(stripAnsi(prettyDOM())).toMatchSnapshot()
+test('prints default document', async () => {
+  expect(await commands.stripVTControlCharacters(prettyDOM())).toMatchSnapshot()
 
   const div = document.createElement('div')
   div.innerHTML = '<span>hello</span>'
   document.body.append(div)
 
-  expect(stripAnsi(prettyDOM())).toMatchSnapshot()
+  expect(await commands.stripVTControlCharacters(prettyDOM())).toMatchSnapshot()
 })
 
-test('prints the element', () => {
+test('prints the element', async () => {
   const div = document.createElement('div')
   div.innerHTML = '<span>hello</span>'
   document.body.append(div)
 
-  expect(stripAnsi(prettyDOM())).toMatchSnapshot()
+  expect(await commands.stripVTControlCharacters(prettyDOM())).toMatchSnapshot()
 })
 
-test('prints the element with attributes', () => {
+test('prints the element with attributes', async () => {
   const div = document.createElement('div')
   div.innerHTML = '<span class="some-name" data-test-id="33" id="5">hello</span>'
   document.body.append(div)
 
-  expect(stripAnsi(prettyDOM())).toMatchSnapshot()
+  expect(await commands.stripVTControlCharacters(prettyDOM())).toMatchSnapshot()
 })

test/browser/vitest.config.mts

@@ -1,5 +1,6 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import * as util from 'node:util'
 import { defineConfig } from 'vitest/config'
 import type { BrowserCommand } from 'vitest/node'
 
@@ -14,6 +15,10 @@ const myCustomCommand: BrowserCommand<[arg1: string, arg2: string]> = ({ testPat
   return { testPath, arg1, arg2 }
 }
 
+const stripVTControlCharacters: BrowserCommand<[text: string]> = (_, text) => {
+  return util.stripVTControlCharacters(text)
+}
+
 export default defineConfig({
   server: {
     headers: {
@@ -70,6 +75,7 @@ export default defineConfig({
       ],
       commands: {
         myCustomCommand,
+        stripVTControlCharacters,
       },
     },
     alias: {

test/core/package.json

@@ -26,7 +26,6 @@
     "debug": "^4.3.4",
     "immutable": "5.0.0-beta.5",
     "memfs": "^4.8.2",
-    "strip-ansi": "^7.1.0",
     "sweetalert2": "^11.6.16",
     "tinyrainbow": "^1.2.0",
     "tinyspy": "^1.0.2",