fix(jest-snapshot): do not highlight matched asymmetricMatcher in diffs (#13491)

Author: hthorhalls

CHANGELOG.md

@@ -7,6 +7,7 @@
 - `[@jest/test-sequencer]` Make sure sharding does not produce empty groups ([#13476](https://github.com/facebook/jest/pull/13476))
 - `[jest-circus]` Test marked as `todo` are shown as todo when inside a focussed describe ([#13504](https://github.com/facebook/jest/pull/13504))
 - `[jest-mock]` Ensure mock resolved and rejected values are promises from correct realm ([#13503](https://github.com/facebook/jest/pull/13503))
+- `[jest-snapshot]` Don't highlight passing asymmetric property matchers in snapshot diff ([#13480](https://github.com/facebook/jest/issues/13480))
 
 ### Chore & Maintenance
 

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

@@ -363,12 +363,7 @@ export const printDiffOrStringify = (
 
   if (isLineDiffable(expected, received)) {
     const {replacedExpected, replacedReceived} =
-      replaceMatchedToAsymmetricMatcher(
-        deepCyclicCopyReplaceable(expected),
-        deepCyclicCopyReplaceable(received),
-        [],
-        [],
-      );
+      replaceMatchedToAsymmetricMatcher(expected, received, [], []);
     const difference = diffDefault(replacedExpected, replacedReceived, {
       aAnnotation: expectedLabel,
       bAnnotation: receivedLabel,
@@ -412,7 +407,21 @@ const shouldPrintDiff = (actual: unknown, expected: unknown) => {
   return true;
 };
 
-function replaceMatchedToAsymmetricMatcher(
+export function replaceMatchedToAsymmetricMatcher(
+  replacedExpected: unknown,
+  replacedReceived: unknown,
+  expectedCycles: Array<unknown>,
+  receivedCycles: Array<unknown>,
+): {replacedExpected: unknown; replacedReceived: unknown} {
+  return _replaceMatchedToAsymmetricMatcher(
+    deepCyclicCopyReplaceable(replacedExpected),
+    deepCyclicCopyReplaceable(replacedReceived),
+    expectedCycles,
+    receivedCycles,
+  );
+}
+
+function _replaceMatchedToAsymmetricMatcher(
   replacedExpected: unknown,
   replacedReceived: unknown,
   expectedCycles: Array<unknown>,
@@ -446,7 +455,7 @@ function replaceMatchedToAsymmetricMatcher(
         expectedReplaceable.set(key, receivedValue);
       }
     } else if (Replaceable.isReplaceable(expectedValue, receivedValue)) {
-      const replaced = replaceMatchedToAsymmetricMatcher(
+      const replaced = _replaceMatchedToAsymmetricMatcher(
         expectedValue,
         receivedValue,
         expectedCycles,

packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap

@@ -259,13 +259,23 @@ Received: <t>"received"</>
 `;
 
 exports[`printPropertiesAndReceived omit missing properties 1`] = `
-<g>- Expected properties  - 2</>
-<r>+ Received value       + 1</>
+<g>- Expected properties  - 1</>
+<r>+ Received value       + 0</>
 
 <d>  Object {</>
 <g>-   "hash": Any<String>,</>
-<g>-   "path": Any<String>,</>
-<r>+   "path": "…",</>
+<d>    "path": Any<String>,</>
+<d>  }</>
+`;
+
+exports[`printPropertiesAndReceived only highlight non passing properties 1`] = `
+<g>- Expected properties  - 1</>
+<r>+ Received value       + 1</>
+
+<d>  Object {</>
+<d>    "a": Any<Number>,</>
+<g>-   "b": Any<Number>,</>
+<r>+   "b": "some string",</>
 <d>  }</>
 `;
 

packages/jest-snapshot/src/__tests__/printSnapshot.test.ts

@@ -809,6 +809,21 @@ describe('printPropertiesAndReceived', () => {
       printPropertiesAndReceived(properties, received, false),
     ).toMatchSnapshot();
   });
+
+  test('only highlight non passing properties', () => {
+    const received = {
+      a: 1,
+      b: 'some string',
+      c: 'another string',
+    };
+    const properties = {
+      a: expect.any(Number),
+      b: expect.any(Number),
+    };
+    expect(
+      printPropertiesAndReceived(properties, received, false),
+    ).toMatchSnapshot();
+  });
 });
 
 describe('printSnapshotAndReceived', () => {

packages/jest-snapshot/src/printSnapshot.ts

@@ -27,6 +27,7 @@ import {
   RECEIVED_COLOR,
   getLabelPrinter,
   matcherHint,
+  replaceMatchedToAsymmetricMatcher,
 } from 'jest-matcher-utils';
 import {format as prettyFormat} from 'pretty-format';
 import {
@@ -205,9 +206,13 @@ export const printPropertiesAndReceived = (
   const bAnnotation = 'Received value';
 
   if (isLineDiffable(properties) && isLineDiffable(received)) {
+    const {replacedExpected, replacedReceived} =
+      replaceMatchedToAsymmetricMatcher(properties, received, [], []);
     return diffLinesUnified(
-      serialize(properties).split('\n'),
-      serialize(getObjectSubset(received, properties)).split('\n'),
+      serialize(replacedExpected).split('\n'),
+      serialize(getObjectSubset(replacedReceived, replacedExpected)).split(
+        '\n',
+      ),
       {
         aAnnotation,
         aColor: EXPECTED_COLOR,