Custom snapshot console colors (A11Y)

[TheJaredWilcurt]

Clear and concise description of the problem

• Colors work differently in different editors/consoles/terminals/shells/CI's/etc.
• Some people have different visual, or cognitive impairments that make certain color combinations frustrating or difficult to discern.

Suggested solution

The default red/green approach is fine by me, and probably good for the majority of users. But it would be nice if there was a vite.config.js option for customizing the colors used by Vitest, particularly in snapshot failures.

import chalk from 'chalk';
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    diff: {
      // I'm not sure what the API would look like here, So I'll just use what
      // jest-diff documents for this example. The following is copied directly from
      // https://github.com/facebook/jest/tree/main/packages/jest-diff#options
      aAnnotation: 'Expected',
      aColor: chalk.green,
      aIndicator: '-',
      bAnnotation: 'Received',
      bColor: chalk.red,
      bIndicator: '+',
      changeColor: chalk.inverse,
      changeLineTrailingSpaceColor: string => string,
      commonColor: chalk.dim,
      commonIndicator: ' ',
      commonLineTrailingSpaceColor: string => string,
      compareKeys: undefined,
      contextLines: 5,
      emptyFirstOrLastLinePlaceholder: '',
      expand: true,
      includeChangeCounts: false,
      omitAnnotationLines: false,
      patchColor: chalk.yellow
    }
  }
});

By exposing all options, it empowers communities to create their own commonly recommended settings, like so:

import { defineConfig } from 'vite';
import diff from 'vitest-deuteranopia-diffs';

export default defineConfig({ test: { diff } });

import { defineConfig } from 'vite';
import diff from 'vitest-cognitive-diffs';

export default defineConfig({ test: { diff } });

import { defineConfig } from 'vite';
import diff from 'vitest-win-cmd-diffs';

export default defineConfig({ test: { diff } });

etc.
There could even be an awesome-vitest-diffs repo with screenshots of each library, so users can more easily choose what works best for them or their teams. This could all be community-lead, but we need Vitest to allow for this.

Alternative

No response

Additional context

This same feature request was submitted to Jest, and approved for PR.

• [Feature]: Pass jest-diff options through jest-config to fix A11Y issues jestjs/jest#12576

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[mst101]

Yes, I'd really appreciate this. I find it hard to read red text on a black background and would love to be able to use a slightly different colour.

[Fitzpaa]

Yes please!

[sheremet-va]

We now use the same diff method that jest uses, so it should be possible to reuse the same config. PRs to implement this are welcome. Please, note that the new option should be a string that references a module with a default export containing this config.

It should be loaded inside a test context and passed down to the diff method. Also note that Vitest doesn't use chalk, but we use a compatible interface.