CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jest-diff

Display differences clearly so people can review changes confidently

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

jest-diff

Jest-diff is a comprehensive TypeScript library for displaying differences between values with multiple comparison methods. It provides functions for comparing strings character-by-character, arrays line-by-line, and JavaScript objects with serialization. The library offers colorized output using chalk for easy change visualization and supports configurable formatting options.

Package Information

  • Package Name: jest-diff
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install jest-diff

Core Imports

import { diff, diffStringsUnified, diffLinesUnified, DiffOptions } from "jest-diff";

For CommonJS:

const { diff, diffStringsUnified, diffLinesUnified } = require("jest-diff");

Basic Usage

import { diff, diffStringsUnified, diffLinesUnified } from "jest-diff";

// Compare any two JavaScript values
const a = ['delete', 'common', 'changed from'];
const b = ['common', 'changed to', 'insert'];
const result = diff(a, b);
console.log(result);

// Compare strings character-by-character
const stringDiff = diffStringsUnified('Hello world', 'Hello Jest');
console.log(stringDiff);

// Compare arrays of strings line-by-line
const lines1 = ['line 1', 'line 2', 'line 3'];
const lines2 = ['line 1', 'modified line 2', 'line 3'];
const lineDiff = diffLinesUnified(lines1, lines2);
console.log(lineDiff);

Architecture

Jest-diff is built around several key components:

  • Main diff function: Handles any JavaScript values by detecting types and routing to appropriate comparison methods
  • String comparison: Character-by-character diffing with semantic cleanup for readable output
  • Line comparison: Line-by-line diffing for arrays of strings with unified diff formatting
  • Pretty formatting: Integration with pretty-format for consistent object serialization
  • Colorization system: Configurable chalk-based coloring for clear visual distinction
  • Options normalization: Comprehensive default handling and validation for formatting options

Capabilities

Value Comparison

Main comparison function that handles any JavaScript values including primitives, objects, arrays, Maps, and Sets.

function diff(a: any, b: any, options?: DiffOptions): string | null;

Value Comparison

String Comparison

Character-by-character string comparison with unified diff output and semantic cleanup.

function diffStringsUnified(a: string, b: string, options?: DiffOptions): string;
function diffStringsRaw(a: string, b: string, cleanup: boolean): Array<Diff>;

String Comparison

Line Comparison

Line-by-line comparison for arrays of strings with multiple output formats.

function diffLinesUnified(
  aLines: Array<string>, 
  bLines: Array<string>, 
  options?: DiffOptions
): string;

function diffLinesUnified2(
  aLinesDisplay: Array<string>,
  bLinesDisplay: Array<string>, 
  aLinesCompare: Array<string>,
  bLinesCompare: Array<string>,
  options?: DiffOptions
): string;

function diffLinesRaw(
  aLines: Array<string>, 
  bLines: Array<string>
): Array<Diff>;

Line Comparison

Configuration

interface DiffOptions {
  aAnnotation?: string;
  aColor?: DiffOptionsColor;
  aIndicator?: string;
  bAnnotation?: string;
  bColor?: DiffOptionsColor;
  bIndicator?: string;
  changeColor?: DiffOptionsColor;
  changeLineTrailingSpaceColor?: DiffOptionsColor;
  commonColor?: DiffOptionsColor;
  commonIndicator?: string;
  commonLineTrailingSpaceColor?: DiffOptionsColor;
  contextLines?: number;
  emptyFirstOrLastLinePlaceholder?: string;
  expand?: boolean;
  includeChangeCounts?: boolean;
  omitAnnotationLines?: boolean;
  patchColor?: DiffOptionsColor;
  compareKeys?: CompareKeys;
}

type DiffOptionsColor = (arg: string) => string;

// From pretty-format package
type CompareKeys = ((a: string, b: string) => number) | undefined;

Data Structures

class Diff {
  0: number; // Operation type: DIFF_DELETE (-1), DIFF_INSERT (1), or DIFF_EQUAL (0)
  1: string; // Text content
  constructor(op: number, text: string);
}

const DIFF_DELETE = -1;
const DIFF_INSERT = 1; 
const DIFF_EQUAL = 0;

docs

index.md

line-comparison.md

string-comparison.md

value-comparison.md

tile.json