How to disable terminal colors in the vitest snashots?

[ghiscoding]

I'm having unit tests issues with my snapshots after switching from chalk to picocolors in Lerna-Lite via this PR. I saw this Vitest issue #841 which says to use NO_COLOR which seems to help in the CI and makes my Lerna-Lite PR pass but I can't figure how to disable it on my local Windows computer.

I tried setting this in my .env file but that doesn't work

NO_COLOR=true
FORCE_COLOR=0

I also tried the Vitest --no-color CLI option but that doesn't work either. I also have the problem while running VSCode debugger as well. It's great that it now works in the CI but I really I could get my tests to pass locally as well.

The code below works in the CI, but how can I do the same locally?

- name: Run Vitest unit tests
  env:
    NO_COLOR: true
  run: pnpm test:coverage

[ghiscoding]

ahh wait this seems to work by using cross-env package

"scripts": {
  "test": "cross-env-shell NO_COLOR=true vitest --watch --config ./vitest/vitest.config.ts",
}

is that the best way to do it on a Windows and to make it cross-compatible?

and this seems to work for the VSCode debugger

{
  "name": "Vitest - Debug Current Test File",
  "type": "node",
  "env": {
    "NO_COLOR": "true"
  },
  "request": "launch",
  "autoAttachChildProcesses": true,
  "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
  "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
  "args": ["run", "${relativeFile}", "--pool", "forks", "--no-watch", "--config", "./vitest/vitest.config.ts"],
  "smartStep": true,
  "console": "integratedTerminal"
},

[AriPerkkio]

The NO_COLOR should work. But if you are testing terminal output, I would recommend to use strip-ansi in the snapshots. It will get rid of colors and other ANSI escape codes.

Something like this should work nicely:

import { expect } from 'vitest';
import stripAnsi from 'strip-ansi'

expect.addSnapshotSerializer({
  serialize: (val) => stripAnsi(val),
  test: () => true,
});

[ghiscoding]

ahh no I wasn't testing the color in the snapshot, I simply wanted to replace chalk and a few tests failing with extra characters because the colors were kept which caused snapshot diffs. Chalk had a level option that could be set to 0 for disabling the colors which is what was used earlier. So, anyway I got it working with cross-env and NO_COLOR in the npm script, so I'll use that unless I find something better. Thanks

[mrazauskas]

Since Node.js v16.11 the built in util.stripVTControlCharacters() method could be used instead of strip-ansi. It does the same thing. Reference: https://nodejs.org/docs/latest/api/util.html#utilstripvtcontrolcharactersstr

[ghiscoding]

@mrazauskas That's nice, I wonder where would that be used? I guess it could be interesting to see implemented directly into Vitest to better disable colors, is that what you had in mind?

[mrazauskas]

It can be used instead of strip-ansi. This package has nearly 200 million downloads a week and more than 9000 dependants. Hope this answers your first question.

---

Sorry, but I cannot answer your second question seriously. Somehow it feels like Vitest already is a JavaScript testing tool with the largest API surface. And maintainers continue to think about adding more: #5857 (comment)

Vitest. More is more!

I would like to propose a new tag line. Because “Next Generation” doesn't really say anything. “A Vite-native testing framework“ is plain wrong, because neither benchmarks nor type checks are anyhow Vite-native.

So what it is?

Perhaps: “Vitest. More is more! A JavaScript testing tool with the largest API surface ever. (And we are eager for more!)”