jest-matcher-utils: Add color options to matcherHint

CHANGELOG.md

@@ -21,6 +21,7 @@
 - `[@jest/core, @jest/test-sequencer]` Support async sort in custom `testSequencer` ([#8642](https://github.com/facebook/jest/pull/8642))
 - `[jest-runtime, @jest/fake-timers]` Add `jest.advanceTimersToNextTimer` ([#8713](https://github.com/facebook/jest/pull/8713))
 - `[@jest-transform]` Extract transforming require logic within `jest-core` into `@jest-transform` ([#8756](https://github.com/facebook/jest/pull/8756))
+- `[jest-matcher-utils]` Add color options to `matcherHint` ([#8795](https://github.com/facebook/jest/pull/8795))
 
 ### Fixes
 

packages/jest-matcher-utils/src/__tests__/index.test.ts

@@ -6,11 +6,13 @@
  *
  */
 
+import chalk from 'chalk';
 import {
   diff,
   ensureNumbers,
   ensureNoExpected,
   getLabelPrinter,
+  matcherHint,
   pluralize,
   stringify,
   MatcherHintOptions,
@@ -286,3 +288,49 @@ describe('getLabelPrinter', () => {
     }).toThrow();
   });
 });
+
+describe('matcherHint', () => {
+  test('expectedColor', () => {
+    const expectedColor = (arg: string): string => arg; // default (black) color
+    const expectedArgument = 'n';
+    const received = matcherHint(
+      'toHaveBeenNthCalledWith',
+      'jest.fn()',
+      expectedArgument,
+      {expectedColor, secondArgument: '...expected'},
+    );
+
+    const substringNegative = chalk.green(expectedArgument);
+
+    expect(received).not.toMatch(substringNegative);
+  });
+
+  test('receivedColor', () => {
+    const receivedColor = chalk.cyan.bgAnsi256(158);
+    const receivedArgument = 'received';
+    const received = matcherHint('toMatchSnapshot', receivedArgument, '', {
+      receivedColor,
+    });
+
+    const substringNegative = chalk.red(receivedArgument);
+    const substringPositive = receivedColor(receivedArgument);
+
+    expect(received).not.toMatch(substringNegative);
+    expect(received).toMatch(substringPositive);
+  });
+
+  test('secondArgumentColor', () => {
+    const secondArgumentColor = chalk.bold;
+    const secondArgument = 'hint';
+    const received = matcherHint('toMatchSnapshot', undefined, 'properties', {
+      secondArgument,
+      secondArgumentColor,
+    });
+
+    const substringNegative = chalk.green(secondArgument);
+    const substringPositive = secondArgumentColor(secondArgument);
+
+    expect(received).not.toMatch(substringNegative);
+    expect(received).toMatch(substringPositive);
+  });
+});

packages/jest-matcher-utils/src/index.ts

@@ -28,12 +28,17 @@ const PLUGINS = [
   AsymmetricMatcher,
 ];
 
+type MatcherHintColor = (arg: string) => string; // subset of Chalk type
+
 export type MatcherHintOptions = {
   comment?: string;
+  expectedColor?: MatcherHintColor;
   isDirectExpectCall?: boolean;
   isNot?: boolean;
   promise?: string;
+  receivedColor?: MatcherHintColor;
   secondArgument?: string;
+  secondArgumentColor?: MatcherHintColor;
 };
 
 export {DiffOptions};
@@ -362,16 +367,19 @@ export const matcherHint = (
 ) => {
   const {
     comment = '',
+    expectedColor = EXPECTED_COLOR,
     isDirectExpectCall = false, // seems redundant with received === ''
     isNot = false,
     promise = '',
+    receivedColor = RECEIVED_COLOR,
     secondArgument = '',
+    secondArgumentColor = EXPECTED_COLOR,
   } = options;
   let hint = '';
   let dimString = 'expect'; // concatenate adjacent dim substrings
 
   if (!isDirectExpectCall && received !== '') {
-    hint += DIM_COLOR(dimString + '(') + RECEIVED_COLOR(received);
+    hint += DIM_COLOR(dimString + '(') + receivedColor(received);
     dimString = ')';
   }
 
@@ -398,9 +406,9 @@ export const matcherHint = (
   if (expected === '') {
     dimString += '()';
   } else {
-    hint += DIM_COLOR(dimString + '(') + EXPECTED_COLOR(expected);
+    hint += DIM_COLOR(dimString + '(') + expectedColor(expected);
     if (secondArgument) {
-      hint += DIM_COLOR(', ') + EXPECTED_COLOR(secondArgument);
+      hint += DIM_COLOR(', ') + secondArgumentColor(secondArgument);
     }
     dimString = ')';
   }