[Feature]: Pass jest-diff options through jest-config to fix A11Y issues

[TheJaredWilcurt]

🚀 Feature Proposal

jest-diff has options for the colors in a terminal/command-prompt (among other things):

• https://github.com/facebook/jest/tree/main/packages/jest-diff#options

These options should be exposed to the jest-config, so end users can control these values in their project.

Motivation

Currently, the colors in every version of Jest are either broken for people with visual impairments (24.9.0 and below) or with cognitive impairments (25.0.0+). Also in 25+ there are issues on specific systems default terminals that cause issues (Windows CMD/Powershell, ZSH, GitLab CI, IntelliJ, etc).

• See: Text Diff coloring bugs in Gitlab CI, Windows, Ubuntu ZSH, and IntelliJ Terminal (25.2.4+) #9459
• See: jest-snapshot: Improve colors when snapshots are updatable #9132

People should be able to set their own color choices, and not be forced into a set that is incompatible with them as a human, or with their preferences via terminal, shell, theme, or tooling.

Example

jest.config.js

const chalk = require('chalk');

module.exports = {
  diff: {
    // 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:

const diff = require('jest-deuteranopia-diffs');
module.exports = { diff };

const diff = require('jest-cognitive-diffs');
module.exports = { diff };

const diff = require('jest-win-cmd-diffs');
module.exports = { diff };

etc.
There could even be an awesome-jest-diffs 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 Jest to allow for this.

Pitch

Because humans are not all the same.

Because this software is made for humans.

[F3n67u]

There could even be an awesome-jest-diffs 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 Jest to allow for this.

Because humans are not all the same.

Because this software is made for humans

I like your idea. would you mind sending a pr? It will be great if you can contribute to this feature. @TheJaredWilcurt

[SimenB]

Yeah, this is a great idea! PR very much welcome 👍

[silverwind]

As for API, I suggest extending the defaults with provided properties, e.g. {...defaults, ...(diffOptions || {})}, so a user does not have to provide a full set of properties (which are probably bound to change in incompatible ways).

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[rswheeldon]

This wouldn't just address A11Y issues, it would also make it possible to extend or reduce the number of lines of context which can make it easier to see where problems are in certain cases.

[grazirs]

Hi @SimenB! I’ve been looking at the code to implement this issue, and we can access the 'diff options' and 'expected colors' from jest-matcher-utils/src/index.ts

export type DiffOptions = ImportDiffOptions;

export const EXPECTED_COLOR = chalk.green;
export const RECEIVED_COLOR = chalk.red;
export const INVERTED_COLOR = chalk.inverse;
export const BOLD_WEIGHT = chalk.bold;
export const DIM_COLOR = chalk.dim;

However, I’ve been struggling to access the global config because it is not available in this file, and the other functions that have access to configs are not using the matcher utils. So I’d like to know if you have any suggestions I could use to access the configs.